vibe codeing 开发流程

为什么需要开发流程

五步工作流

需求研究

产品需求文档(PRD)

怎么写出高质量的PRD
一份完整的PRD通常包含：
- 产品概述(简单介绍这个产品是什么)
- 目标用户(谁会用这个产品)
- 核心功能(列出所有要做的功能)
- 功能优先级(哪些是必须做的,哪些是可以后续添加的)
- 界面设计(简单描述界面应该是什么样的)
- 技术栈建议
- 代码风格和架构模式
- 限制条件和边界场景

例如：

markdown 复制代码

# 记账应用 PRD

## 产品概述
一个简单的个人记账应用，帮助用户快速记录日常收支。

## 目标用户
需要记账但不想用复杂应用的个人用户。

## 核心功能

### 必须做（MVP）
1. 添加收支记录
   - 输入金额
   - 选择类型（收入/支出）
   - 选择分类（餐饮、交通、工资等）
   - 添加备注（可选）
   - 选择日期

2. 查看记录列表
   - 按日期倒序显示
   - 显示金额、类型、分类、备注
   - 可以删除记录

3. 月度统计
   - 显示当月总收入
   - 显示当月总支出
   - 显示当月结余

### 后续可以做
- 数据导出
- 图表展示
- 预算设置
- 多账户管理

## 界面设计
- 首页：显示记录列表和添加按钮
- 添加页面：表单输入
- 统计页面：展示月度数据

技术设计文档(Tech Design)

确定用什么技术来实现这些功能，以及大致的技术架构。如果不熟悉技术选型，可以问AI：我要做一个***系统，应该用什么技术栈。

创建一个TECH_DESIGN.md文件，包含：

技术栈选择(前端用什么、后端用什么、数据库用什么)
项目结构(代码怎么组织)
数据模型(需要存储哪些数据)
关键技术点(有哪些技术难点需要注意)

AI代理指令（AGENTS.md）

PRD和技术文档都准备好了，接下来要创建一个专门给AI看的指令文件，告诉AI在这个项目中应该遵循什么规则，这个文件建议命名成AGENTS.md。

那么这个文件应该包含哪些内容呢？一般包含项目概述、开发规范、测试要求、代码风格、注意事项等等，例如

markdown 复制代码

# 记账应用 AI 开发指令

## 项目概述
这是一个简单的个人记账应用，使用 React + TypeScript 开发。

## 开发规范
- 使用 TypeScript，确保类型安全
- 组件使用函数式组件 + Hooks
- 使用 Tailwind CSS 编写样式
- 所有数据存储在 LocalStorage

## 代码风格
- 使用 ESLint 和 Prettier
- 组件名使用 PascalCase
- 函数名使用 camelCase
- 常量使用 UPPER_SNAKE_CASE

## 测试要求
- 每个功能完成后手动测试
- 确保数据正确存储和读取
- 测试各种边界情况

## 注意事项
- 保持代码简洁，避免过度设计
- 优先实现核心功能
- 确保移动端适配

实现和迭代

前四部准备完成后，终于可以开始写代码了，注意不是一口气写完，而是小步迭代。

分步迭代优化

1.生成基础框架

先让AI生成基础项目框架，暂时不用管功能好不好用，确保能够运行项目即可。(Tech Design)

text 复制代码

请根据 PRD.md、TECH_DESIGN.md 和 AGENTS.md 的要求，
初始化项目并创建基本的项目结构，包括：
1. 安装必要的依赖
2. 创建目录结构
3. 配置开发环境
4. 创建基础的路由和页面框架
确保项目能够正常启动。

也可以使用脚手架或者项目模板，使用这些工具，几分钟就能搭好基础框架，不需要从零开始。

2.逐步实现核心功能

这一步的逻辑是先跑通核心业务流程、实现核心功能，而不是一开始就追求完美。建议把项目拆分成多个小功能，一个一个来实现。

3.优化实现细节

核心功能都实现后，就可以打磨细节了。在 保证不影响功能 的前提下，优化性能、改进用户体验、美化界面等。

另外，核心功能跑通之后，强烈建议用Git来管理代码，每完成一次就提交一次，这样即使后面出问题，也能快速回退。

避免AI失控的关键技巧

在实际开发中，可能会遇到这些问题：

AI输出的内容驴头不对马嘴
成了一个新功能后原来的功能不能用了
改了一个bUG又来了3个Bug

1.项目模块化

由于AI的上下文是有限的，随着项目信息量不断增大，它可能忘记之前的信息，导致生成的代码错误，所以我们要把项目的功能尽可能隔离开，把一个项目分割成多个小模块。

2.限定修改范围

AI生成的代码没有那么可控，经常改A功能的同事把B功能也顺带改了，这个问题很好解决，只要在提示词中限定修改范围即可，例如：

text 复制代码

仅修改 components/AddTransaction.tsx 文件：
1. 添加表单验证功能
2. 保持现有的样式和布局
3. 不要改动其他文件

3.抽象和复用

假如我们要让AI生成2个布局一模一样的页面，它有时会很死板，生成完页面之后，复制一遍页面A的代码来生成页面B，这样非常不利于大项目的维护，以后AI改了页面A，说不定页面B就忘了改了，所以我们要主动告诉AI：

text 复制代码

请帮我抽象这个页面为可复用的组件，
让其他页面可以通过传入不同的参数来使用。

4.版本控制

强烈建议使用Git版本控制工具，每正确生成一个功能后都提交一次版本，防止代码丢失。

5.人工控制

AI有时会因为缺少关键上下文信息、或者自身能力的不足而陷入循环，比如改来改去总是出现同样的错误，或者一直在做无用功，这时就要人工介入了。

可以尝试手动指定上下文、更换promt换个角度描述问题、清空对话历史重新开始，甚至手动修改部分代码给AI一个正确的方向。

...

6.多元AI协作

不用AI大模型擅长不同任务，如果单一大模型无法正常完成工作，可以利用其他大模型生成"教AI做事的方法和指令"。

比如，在Cursor中使用GPT生成代码有问题，就可以：

把代码和错误信息赋值给Claude或Gemini
让他分析问题并给出修改建议
把修改建议再告诉GPT，让他修改代码