这里写自定义目录标题完整的 5 步工作流1 需求研究Research明确你的目标调研类似产品记录你的发现2 产品需求文档PRD怎么写出高质量的 PRDPRD 应该包含什么3 技术设计文档Tech Design4 AI 代理指令AGENTS.md5 实现和迭代Build分步迭代策略1、生成基础框架2、逐步实现核心功能3、优化实现细节完整的 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.mdPRD 和技术设计都准备好了现在我们要创建一个专门给 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 来管理代码。每完成一个功能就提交一次这样即使后面出问题也能快速回退。