Jan 30, 2026
Vibe Design:原型到设计稿的自动化输出
我们的目标
基于我们之前对 Vibe Design 的初探（Vibe Design 初探），我们的目标很明确：能否直接从产品原型（HTML 文件）快速“翻译”成设计稿？而且这个稿子不能是野路子，必须得严丝合缝地符合我们既有的设计规范，还得带上用户体验的视角。
我们撞上的“南墙”
要把设计规范融入流程，最难的就是告诉 AI：按规矩办事。 虽然像 Figma Make 这种工具可以引用设计系统生成代码，我们也尝试过提取 Token 作为样式指引，配色确实能对上，但在页面布局、交互逻辑上，AI 经常“放飞自我”，跟我们的规范偏差极大。 我们意识到，光有细碎的样式 Token 不够，我们需要更“大粒度”的组件级、页面级 Token，得让 AI 真正读懂我们的逻辑。
核心对策：逻辑与样式的彻底分离
经过反复折腾，我们确定了一个基本盘：逻辑与样式分离。 简单来说，产品功能是“变量”，而设计规范是“不变量”。我们将两者剥离开，分别喂给 AI，最后再进行合龙。
变量提取：剥离视觉，只谈功能
这是系统中的变量。AI 需要通过 PRD 或原型截图，抽取出整个页面的功能骨架——模块、字段、操作，但不允许带入任何视觉干扰。
我们给 AI 下了死命令，生成的 xxx_logic.md 文档必须极其克制。你可以看看这套提示词的严苛程度：
功能抽取提示词（见附件）要点：
这样，我们就得到了一份纯粹的逻辑说明书。
不变量提取：沉淀规范，确立调性
这部分是相对稳定的，比如列表页的典型布局。AI 通过典型页面提取出布局、排版、字体、间距等 UI 特征。
为了比截图更精准，AI 现在可以通过 Figma MCP 直接访问设计稿，从而输出一份高质量的 xxx_guide.md。
样式抽取提示词要点：定位：将此页面视为“平台级规范示例”。
页面生成：当逻辑遇见规范
有了“骨架”和“皮囊”，最后一步就是把它们合在一起。
我们将 xxx_page.md（逻辑）和 xxx_guide.md（指南）同时喂给 AI，要求它严格依据这两个文档，把页面实现出来。
这里的硬性约束是：
- 结构对齐：模块必须且仅能来自逻辑文档。
- 视觉对齐：表现层必须严格遵循指南文档，不得引入任何未定义的视觉特征。
复盘：效果到底怎么样？
我们拿产品 PRD 里一个“系统推荐达人列表”页面做了测试。
这是产品经理输出的 PRD 文档中的页面截图
这是典型页面-列表页设计规范
原原型存在的问题肉眼可见：
- 主按钮位置不对。
- 筛选和搜索方案跟规范对不上。
- 列表按钮颜色、表头大小写、背景色全都是错的。
通过 AI 优化后的方案： 最终输出的效果显示，上述问题基本都消失了，已经符合设计规范 80% 的要求。 剩下的细节微调，设计师只需要把代码转回设计稿，在 Figma 里点对点调整即可。 另一个页面的表现也同样符合预期。
这是AI 输出的设计稿
通过这种“逻辑与样式解耦”的策略，我们确实在从原型到自动设计的路上跨出了一大步。
这是另外一个页面的测试效果
文档附件：