---

完整的 5 步工作流

1 需求研究（Research）

明确你的目标

我想解决什么问题？这个问题真的值得解决吗？我希望做出来的东西是什么样的？

调研类似产品

去看看市面上有没有类似的产品，它们是怎么做的？有什么优点和缺点？可以搜索相关的应用或网站，看看别人的开源项目。

记录你的发现

把你的想法和调研结果记录下来，可以用一个简单的文档，比如RESEARCH.md。
举个例子，假设你想做一个记账应用。你先调研了市面上的几款记账应用，发现它们功能都太复杂了，你只需要一个简单的工具。然后你记录下自己的想法，RESEARCH.md 可能是这样的：

# 记账应用需求研究

## 目标
做一个简单易用的个人记账应用，帮助自己养成记账习惯。

## 调研发现
- 市面上的记账应用功能都太复杂了
- 我只需要快速记录收入和支出
- 最好能看到每月的统计数据

## 核心需求
1. 快速添加收支记录
2. 按日期查看记录
3. 查看月度统计
4. 数据本地存储

2 产品需求文档（PRD）

完成需求研究后，你应该对要做的东西有了清晰的认识。接下来，我们要把这些想法整理成一份正式的文档。明确要做哪些功能，不做哪些功能。

怎么写出高质量的 PRD？

先自己写一个简单的需求描述，然后让 AI 帮你扩展成完整的 PRD。
比如，你可以先写：

我要做一个记账应用，能快速记录收支，查看每月统计。
要简单易用，不要复杂的功能。

然后把这段话发给 AI 大模型，比如 Gemini 或 DeepSeek：

请帮我把这个需求扩展成完整的产品需求文档（PRD），
要包含：
1. 产品概述和目标用户
2. 详细的功能列表
3. 功能优先级（MVP 和后续版本）
4. 界面设计要求
5. 技术栈建议
6. 非功能性需求（性能、安全等）

AI 会帮你生成一份结构化的 PRD，然后你再根据自己的需求修改和完善。

PRD 应该包含什么？

一份完整的 PRD 通常包含：

产品概述（简单介绍这个产品是什么）
目标用户（谁会用这个产品）
核心功能（列出所有要做的功能）
功能优先级（哪些是必须做的，哪些是可以后续添加的）
界面设计（简单描述界面应该是什么样的）
技术栈建议
代码风格和架构模式
限制条件和边界场景

举个例子：

# 记账应用 PRD

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

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

## 核心功能

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

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

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

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

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

3 技术设计文档（Tech Design）

有了清晰的 PRD 后，我们就知道要做什么了。
下一步，就是确定用什么技术来实现这些功能，以及大致的技术架构。
创建一个 TECH_DESIGN.md 文件，包含：

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

还是以记账应用为例。根据 PRD 中的需求，你决定用 React 来做前端，因为它生态成熟、AI 支持好。数据存储用 LocalStorage 就够了，因为是个人工具，不需要后端。技术设计文档可能是这样的：

# 记账应用技术设计

## 技术栈
- 前端：React + TypeScript + Vite
- 样式：Tailwind CSS
- 数据存储：LocalStorage
- 部署：Vercel

## 项目结构

src/
  components/     # 组件
  pages/          # 页面
  hooks/          # 自定义 Hooks
  utils/          # 工具函数
  types/          # 类型定义

## 数据模型

### Transaction（交易记录）
- id: string
- amount: number
- type: 'income' | 'expense'
- category: string
- note: string
- date: string

## 关键技术点
1. 使用 LocalStorage 存储数据
2. 使用 React Hooks 管理状态
3. 使用日期库处理日期（date-fns）

如果你不熟悉技术选型，可以问 AI：“我要做一个记账应用，应该用什么技术栈？”AI 会给你推荐合适的技术。

4 AI 代理指令（AGENTS.md）

PRD 和技术设计都准备好了，现在我们要创建一个专门给 AI 看的指令文件，告诉 AI 在这个项目中应该遵循什么规则。
这个文件你可以随便取名，比如 AI_RULES.md、INSTRUCTIONS.md 等。但我推荐使用 AGENTS.md 这个名称，因为这是一个新兴的社区标准。
那 AGENTS.md 应该包含什么内容呢？
一般包含项目概述、开发规范、测试要求、代码风格、注意事项等。
继续用记账应用来举例。根据前面的 PRD 和技术设计，你可以创建这样一个 AGENTS.md 文件：

# 记账应用 AI 开发指令

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

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

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

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

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

5 实现和迭代（Build）

前面 4 步都是准备工作，现在终于可以开始写代码了！但不是一口气写完，而是小步迭代。

分步迭代策略

对于复杂的项目，想一步到位是不现实的。我推荐采用 3 步走的策略：

1、生成基础框架

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

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

2、逐步实现核心功能

框架搭好后，就可以开始实现具体功能了。这一步的关键是 先跑通核心业务流程、实现核心功能，而不是一开始就追求完美。建议把项目拆分成多个小功能，一个一个来实现。
比如记账应用可以这样拆分：

实现数据模型和存储
实现添加记录功能
实现记录列表显示
实现删除功能
实现月度统计

对于每个功能，你可以这样和 AI 对话：

我要实现添加记录功能，请根据 PRD.md 和 TECH_DESIGN.md 中的要求，
创建一个 AddTransaction 组件，包含表单输入和提交功能。

每完成一个功能，就测试一下：功能是否正常工作？有没有 Bug？界面是否符合预期？如果有问题，就继续和 AI 对话，让它修改。

3、优化实现细节

核心功能都实现后，就可以打磨细节了。在 保证不影响功能的前提下，优化性能、改进用户体验、美化界面等。
打磨完细节后，你的 MVP 最小可行产品就完成了。之后就可以根据用户反馈和自己的想法，扩展更多功能了。
另外，跑通核心功能后，强烈建议用 Git 来管理代码。每完成一个功能就提交一次，这样即使后面出问题，也能快速回退。