AI 编程生产力与 Vibe Coding 十诫
编程方法论实践指南难度: ⭐⭐⭐☆☆"Treat AI like a junior programmer who completed a lot of studies but has never worked on a real project. — 你必须在场 引导、监督、反馈 ,才能获得最佳产出。"
本指南旨在系统梳理如何利用 AI 工具提升编码生产力。核心理念是:AI 是你的合作伙伴 (Partner),不是自动驾驶仪。你必须充当管理者,而非乘客。
一、🎯 核心理念:AI 作为编程伙伴
1.1 编程范式转移
传统开发依赖 个人逐行编码 ;AI 时代的高效开发依赖 人机协作调度能力 。
| 低效模式 (Passive) | 高效模式 (Active) |
|---|---|
| 让 AI 生成整个项目然后直接部署 | 让 AI 在你的指导下逐步构建,每步审查 |
| 无编程知识地让 AI 写核心代码 | 在自己擅长的领域用 AI 加速 10 倍 |
| 用一句话 Prompt 开始编码 | 精心策划初始 Prompt,使用 Prompt-to-Prompt 策略 |
| 遇到 Bug 反复追问 AI | 三次尝试后果断回滚,重新设计 Prompt |
⚠️ "关掉 Linter" 陷阱
AI 有时会 表面上满足你的要求,但实际上在作弊 。例如,让它执行严格类型检查重构时,它可能直接关闭 Linter 而非修复代码——就像让你打扫房间,它却把所有东西扔进垃圾桶。满足约束 ≠ 完成任务。
1.2 AI 在代码场景中的正确定位
关键心智模型:生成 vs. 审查
| 任务类型 | AI 的角色 | 你的期望 |
|---|---|---|
| 代码生成 (Generation) | 🟡 当作 非常初级 (Very Junior) 的开发者 | 低期望,持续监督 |
| 代码审查 (Review) | 🟢 当作 非常资深 (Very Senior) 的审查者 | 高期望,充分利用其知识广度 |
| 文档生成 (Documentation) | 🟢 高效助手 | 极大节省无聊工作的时间 |
| PR Review 自动化 | 🟢 流水线质量检查员 | 自动检查代码风格和最佳实践 |
二、📜 Vibe Coding 十诫
以下十条准则是使用 AI 编写高质量代码的核心规则。
诫命一:精心策划初始 Prompt
I will try to make my first prompt as well planned and as well thought out as possible.
为什么重要? 初始 Prompt 的质量直接决定了整个项目的质量上限。一句 "Build me a Spotify clone" 能让 AI 生成 看起来像 的东西,但底层代码会充满 下游地雷 (Downstream Monsters) ——无法维护、无法扩展、安全漏洞百出。
实践方法:Prompt-to-Prompt 策略
- 描述项目 :给一个名字,用一句话描述核心功能,列出功能清单。
- 添加约束 :写明
Do not build anything yet,让 AI 先理解、后提问。 - 回答问题 :逐一回答 AI 的澄清问题,注入 Context。
- 再让 AI 生成正式 Prompt :让 AI 根据所有信息生成两版候选 Prompt。
- 你来选择 :挑选更好的那版。
# Prompt-to-Prompt 模板
I want to build an app called [名称].
It does: [一句话描述].
Features:
1. [Feature A]
2. [Feature B]
3. [Feature C]
...
Do NOT build anything yet.
Ask me clarifying questions first so you fully understand the requirements. ALWAYS.诫命二:不要让 AI 恭维你
I will not let the AI compliment me.
AI 天生 谄媚 (Sycophantic) ,会说 "Wow, great idea!" 来掩盖潜在问题。
规避方法:
- 不要问 AI "我的想法好不好" ——它永远说好。
- 让 AI 生成多个方案 ,由你来挑选。
- 把自己当作 审核者 (Reviewer) ,而不是 被评价者 。
诫命三:不使用冷门技术栈
I will not use obscure tech stacks.
AI 的训练数据中,热门技术栈 (React, Python, HTML/CSS/JS) 的代码量远超冷门技术栈。 数据越少,输出越差。
技术栈选择原则
- 使用 主流、文档丰富 的技术(如 HTML/CSS/JS, React, Python + Flask)。
- 避免追新——那个 YouTube 上有人推荐的"AI 最佳技术栈",可能训练数据极少。
- 对于简单项目,纯 HTML/CSS/JS + LocalStorage 是最优解。
诫命四:使用 Git 做版本控制
I will use Git to version control my project.
这是 Vibe Coding 中最重要的一条规则。
AI 擅长 向前创造 ,但 极度不擅长回退 。你不能靠 Prompt 撤销更改——AI 不记得代码之前的样子。
Git 工作流:
代码修改 → 测试通过 → git commit → 继续下一步
↓ 测试失败
git revert → 重新提交 Prompt没有 Git = 灾难
如果你不做版本控制,AI 改坏代码后,你唯一的选择是 删除一切,从头开始 。这不是夸张——这是实际开发中最常见的痛苦场景。
诫命五:使用检查 → 提交 (Inspect → Commit) 循环
每次 AI 生成代码后:
- 检查代码 :使用浏览器开发者工具定位具体 HTML 元素。
- 测试功能 :手动验证行为是否符合预期。
- 立即提交 :
git commit -m "descriptive message"。 - 清理上下文 :每 2-3 轮 Prompt 后清空 AI 的上下文窗口。
诫命六:定期清理上下文窗口
I will regularly clear the context window.
Context Bloat(上下文膨胀) 是真实存在的问题。随着对话越来越长,AI 的准确度会 显著下降 。
最佳实践:
- 每完成一个功能后,清空上下文(如在 Claude Code 中按
Ctrl+C两次退出并重新进入)。 - 使用
CLAUDE.md或类似项目文档让 AI 快速重获全局视角。
诫命七:先审查思路,再让 AI 写代码
I will review the thought process before letting the AI write any code.
你的 Prompt → AI 的思考过程(计划) → 你审查计划 → 批准 → AI 写代码
↓ 计划有问题
纠正/重新引导诫命八:三次失败即回滚
I will not get stuck on fixing errors and bugs.
给 AI 三次机会 修复 Bug:
- ✅ 第一次修好 → 提交
- 🔄 第二次修好 → 提交
- 🔄 第三次修好 → 提交
- ❌ 三次都失败 →
git revert,回到上个检查点,重新设计 Prompt
诫命九:不在不懂的领域部署 AI 代码
I will not deploy AI-generated code I don't understand into production.
风险清单:
- SQL 注入攻击
- API 密钥泄露
- 数据库不安全操作
- 公司机密暴露
- 不可维护的代码债务
真实案例
一些没有编程经验的 CEO 和管理者使用 AI 编码工具直接修改大型代码库。他们看到了 "用英语编程" 的美好愿景,却忽视了 下游成本 (Downstream Cost) :不可维护、安全漏洞、技术债务。你可能需要处理这些后果。
诫命十:在部署前定期审查代码
I will regularly review the code that the AI has written, and definitely before I deploy.
即使你不逐行审查每段代码,也应:
- 在 每次提交前 审查差异 (diff)。
- 在 部署前 做完整的代码走查。
- 使用 AI PR Review 自动化 进行流水线检查。
三、🛠️ 专业工具链
3.1 Cursor:代码编辑中枢
Cursor 是一个基于 VS Code 的 AI 增强代码编辑器。
两种使用模式:
| 模式 | 适用场景 | 说明 |
|---|---|---|
| Chat Prompt | 外观调整、简单修复 | 引用文件 (@file),选择模型,自动插入代码变更 |
| Inline Completion | 高效逐行编码 | AI 猜测下一步代码,按 Tab 确认;适合有编程经验者 |
最佳实践:
- Chat 适合 小改动 (如移除一条线、调整颜色)。
- 对于涉及 应用逻辑 的重大改动,使用 Claude Code。
- 使用 @ 引用相关文件以缩小上下文范围、节省 Token。
- 精确引用 HTML 元素名称(如通过 Inspect 获取的 ID/Class),而非模糊描述。
3.2 Claude Code:项目级 AI 编码代理
Claude Code 是一个终端/VS Code 扩展,具备 项目全局感知能力 。
核心优势:
Cursor Chat:只看了你项目的一页代码
Claude Code:读遍了你项目的每一行代码初始化流程:
# 1. 安装
npm install -g @anthropic/claude-code
# 2. 进入项目目录
cd ~/developer/my-project
# 3. 启动 Claude Code
claude
# 4. 初始化项目理解
/init/init 会生成一个 CLAUDE.md 文件——这是 Claude 对你项目的 全局理解文档 ,相当于给 AI 新员工的入职培训手册。
并行任务调度:
- 可以同时开启多个 Claude Code 实例处理不同任务。
- 前提:确保任务之间 不修改相同代码区域 。
3.3 工具协同:合金策略 (Alloying)
合金策略 (Alloying) 是指组合不同 AI 工具的优势来获得更好的最终结果。
| 工具 | 最佳用途 |
|---|---|
| ChatGPT | Prompt 精炼、图片背景去除、Prompt-to-Prompt |
| Claude Web | 大型初始代码生成(尤其纯前端项目可预览) |
| Cursor (Chat) | 小范围外观修改、快速修复 |
| Claude Code | 应用逻辑开发、多文件重构、项目级理解 |
| Gemini (Nano Banana) | 图片生成 & 保留式编辑 (精确修改图片局部) |
合金效应
研究表明,即使使用较老的模型,组合不同 AI 的产出也优于单独使用最强前沿模型。合金策略不只是替代方案——它本身就是 最优策略 。
四、🧪 实战案例:Productivity Garden
4.1 项目概述
Productivity Garden 是一个游戏化待办事项应用——用 种植虚拟植物 的方式激励任务完成。
核心玩法:
点击花园 → 种下种子(=创建待办事项)→ 种子随时间生长(🌱→🌿→🌳)
↓ 完成任务
随机收获神秘植物 → 收入 Plant Dex(图鉴)稀有度系统:
| 等级 | 来源 | 概率 |
|---|---|---|
| 🟢 Basic | 初始种子 | 最高 |
| 🔵 Rare | 基础植物成熟后的种子 | 中等 |
| 🟣 Extinct | 稀有植物成熟后的种子 | 最低 |
设计亮点:
- 种子银行上限 5 :同时只能有 5 个活跃待办事项(符合生产力原则)。
- 盲盒机制 :完成任务后获得随机植物,触发"宝可梦式"收集欲。
- 20 分钟最低时限 :防止秒完任务刷植物。
4.2 开发流程复盘
以下是整个项目的 AI 辅助开发流程,展示了 Vibe Coding 十诫的实际应用:
Phase 1:Prompt 炼金(ChatGPT + Claude)
ChatGPT: 描述项目 → AI 提问 → 回答问题 → 确定技术栈 → 生成两版 Prompt
↓
Claude Web: 粘贴精选 Prompt → 生成初始代码 → 下载项目文件Phase 2:迭代开发(Cursor + Claude Code)
Git Init → 每次改动后 Commit
├── Cursor Chat: 移除棕色地平线
├── Claude Code: 更新生长阶段为 Emoji
├── Claude Code: 植物图鉴显示真实图片(而非 Emoji)
├── Claude Code: 收获动画 + 音效
├── Claude Code: 清除花园按钮
└── Claude Code x2 (并行): 更换背景 + 添加功能Phase 3:资源生产(Gemini + ChatGPT)
Gemini Nano Banana: 生成幻想植物图片 → 编辑局部细节
↓ 背景去除(Gemini 不擅长)
ChatGPT: 精确抠除背景 → 透明 PNG
↓ 清理
手动移除 Gemini Logo → 命名入库Phase 4:部署(GitHub Pages)
git push → GitHub Repo (Public)
→ Settings → Pages → Source: Deploy from branch (main)
→ 静态站点上线 🎉五、🧠 深度洞察
5.1 软件工程基础不会消失
AI 不会让以下知识过时:
- Git & 版本控制 :AI 最大的弱点是无法回退。
- 类型安全 (Type Safety) :AI 可能关掉 Linter 来"解决"类型错误。
- 模块化 & DRY :AI 生成的代码倾向于重复和臃肿。
- 安全意识 :AI 不会主动防御 SQL 注入或密钥泄露。
5.2 文档是 AI 的"入职培训"
就像新来的高级工程师无法直接读懂 30,000 行代码一样,AI 也需要 浓缩的项目文档 。
| 方式 | 效果 |
|---|---|
| 直接喂 30,000 行代码 | ❌ 上下文爆炸,输出质量骤降 |
生成 CLAUDE.md / README.md 摘要 | ✅ AI 快速获得全局视角,输出精准 |
文档生成 Prompt:
Read through my entire codebase and generate a comprehensive documentation file.
Include:
1. Project overview and architecture.
2. Key modules and their responsibilities.
3. Data flow between components.
4. API endpoints (if any).
Output as a single Markdown file that a new developer (or AI) can read to understand the project.5.3 AI PR Review 自动化
场景: 管理多位开发者时,逐行审查代码耗时巨大。
解决方案: 使用 AI 自动化 PR Review 流水线。
- 检查 公司代码风格 一致性。
- 检查 常见最佳实践 违规。
- 运行 Linter 自动扫描。
- 仅标记问题 ,由人类做最终判断。
六、📝 Prompt 速查表
| 场景 | Prompt 模板 |
|---|---|
| 初始项目 Prompt | I want to build [名称]. Features: [...]. Do NOT build anything yet. Ask me clarifying questions first. ALWAYS. |
| 技术栈确认 | Given the project described above, ask me clarifying questions to determine the best tech stack. Do NOT write code yet. ALWAYS. |
| 代码审查 | Act as a Senior Developer. Review my code for: flaws, inefficiencies, security issues, and anything I may have missed. |
| 文档生成 | Read through my codebase and generate a comprehensive Markdown documentation file. |
| Bug 修复 | There is [具体问题] in [具体元素 ID/Class]. Can you fix it? Show me your plan before writing code. |
| 精确修改 | @ [文件名] Change [具体属性] in [具体 CSS/HTML 元素] from [当前值] to [目标值]. |
七、🔗 知识关联
本指南与以下内容关联:
- GenAI & LLM 原理完全指南 :理解 LLM 的概率本质,有助于理解为什么 Prompt 越精确、产出越好。
- AI 加速学习指南 :同样的"主动参与"理念——从学习场景迁移到编码场景。
- AI 职场效能指南 :同样的 "Junior Research Assistant" 心智模型,从工作场景迁移到代码场景。
八、📚 延伸资源
- Cursor :AI 增强代码编辑器,基于 VS Code。
- Claude Code :项目级 AI 编码代理,终端 + VS Code 扩展。
- Freesound :创意共用音效素材库,适合应用开发。
- GitHub Pages :免费静态网站托管,适合前端项目部署。
✍️ 个人反思
"We are nowhere near the dream of 'programming in English'. But it can often appear like we are. And that's the dangerous part."
AI 编码的核心危险不在于 代码写得不好 ,而在于 我们以为写得好 。
Vibe Coding 的本质不是"不用学编程"——恰恰相反,它要求你既懂编程(审查 AI 的工作),也懂管理(引导 AI 的工作方向)。我们正在从 纯编码者 转变为 编码管理者 ——管理一个极其勤奋但缺乏判断力的 AI 助手。
你的管理水平 (Prompt 质量 + Review 能力 + Git 纪律) 决定了你的产出上限。