Vibe coding界面丑，问题出在第一步
我自己 Vibe Coding 了十几个网站，上线了 5 个，遇到过很次界 UI 不符合预期的情况，在 YouTube 学习了很多，现在有一套非常有效的工作流分享一下

这个工作流基本可以保证 coding 出来的界面就是你想要的。

1️⃣ 要定义清楚问题
在什么场景下用、卡点在哪儿、解决哪一个或哪些核心任务。这一步如果没想清楚的话，后面就没办法给出一个完整的解决方案

2️⃣ 是要写 Design.md
可以把你想要参考的网站，或者觉得好的页面都截图给 AI，让 AI 去学习信息层级、视觉方向和参考、核心流程、组件的颜色、字体、间距规则
然后直接让 AI 写成 Design.md 即可。这样就可以把你觉得好的东西，翻译成 AI 能够直接执行的规则。

3️⃣把 design.md 给AI，让 AI 给你生成多个原型
然后你在这几个生成的里面选出想要的，再去调细节，到你满意为止

4️⃣让 AI 生成PRD
这一步，你把定下来的原型，design.md 以及你定义的问题都发给 AI，让他给你生成 PRD。相当于就把产品的目标用户、流程、页面结构、交互规则、数据和技术约束都有了。你直接把前面三步的资料发给 AI让 AI 写就好

5️⃣让 AI 补齐所有核心页面
在正式 coding 之前，要确保所有核心页面都符合你的预期，不能只有几张漂亮的图片。
各个界面的核心图片都让 AI 做出来，包括一些容易忽视的默认、空白、加载错误状态的图都要有

6️⃣齐活了让 AI 开始开发吧
把之前做好的原型、PRD，以及补齐的所有核心界面都扔给 AI，让 AI 基于已经做好的文档来写代码，你最后拿到的成品一定就是一个你满意的界面了

学会了这套工作流，不论是 codex，workbuddy，coze 还是 kimi 都适用
howto用好AI workbuddy claudecode