Skill: Vibe Mocking
这个 Skill 是什么
Vibe Mocking 是一种利用先进图像编辑模型（如 Nano Banana Pro）在已有产品截图基础上进行增量式界面概念验证的工作范式。
核心思路：不从零生成 UI，而是把真实产品截图作为底图，通过自然语言描述「在这张图上增加或修改什么」，让模型直接输出一张接近真实产品风格的 mock 图，跳过设计工具的搭建成本，快速验证新功能或新交互的可行性。
这种方式的价值在于：底图本身携带了大量真实的视觉 token——颜色系统、组件风格、字体层级、空间密度——模型无需猜测，只需在已有语言上「续写」，因此输出的一致性远高于凭空生成。
使用场景
- 新功能上线前快速验证设计方向，用于内部对齐或向上汇报
- 产品评审前无法及时出稿，需要一张「看起来像真的」的示意图
- 探索多个设计方案，用图像直觉判断方向，再交给设计师深化
- 用于需求文档配图，让研发和设计更容易理解功能意图
Agent 工作流程
当用户调用此 Skill 时，按以下步骤推进，每步完成后等待用户确认，不要跳步。
第一步：获取底图
询问用户提供原产品截图。可以是：
- 直接在对话中发送截图（推荐，agent 可直视图像）
- 告知截图在本地的路径（agent 读取后描述所见内容，与用户确认理解是否准确）
确认底图后，主动描述你观察到的视觉语言关键词：背景色、品牌强调色、圆角大小、卡片风格、字体层级、整体密度感。让用户确认描述是否准确，这一步是提示词质量的地基。
如果用户没有底图（概念阶段），进入「纯风格描述模式」，让用户用文字描述产品的视觉风格，然后继续。
第二步：明确产品 Specs
围绕要 mock 的新功能，逐项确认以下内容。有不明确的项必须追问，不得假设填充：
- 这是什么功能？用一句话说清楚它解决什么问题。
- 以什么形式呈现？（浮层、侧边栏、内联展开、新页面、Toast 提示等）
- 核心内容区有哪些元素？（列表、卡片、输入框、按钮、图表等）
- 有哪些关键交互状态需要在图中体现？（空状态、加载中、填写中、已完成等，选一个最有表达力的状态）
- 有没有明确的文案要求？（标题、说明文字、按钮文字等，如无则由 agent 拟定）
- 有没有硬性约束？（尺寸、槽位数量、字符限制等）
确认完毕后，用一段话向用户复述你的理解，请用户确认后再进入下一步。
第三步：产出提示词
根据底图描述和 specs，生成一段结构化的图像编辑提示词。提示词写法见下方「好提示词的标准」章节。
提示词产出后，告知用户：
> 这段提示词适合直接粘贴到 Nano Banana、GPT-4o image edit 等支持图像编辑的模型中使用。使用时需要同时上传原产品截图作为底图，在需要修改的区域涂抹 Mask，然后输入此提示词。如果模型支持纯文字输入（无需 Mask），可直接粘贴使用。
第四步：保存到本地文档
询问用户希望将提示词保存到哪个文件，或者是否要新建一个文件。默认建议命名为 vibe_mock_[功能名].md，保存在当前工作目录。
文件结构模板：
# Vibe Mock: [功能名称]
## 底图说明
[底图路径或描述]
## 功能 Specs 摘要
[用户确认后的功能描述，3-5 条要点]
## 图像编辑提示词
> [提示词正文]
## 使用说明
- 底图：[文件路径]
- 建议 Mask 区域：[描述]
- 适用模型：Nano Banana / GPT-4o image edit / 其他支持图像编辑的模型
好提示词的标准
基于实际案例总结，一段有效的 Vibe Mocking 提示词应具备以下特征：
1. 先锚定视觉语言，再描述新内容
开头必须显式说明原图的视觉系统，让模型知道「续写」的基准是什么。不要假设模型会自动推断。
示例：
> 在这张深色 UI 截图上，叠加绘制一个居中弹出的设置面板浮层。面板整体风格与原页面完全一致：深色背景（#1A1A1F）、青绿色品牌强调色、极简无边框设计语言。
2. 自上而下描述层次结构
把界面切分为「顶部 / 中部 / 底部」或「层级 1 / 层级 2 / 层级 3」，依次描述每层的内容和视觉表现。不要把所有元素平铺在一段话里。
3. 给出真实文案，不要用占位符
「偏好记忆」比「标题文字」有效，「已用 3 / 10」比「显示数量」有效。真实文案会锚定模型对组件类型的判断，减少猜测偏差。
4. 点出至少一个交互状态细节
说明某个按钮是「不可点击灰色状态」、某个卡片是「悬停时右侧图标浮现」，这类细节能让生成图更接近真实产品的信息密度，而不是只有静态布局。
5. 结尾用一句话收束视觉基调
> 整体视觉要求：无阴影过渡，风格极简冷峻，符合原页面的专业工具感。
这句话的作用是给模型一个「最终校准信号」，防止它在细节上过于装饰化或风格漂移。
6. 不要描述动效或时间维度
图像编辑模型输出的是静态图，描述「淡入」「动画」等词语不会带来任何增益，反而可能引入歧义。
反面案例
避免这类写法：
- 「添加一个弹窗」——太模糊，模型会随意发挥
- 「风格和原图一样」——没有提供具体视觉参数，无效
- 「界面美观大方」——审美形容词对模型没有约束力
- 「参考 Google Material Design」——引入外部风格参照会导致风格漂移
范例：本 Skill 首次使用时产出的提示词
以下是一个完整的真实案例，供参考提示词的写作密度和结构。
功能背景：为一款深色主题的 AI 创作工具，新增「偏好记忆」设置浮层，参考 Gemini 的用户偏好记忆功能，允许用户管理最多 10 条会被注入系统提示的偏好文本。
产出的提示词：
> 在这张深色 UI 截图上，叠加绘制一个居中弹出的设置面板浮层。面板整体风格与原页面完全一致：深色背景（#1A1A1F）、青绿色品牌强调色、极简无边框设计语言。
>
> 面板尺寸约为页面宽度的 40%，垂直居中，背景加半透明深色遮罩。面板结构如下：
>
> 顶部：左侧标题「偏好记忆」（白色，中等字重），右侧显示「已用 3 / 10」的小标签（灰色），最右侧有一个 × 关闭按钮。标题下方一行小字说明文案（灰色）：「这些偏好会被插入对话的系统提示中，影响 AI 的回答方式。」
>
> 中部：展示 3 张条目卡片，卡片背景略浅于面板（#242429），圆角，每张卡片左侧显示一段中文偏好文本（如「我喜欢简洁直接的回答，不要过多铺垫」），右侧有铅笔编辑图标和垃圾桶删除图标（灰色，hover 态青绿色）。卡片列表下方是一个带虚线边框的「+ 添加偏好」按钮卡片。
>
> 底部：右对齐排列两个按钮，左侧「取消」为幽灵按钮（白色边框），右侧「保存」为填充青绿色的主按钮。
>
> 整体视觉要求：无阴影过渡，风格极简冷峻，符合原页面的专业工具感。
