开发流程
学习目标：掌握 AI 辅助开发的完整工作流
预计时间：60-90 分钟
难度：⭐⭐⭐
AI 辅助开发的正确姿势
很多人用 AI 写代码的方式是：遇到问题 → 问 AI → 复制答案 → 继续写 → 遇到问题...
这样效率很低。
更好的方式是把 AI 融入整个开发流程，而不是当成一个问答机器人。
第一步：需求拆解
拿到需求后，先别急着写代码。让 AI 帮你拆解。
示例对话：
我要做一个"阅读进度追踪"的 Chrome 插件，功能是：
- 记录用户在每个网页的阅读位置
- 下次打开同一个网页时，自动滚动到上次的位置
- 可以查看阅读历史
请帮我拆解一下这个需求，列出需要实现的功能点和技术方案。AI 会帮你列出：
- 需要哪些文件
- 用什么 API
- 数据怎么存储
- 可能遇到的问题
这一步很重要。它帮你理清思路，也让 AI 理解你要做什么。
第二步：搭建项目骨架
让 AI 生成项目的基础结构。
Cursor Agent 模式的用法：
基于刚才的需求拆解，请创建项目的基础结构：
1. 创建所有需要的文件
2. 写好 manifest.json
3. 每个文件先写好框架代码和注释，具体实现先留空
4. 确保项目能正常加载到 Chrome 里（虽然功能还没实现）这样做的好处：
- 先有一个能跑的空壳
- AI 后续改代码时有上下文
- 你能看到整体结构，心里有数
第三步：逐个实现功能
一个功能一个功能地做，别想一口吃成胖子。
错误示范：
把所有功能都实现了正确示范：
先实现第一个功能：记录阅读位置
具体要求：
- 用户滚动页面时，每隔 2 秒保存一次当前位置
- 位置信息保存到 chrome.storage.local
- key 用页面的 URL（去掉 query 参数）
- value 包含：滚动位置、页面标题、保存时间实现完一个，测试通过，再做下一个。
第四步：测试和调试
AI 生成的代码经常有 bug。别慌，这很正常。
调试流程：
- 运行代码，看报错信息
- 把报错信息完整复制给 AI
- 让 AI 分析原因并修复
示例：
运行后报错：
Uncaught TypeError: Cannot read properties of undefined (reading 'scrollY')
at content.js:15:28
这是 content.js 的相关代码：
[粘贴代码]
请分析原因并修复。常见问题类型：
| 问题 | 原因 | 解决方法 |
|---|---|---|
| 变量未定义 | AI 忘了声明或导入 | 让 AI 检查依赖 |
| 类型错误 | AI 搞混了数据类型 | 给 AI 看具体的数据结构 |
| 异步问题 | AI 没处理好 Promise | 让 AI 加 async/await |
| API 不存在 | AI 用了过时的 API | 告诉 AI 正确的 API 版本 |
第五步：代码审查
功能做完后，让 AI 帮你审查代码。
请审查一下这个项目的代码，检查：
1. 有没有明显的 bug
2. 有没有安全问题
3. 有没有性能问题
4. 代码风格是否一致AI 会指出问题，你决定要不要改。
注意
AI 的审查不能替代人工审查。特别是安全相关的代码，最好自己再看一遍。
第六步：优化和重构
项目能跑了，但代码可能很乱。这时候可以让 AI 帮你整理。
这个项目的代码有点乱，请帮我重构：
1. 把重复的代码提取成函数
2. 把相关的功能放到一起
3. 添加必要的注释
4. 保持功能不变Claude Code 特别适合这个场景，因为它能看到整个项目，一次性改多个文件。
工作流速查
需求 → 拆解 → 骨架 → 实现 → 测试 → 审查 → 优化
↑ ↓
└──────── 发现新需求 ←─────────┘每一步都可以让 AI 参与，但你要把控方向。
提示词模板
这些模板可以直接用，根据情况修改。
需求拆解：
我要做 [项目描述]，功能包括：
- [功能1]
- [功能2]
- [功能3]
请帮我：
1. 拆解成具体的任务列表
2. 建议技术方案
3. 指出可能的难点创建项目：
基于以下需求创建项目：
[需求描述]
技术栈：[框架/语言]
请创建完整的项目结构，包括所有必要的配置文件。实现功能：
在 [文件名] 中实现 [功能名]：
- 输入：[描述]
- 输出：[描述]
- 约束：[描述]
相关的代码上下文：
[粘贴相关代码]调试问题：
运行 [操作] 时报错：
[错误信息]
相关代码：
[代码]
请分析原因并给出修复方案。本章小结
- AI 辅助开发是一个流程，不是问答
- 先拆解需求，再写代码
- 一个功能一个功能地做
- 出了 bug 把完整信息给 AI
- 功能完成后让 AI 帮你审查和优化