跳到正文

Vibe Coding

中级通用

Vibe Coding 是一种以自然语言描述目标、让 AI 生成和修改代码,再通过运行效果持续调整的开发方式。它让你不用先写出每处实现细节,也能快速做出可体验的产品雏形;但代码能运行,不等于功能已经可靠。

你可能会说:「我想先把这个想法做成能点的网页,边看效果边告诉你怎么改,可以吗?」

读之前建议先了解

动手看看

购物车原型工作台预设代码与预览联动 · 不执行真实代码
1 · 描述目标
你做一个购物车,里面有一本39元的笔记本。
追加需求增加满50元减10元优惠,显示实付款。
不足50元不能减,请修正优惠条件。
2 · AI修改代码
const subtotal = 39;
const total = subtotal;
const total = subtotal - 10;
const total = subtotal >= 50 ? subtotal - 10 : subtotal;
预览可渲染
3 · 页面预览
方格笔记本1本 · ¥39.00
满50减10
实付 ¥29.00
实付 ¥39.00
结算预览
未通过:优惠门槛输入39元,预期实付39元,实际29元。页面能显示,但少收了10元。
通过:优惠边界样例39→39、49→49、50→40。这里只检查几个样例,不代表整个购物车可靠。
通过:基础金额样例输入39元,实付39元。尚未加入优惠逻辑。
自然语言需求
追加:不足50元不能减
显示功能检查结果

先切换自然语言需求,看代码与页面一起变化,再打开功能检查。这个预设工作台模拟的是“描述目标、看效果、继续改”的循环。

满50减10看起来已经做出来了,但要核对金额。Vibe Coding能快速给你可体验的雏形,不代表AI已经正确理解所有规则。

要点

  1. 1

    先说想要的效果和范围

    比如你想做一个活动报名页,可以先说清用户要填什么、提交后看到什么,让 AI 生成第一版。你不必预先决定每个文件怎么写,但目标越具体,越容易判断结果是否接近预期。

  2. 2

    用运行结果推动下一轮修改

    第一版出来后,你打开页面试一遍:手机上表单是否挤在一起,提交空内容会怎样。把观察到的问题告诉 AI,让它修改,再重新运行。这里的重点是用实际效果反馈,而不是只看 AI 说已经完成。

  3. 3

    按用途决定检查到什么程度

    如果只是验证一个页面想法,能点通主要流程可能就够了。如果要接收真实用户数据,我们还得检查代码变更、错误处理和测试结果。Vibe Coding 描述的是推进方式,不代表可以省掉上线前的验证。

容易混淆的地方

它和一般的 AI 辅助编程都用 AI,但侧重点不同:后者也可以是开发者先定好实现方案,再让 AI 补一段明确的代码;Vibe Coding 更常从想要的效果出发,边体验边调整。它也不等于可点击原型:原型可以只模拟交互,Vibe Coding 产出的通常是实际运行的代码,只是运行起来不代表已经适合上线。

什么时候用

适合用

  • 你想验证一个报名工具的核心流程,可以让 AI 先做出能填写、提交和查看结果的版本,再边试边改。
  • 你在探索后台页面的布局和交互,想快速比较几种方案,可以用运行中的页面向 AI 反馈具体问题。
  • 你要给团队演示一个 AI 工具的想法,先做小范围、使用模拟数据的演示版,比一开始规划完整系统更容易讨论。

不适合用

  • 只是要修改已有项目的一处确定文案时,直接定位文件改动并检查差异更合适,没必要重新生成页面。
  • 要处理支付或真实用户的敏感数据时,不能靠边试边改来确定正确性;先明确方案、安全要求和测试,再按流程开发。
  • 已有大型系统要迁移数据库结构时,先分析依赖、制定迁移与回滚方案,比让 AI 凭页面效果迭代可靠。

练一练

你想验证一个社区活动报名工具的想法,准备先做演示版。下面哪种做法最符合 Vibe Coding,也能让你知道第一版是否可用?

让 AI 帮你做

我们用 Vibe Coding 先做一个活动报名页演示版,只用模拟数据,不接真实用户信息。请先实现填写、提交和结果页的基本流程,告诉我如何在本地运行;我试用后会反馈具体问题,请根据反馈逐轮修改,并说明每轮改了什么。

接下来学什么