最近密集用 Vibe Coding 做了几个项目，把跑通的流程整理出来。核心思路一句话：人定方向，AI 干活，人验收。
总览
本文系统梳理了使用 Vibe Coding（以 CodeBuddy 为例）进行项目开发的七步标准化流程：从需求调研、HTML原型验证、设计方案、详细设计、后端接口、前端开发到联调测试。核心原则是"人定方向，AI 干活，人验收"，通过结构化提示词和分步迭代，将 AI 作为高效执行工具，由人类把控关键决策与质量验收。文中还总结了七条实战经验，强调提示词质量、分步执行、保存中间产物、人工审核、明确边界、范例驱动开发以及联调时提供完整上下文的重要性，旨在实现开发效率的倍数提升。
| 步骤 | 干什么 | 谁主导 | 产出 |
|---|---|---|---|
| 1 | 需求调研 | 人 | 需求文档 |
| 2 | HTML 原型验证 | CodeBuddy 生成，人确认 | 可交互页面 |
| 3 | 设计方案 | CodeBuddy 生成，人审核 | 架构方案 |
| 4 | 详细设计 | CodeBuddy 生成，人审核 | 设计文档 |
| 5 | 后端接口 | CodeBuddy 生成，人审核 | 接口文档 + 代码 |
| 6 | 前端开发 | CodeBuddy 生成，人审核 | 前端代码 |
| 7 | 联调测试 | CodeBuddy 自主执行，人验收 | 可运行系统 |
1. 需求调研
干什么： 把客户嘴里模糊的想法，变成 AI 能理解的精确描述。
怎么做：
- 痛点：客户到底哪里不爽，一句话说清
- 需求：拆成功能点，每条写成"谁 → 做什么 → 为了什么"
- 边界：明确写"不做什么"，这步最容易被忽略，但最关键
- 关键点：哪些地方有性能要求、安全要求、兼容要求，标出来
注意： 这步别用 AI。需求判断是人的活，AI 只能帮你整理格式。
2. HTML 原型
干什么： 5 分钟出一个能点的页面，拿给客户看，比画 Figma 快 10 倍。
怎么做：
- 把 1 的需求整理成提示词，丢给 CodeBuddy
- 让它输出单文件 HTML（含 CSS + JS）
- 拿给客户看，客户说哪不对，改提示词重新生成
- 来回 3~5 轮，基本就定了
注意： 最终确认的 HTML 页面要存好，后面前端开发直接对着它做。
3. 设计方案
干什么： 让 CodeBuddy 当架构师，出整体方案，人来挑毛病。
怎么做：
- 输入：1 的需求 + 2 的页面结构
- 让 CodeBuddy 输出：模块划分、业务流程、数据模型、技术选型
- 你逐条审：拆得对不对？扩展性够不够？有没有漏？
- 不满意就追问，让它改，通常 3~4 轮收敛
注意： 别一次性接受方案。把 CodeBuddy 当一个聪明但不懂你业务的架构师，你得用业务判断去校准它。
4. 详细设计文档
干什么： 把方案变成施工图，后面写代码全靠它。
怎么做：
- 告诉 CodeBuddy 技术栈（比如 Spring Boot + Vue3 + MySQL）
- 让它输出：表结构、模块内部设计、核心逻辑伪代码、异常处理、安全方案
- 分模块生成，别一次性出全文，质量会差很多
注意： 这份文档是后面所有步骤的唯一依据，多花 30 分钟打磨这里，后面省好几小时。
5. 后端接口
干什么： 先定接口契约，再写代码。前后端能并行干活。
怎么做：
- 输入：详细设计文档
- 让 CodeBuddy 输出每个接口的：路径、方法、入参、出参、业务规则、JSON 示例
- 人工过一遍：粒度够不够细，字段有没有漏
- 确认后再让 CodeBuddy 生成后端代码
在现有项目中加功能时：
找一个目录结构清晰、接口命名规范、代码结构合理的现有菜单模块，把它的代码目录整个丢给 CodeBuddy，告诉它："参考这个模块的风格和结构，生成新功能。"CodeBuddy 会模仿已有的命名规范、分层方式、异常处理模式来写，准确率比从零生成高很多。
注意： 一定要让 CodeBuddy 给完整的 JSON 示例，光有字段表格不够。示例才是前后端沟通的语言。
6. 前端开发
干什么： 把 2 的 HTML 原型变成工程代码。
怎么做：
- 输入：HTML 原型 + 接口文档
- 让 CodeBuddy 拆组件、接接口、加状态管理、补交互细节（loading、空态、报错提示）
- 一个页面一个页面来，别贪多
在现有项目中加功能时：
同样找一个页面样式美观、组件拆分合理的现有菜单页面，把它的前端代码目录给到 CodeBuddy，让它模仿这个页面的组件结构、样式写法、路由注册方式来生成新页面。这样出来的代码风格和项目一致，不用你手动对齐。
注意： 做完对着 2 的 HTML 原型看，哪里不像改哪里，这是最直观的验收方式。
7. 联调测试
干什么： 把前后端代码和接口文档全部丢给 CodeBuddy，让它自己跑通、自己修、自己验。
怎么做：
- 输入：后端代码 + 接口文档 + 前端代码，一次性贴给 CodeBuddy
- 让它自主完成以下动作：
- 联调：对照接口文档，检查前后端字段映射、请求路径、参数格式是否一致
- 测试：生成边界用例（空值、超长、非法输入、超时），跑一遍主流程
- Bug 修复：发现报错直接定位原因并给出修复代码
- 合理性评估：检查逻辑是否有冗余、异常处理是否遗漏、命名是否规范，不合理的地方直接改掉
- 你只需要最后跑一遍，看结果对不对
注意： 这步的关键是"别插手"。把上下文给全，让 CodeBuddy 自己闭环。你只在最后做验收，发现问题再追加指令让它改。
几个踩坑后的经验
- 提示词质量决定一切。 你给 CodeBuddy 的信息越结构化，输出越能用。别写一大段话，用列表、分点、明确约束。
- 分步走，别贪大。 一次让 CodeBuddy 干一件事。生成整个系统？不现实。一个模块一个模块来。
- 中间产物必须存。 需求文档、HTML 原型、接口文档、设计文档------每一步的输出都是下一步的输入，丢了就得重来。
- 人必须审。 AI 会一本正经地写出跑不通的代码。每一步生成后，人过一遍是底线。
- 边界比功能重要。 告诉 CodeBuddy"不做什么"比告诉它"做什么"更能控制输出质量。
- 现有项目加功能，给范例比给描述管用。 与其花 10 分钟描述"我要什么风格"，不如直接丢一个写得好的模块目录让 CodeBuddy 照抄。模仿比创造靠谱。
- 联调阶段给全上下文。 后端、前端、接口文档三者同时给，CodeBuddy 才能自己发现不匹配的地方。只给一半它只能猜。
一句话总结
Vibe Coding 不是让 AI 替你想，是让 AI 替你干。你负责定方向、做判断、验结果。把这三件事做好，效率能翻几倍。