图像增量编辑提示词引导

解决什么问题

在产品评审前，经常遇到一个场景：新功能还没实现，但需要一张「看起来像真的」的截图给团队或老板看。用 Figma 从零搭一套 UI 成本太高，而让图像模型凭空生成界面，结果往往风格漂移、组件不像自家产品。

Vibe Mocking 的思路是把已有产品截图作为底图，通过自然语言描述「在这张图上增加或修改什么」，让图像编辑模型（如 Nano Banana Pro、GPT-4o image edit）直接输出一张接近真实风格的 mock 图。底图携带了颜色、字体、圆角、密度等真实视觉 token，模型只需「续写」，一致性远高于凭空生成。

核心工作流

这个技能按四步推进，每一步都需要用户确认，不会跳步：

1. 获取底图：直接在对话中发送截图，或告知本地路径。确认后 agent 会描述观察到的视觉语言（背景色、品牌强调色、圆角大小等），让用户校准理解。
2. 明确 Specs：逐项确认功能定义、呈现形式、内容元素、交互状态、文案要求和硬性约束。有不明确的项必须追问，不得假设填充。
3. 产出提示词：基于底图描述和 specs 生成结构化提示词，适合直接粘贴到图像编辑模型中使用。
4. 保存文档：默认建议命名为 vibe_mock_[功能名].md，保存在当前工作目录。

好提示词的标准

一段有效的提示词需要满足以下几点：

• 先锚定视觉语言：开头显式说明原图的视觉系统，如 深色背景（#1A1A1F）、青绿色品牌强调色、极简无边框设计语言，让模型知道续写的基准。
• 自上而下描述层次：把界面切分为「顶部 / 中部 / 底部」，依次描述每层内容，而不是把所有元素平铺。
• 使用真实文案：偏好记忆 比 标题文字 有效，已用 3 / 10 比 显示数量 有效。真实文案能锚定组件类型判断。
• 点出交互状态细节：比如按钮的「不可点击灰色状态」、卡片的「hover 态图标浮现」，增加信息密度。
• 结尾收束视觉基调：如 整体视觉要求：无阴影过渡，风格极简冷峻，防止风格漂移。
• 不描述动效或时间维度：图像模型输出静态图，「淡入」「动画」等描述只会引入歧义。

适用边界

这种方式适合快速概念验证、内部对齐、需求文档配图，以及探索多个设计方案时用图像直觉判断方向。但它不能替代设计师的深化工作，也无法处理需要精确像素级还原的场景。另外，底图质量直接决定输出质量，模糊或风格不统一的截图会让模型续写时偏离轨道。