Vibecoding
Vibecoding 入门:用自然语言写代码的正确姿势
不是让 AI 替你写代码,而是学会和 AI 一起思考。从第一个提示词到完整工程的系统化方法论。
12 分钟
什么是 Vibecoding
Vibecoding 不是把需求丢给 AI 然后等它写完——那是外包,不是编程。
真正的 Vibecoding 是一种人机共思的工作方式:你带着清晰的意图进入对话,AI 帮你快速具象化和验证这个意图,你再基于结果迭代。整个过程中,主导权始终在你手里。
"工具改变做事的方式,更重塑我们对自身能力的认知。"
核心原则
1. 意图先行,实现后置
写第一个提示词之前,先在脑子里把问题说清楚:
- 这个功能解决什么问题?
- 谁会用它,在什么场景下?
- 成功的标准是什么?
这不是浪费时间,这是节省时间。一个模糊的提示词会产生模糊的代码,你会花 3 倍时间修复它。
2. 小步快跑,即时验证
不要一次性描述 200 行的需求。拆成最小可验证单元(MVU):
不好的方式:
"帮我写一个完整的用户认证系统,包括注册、登录、忘记密码、邮件验证……"
好的方式:
"先写注册表单的 UI,用 React Hook Form,字段:邮箱 + 密码,不需要提交逻辑"
→ 验证 OK
"现在加上客户端校验:邮箱格式、密码最少 8 位"
→ 验证 OK
"加上提交逻辑,调用 /api/auth/register"
3. 保留主动判断
AI 给你的是候选方案,不是最终答案。你要问自己:
- 这个方案有没有我没想到的副作用?
- 有没有更简单的实现?
- 这个命名/结构符合项目风格吗?
提示词结构模板
一个好的提示词通常包含四个部分:
| 部分 | 作用 | 示例 |
|---|---|---|
| 角色/场景 | 给 AI 上下文 | "这是一个 Next.js 14 App Router 项目" |
| 具体需求 | 说清楚做什么 | "创建一个 ProductCard 组件" |
| 约束条件 | 限定范围 | "使用 shadcn/ui,不要引入新依赖" |
| 验收标准 | 定义完成 | "点击卡片跳转到 /products/[slug]" |
常见误区
误区 1:提示词越详细越好
不对。过度详细的提示词会限制 AI 的推理空间,往往产生机械的、死板的代码。描述意图,而不是步骤。
误区 2:AI 写错了就直接重新生成
先分析错在哪里,然后有针对性地修正,而不是反复抽奖。这是最重要的迭代习惯。
误区 3:把 AI 当搜索引擎
AI 最强的地方是推理和综合,不是查找。充分利用它的上下文理解能力,让它帮你分析问题、对比方案、预测风险。
第一个 Vibecoding 项目
推荐从这个练习开始:用自然语言,在 30 分钟内做出一个可用的 todo list。
不追求代码质量,只追求一件事:让它跑起来,让你体验整个对话-验证-迭代的节奏。
等你有了这个节奏感,你会明白 Vibecoding 的真正价值不是"快",而是保持高质量思考的同时大幅降低实现成本。
© 杨树 · 保留所有权利