Vibe Coding 是什么？
Vibe Coding 通常指用自然语言描述目标，让 Cursor、Claude 等工具生成或修改代码，再通过运行结果继续迭代。对设计师来说，它最适合用来制作可操作原型和验证交互细节。
它没有改变产品设计与正式研发的职责边界，但让设计师可以更早验证响应式、状态切换和复杂交互，也让评审从静态画面进入实际操作。
return (
<div className="grid grid-cols-3 gap-6">
// Starter plan
<PricingCard plan="Starter" />
// Pro plan (featured)
<PricingCard plan="Pro" featured />
<PricingCard plan="Enterprise" />
</div>
)
}
// Generated in 8 seconds ✓
它改变了哪些协作方式
设计师需要补充哪些能力
原型进入交付前需要检查什么
AI 生成的代码往往在视觉上正确，但缺少 ARIA label、键盘导航支持、正确的语义 HTML。这类问题在浏览器预览中完全看不出来，却会让 5-10% 的用户（使用辅助技术的群体）无法使用你的产品。Vibe Coder 必须把无障碍检查列为标准步骤。
AI 生成的组件可能在小数据量下表现完美，但在真实生产数据（1000 条列表项、大型图片）下严重卡顿。设计师 Vibe Code 出的原型通常不包含性能测试，这可能给工程师留下错误的技术预期。
Prompt 写得不精确，AI 会做出"看起来合理"但不符合设计意图的决定——比如错误的信息层级、不符合品牌调性的间距系统。Vibe Coder 的核心技能之一就是如何写出让 AI 精确理解设计意图的 Prompt。
Vibe Coded 的代码可能结构混乱、命名随意、缺乏可维护性。当这些原型代码被直接进入生产（这种情况在初创公司极为常见），未来的每次迭代都会付出更高的代价。
我如何把它放进工作流程
我的分工是：Figma 负责信息结构和视觉判断，v0 用于快速建立可运行版本，Cursor 用于调整组件、状态和响应式。
在设计评审中，可运行原型能帮助团队直接操作流程，尤其适合验证拖拽、连续选择、错误恢复和跨尺寸布局。
原型代码不会默认进入生产。交付前需要说明用途，并检查组件结构、语义标签、键盘操作、异常状态和性能边界，再由研发决定是否复用或重写。
可运行原型的价值，是让设计判断更早接受实际操作的检验。工具负责生成初稿，设计师负责定义问题、检查结果并说明边界。