Vibe Coding 是什么？
2025 年初，Andrej Karpathy（前 OpenAI、Tesla AI 负责人）在 X 上创造了"Vibe Coding"这个词，用来描述一种全新的编程方式：完全用自然语言描述你想要的东西，让 AI（Cursor、Claude、GPT-4o）来写代码，而你自己不需要深入理解代码的实现细节，只需要感受（vibe）到它是否符合预期，然后继续迭代。
这个概念一经提出就在设计和开发两个社区同时引爆讨论——因为它打破了一个长达 30 年的边界：设计师需要依赖工程师才能实现想法，工程师需要依赖设计师才能知道界面应该长什么样。Vibe Coding 让这两个角色的执行鸿沟，在理论上可以被任何一方独立跨越。
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 ✓
Vibe Coding 改变了哪些游戏规则
"The designer who can speak both the language of users and the language of machines will be the most powerful person in any product team."
— Figma CEO Dylan Field, Config 2024 KeynoteVibe Coding 时代的设计师技能矩阵
Vibe Coding 的真实风险
AI 生成的代码往往在视觉上正确，但缺少 ARIA label、键盘导航支持、正确的语义 HTML。这类问题在浏览器预览中完全看不出来，却会让 5-10% 的用户（使用辅助技术的群体）无法使用你的产品。Vibe Coder 必须把无障碍检查列为标准步骤。
AI 生成的组件可能在小数据量下表现完美，但在真实生产数据（1000 条列表项、大型图片）下严重卡顿。设计师 Vibe Code 出的原型通常不包含性能测试，这可能给工程师留下错误的技术预期。
Prompt 写得不精确，AI 会做出"看起来合理"但不符合设计意图的决定——比如错误的信息层级、不符合品牌调性的间距系统。Vibe Coder 的核心技能之一就是如何写出让 AI 精确理解设计意图的 Prompt。
Vibe Coded 的代码可能结构混乱、命名随意、缺乏可维护性。当这些原型代码被直接进入生产（这种情况在初创公司极为常见），未来的每次迭代都会付出更高的代价。
我自己的 Vibe Coding 实践
过去一年，我已经把 Cursor 和 v0 深度集成进了自己的日常工作流。我的方式是：Figma 负责视觉决策，v0 负责快速出可运行版本，Cursor 负责迭代调整。
最直接的收益体现在利益相关者沟通上。以前，设计评审里总有人说"我需要看到真实的交互效果才能判断"——现在我可以在 Figma 评审结束后当场打开浏览器，演示一个用 v0 生成的、真正可以交互的原型。这个改变让设计对齐的效率提升了至少 30%。
但我也踩过坑：早期我把 Vibe Coded 的定价页面组件直接发给工程师参考，结果他们花了额外的时间重构 AI 生成的混乱代码结构。现在我会在 Prompt 中明确要求 AI 遵循特定的组件架构规范，并在交付前自己做一遍无障碍检查。
Vibe Coding 最终不会替代任何角色，它只是抹平了"有想法但无法执行"和"有能力但缺乏洞察"之间的鸿沟。最终决定设计质量的，依然是那个在 Prompt 背后真正理解用户需求的人。