第8章 实战项目：做一个属于你的个人工具
开场：从知道到做到
前七章，我们学了很多：
- 第5章：如何拆解需求
- 第6章：如何提供上下文
- 第7章：如何验证结果
现在是时候把它们组合起来，做一个完整的项目了。
你会学到什么
- 完整的项目流程
- 遇到问题时的解决方法
- 几个可参考的项目案例
第一节：项目选择
首先，选一个你想做的项目。
推荐几个适合初学者的项目：
| 项目 | 难度 | 预计时间 |
|---|---|---|
| 个人记账本 | ⭐ | 30-60 分钟 |
| 习惯打卡器 | ⭐ | 30-60 分钟 |
| 番茄钟计时器 | ⭐⭐ | 60-90 分钟 |
| 个人博客 | ⭐⭐ | 90-120 分钟 |
| 简单的任务看板 | ⭐⭐⭐ | 120-180 分钟 |
选择建议：
- 完全零基础 → 记账本或习惯打卡器
- 有一点感觉 → 番茄钟计时器
- 想挑战一下 → 任务看板
第二节：完整流程示范
让我们以"个人记账本"为例，走一遍完整流程。
步骤 1：需求拆解（第5章）
用用户故事 + GRIP 框架：
用户故事：
作为 [自由职业者]
我想要 [追踪每月的收入和支出]
为了 [了解财务状况，做好税务准备]
GRIP：
G：做一个简单的记账本
R：自由职业者，不太懂财务
I：
- 收入：金额、来源、日期
- 支出：金额、类别、日期
P：
- 显示余额
- 列出所有记录
- 按月份筛选
- 数据存储在本地
步骤 2：准备上下文（第6章）
创建 CLAUDE.md：
# 个人记账本
## 项目概述
帮助自由职业者追踪收入和支出的简单工具。
## 技术栈
- React + Vite
- Tailwind CSS
- localStorage 数据存储
## 功能需求
1. 添加收入/支出记录
2. 显示当前余额
3. 列出所有记录
4. 按月份筛选
## 设计规范
- 收入：绿色 (#10B981)
- 支出：红色 (#EF4444)
- 简洁布局
## 约束
- 单用户，不需要登录
- 数据存储在浏览器本地
步骤 3：让 AI 生成
打开 bolt.new（或你选的工具），输入：
根据 CLAUDE.md 的说明，生成一个记账本。
实现添加收入/支出、显示余额、列出记录的功能。
数据用 localStorage 存储。
步骤 4：验证（第7章）
第一层：看
- 能添加记录吗？
- 余额计算正确吗？
- 收入绿色、支出红色吗？
第二层：问
"解释一下你是怎么存储数据的"
"localStorage 有存储限制吗？数据多了会怎样？"
第三层：测（可选）
"写一些测试用例，验证余额计算是否正确"
步骤 5：迭代完善
根据测试结果和使用感受，继续改进：
"添加一个清空所有数据的功能"
"添加一个简单的统计图表"
"支持导出为 CSV"
第三节：过程中遇到问题怎么办？
实际做项目时，你一定会遇到问题。这是正常的。
问题 1：AI 生成的东西不对
原因：可能是你的描述不够清晰
解决：
- 不要急着说"不对"
- 先让 AI 解释它理解了什么
- 指出具体的差距
- 给它参考（比如"类似某某网站的样式"）
问题 2：AI 改来改去都不满意
原因：可能你自己的需求还不清楚
解决：
- 暂停，先别让 AI 改
- 找几个类似的网站/应用，截图保存
- 把截图给 AI："我想要这样的效果"
- 分步骤来，不要一次要求太多改动
问题 3：AI 生成一半不动了
原因：可能是工具的问题，或者是请求太复杂
解决：
- 刷新页面重试
- 把复杂需求拆成简单几步
- 换个工具试试
问题 4：代码报错了
原因：可能是环境问题，也可能是 AI 的问题
解决：
- 把报错信息复制给 AI
- AI 会解释原因并修复
- 如果还是不行，让 AI 用更简单的方式实现
第四节：几个完成的项目参考
项目 1：习惯打卡器
功能：
- 添加习惯（如"每天喝水8杯"）
- 每天打卡
- 查看连续打卡天数
- 简单的统计图表
技术栈：bolt.new + React + localStorage
[图 8-1] 习惯打卡器效果
📁 文件：
resources/images/screenshots/ch08-01-habit-tracker.png
项目 2：番茄钟计时器
功能：
- 25 分钟计时
- 5 分钟休息
- 开始/暂停/重置
- 计时结束时播放提示音
- 显示今日完成的番茄数
技术栈：bolt.new + JavaScript
[图 8-2] 番茄钟效果
📁 文件：
resources/images/screenshots/ch08-02-pomodoro.png
项目 3：个人博客
功能：
- 首页显示文章列表
- 点击查看文章详情
- Markdown 渲染
- 简单的评论功能
技术栈：Next.js + Markdown + Tailwind CSS
[图 8-3] 个人博客效果
📁 文件：
resources/images/screenshots/ch08-03-blog.png
第五节：完成后的下一步
你完成了第一个项目。恭喜！
接下来做什么？
1. 给自己一个奖励
第一个项目完成是值得庆祝的里程碑。
2. 分享给别人
让朋友试用你的项目。收集反馈。
3. 记录你学到了什么
- 哪些描述方式 AI 听得懂？
- 哪些方式不行？
- 遇到问题时怎么解决的？
这些经验会让你下一次更高效。
4. 开始下一个项目
选择一个稍微复杂一点的项目，继续练习。
动手实验室
📁 完整项目代码：
labs/chapter08-project/
在这个目录里，我为你准备了：
- 记账本完整代码
- 习惯打卡器完整代码
- 番茄钟完整代码
你可以：
- 直接运行体验
- 查看代码学习
- 作为起点修改
小结
基础篇结束了。
这四章，我们学习了 AI 编程的三个核心底层能力：
| 能力 | 章节 | 要点 |
|---|---|---|
| 需求拆解 | 第5章 | 用户故事 + GRIP 框架 |
| 上下文工程 | 第6章 | CLAUDE.md / .cursorrules |
| 验证 | 第7章 | 看 → 问 → 测 |
这一章，我们把这三个能力组合起来，做了一个完整的项目。
记住：
第一个项目不要求完美。 重要的是你走完了整个流程。 做完了，你就懂了。
接下来的进阶篇，我们会学习更高级的方法：规格驱动开发、给 AI 装技能包、多 Agent 协作。
这些方法会让你的 AI 编程能力上一个台阶。
本章字数：约 9,000 字 / 目标 9,000 字 完成度：100% ✅
基础篇完成
📊 基础篇统计
| 章节 | 标题 | 字数 |
|---|---|---|
| 第5章 | 像产品经理一样思考 | 9,100 |
| 第6章 | 上下文工程 | 9,200 |
| 第7章 | 验证 | 8,100 |
| 第8章 | 实战项目 | 9,000 |
| 总计 | 35,400 |