一个设计师的Vibe Coding阶段总结

提供充足的上下文

分步骤执行

验证理解：如果不确定自己表达是否清晰，可以要求AI复述一遍自己的理解

看到AI的中间输出结果或者思考方向不对时及时打断，给出调整意见

验证不可跳过，可通过浏览器等进行实际操作验证，有必要的话可以搭建测试小工具用于测不同场景。一个例子是移动端的色号清单面板。我一开始明确要求它们在移动端使用弹窗承载。AI 完成了弹窗、遮罩和关闭按钮，但后续检查时才发现，桌面端的定位样式仍然影响着移动端的布局。

及时验证，后续验证再debug可能很难回溯。

提交前还需要做Code review，检查这次改动是否超出了需求范围，是否引入了回归问题，是否遗漏了边界情况，并运行测试

页面级改动，明确需要改动的位置和范围，说明用户需要看到什么、完成什么操作利用coding工具的内置浏览器的评论功能，或者截图圈选，让AI对于描述的理解更精准但要注意上下文长度不宜过长，否则会影响生成速度和质量。流程的新增或改版，先描述基础功能和目标，然后用grill-me这种skill来补充落地细节，把讨论结果落成计划文档再执行。每一步骤都要完成 执行→review→提交的闭环。提交Github，每完成一个阶段性改动都应该提交，以便后续追溯或回退。

AI在debug时容易“打补丁”、只做局部调整，要明确引导它从问题的源头解决问题，解决完之后检查是否还有类似问题。

需要时不时检查一下代码的健康度，AI常常会在同一个文件里写很多代码，而不是主动拆分。过大的代码文件模糊每个文件的功能范围、导致生成代码时上下文过长，影响后续开发质量。

建立设计系统，也就是通用的token和组件库，包含字号、颜色、圆角、间距、阴影等token和按钮、表单、弹窗等组件。

生成组件预览页面，把通用组件都列在其中，作为验收时的参考，同时它附的变量名，也让我描述需求时可以更加精准。

定义原则，引导AI优先使用现有的token而不是定义局部变量。

及时验收，验收时使用浏览器检查器等查看样式应用情况，并与组件预览页面对照检查。

阶段性复盘，进行了大型页面改版后，可以让AI从代码层面检查是否有新增的局部变量等，对变量进行收敛，有必要的话新增全局样式和变量。