第 4 章：实战 —— 从 0 到 1 开发个人工具
章节定位：本章是 Vibe Coding 的核心实践章节，将前三章学到的思维和技法真正落地，手把手带你完成第一个完整的 AI 编程项目。
从"纸上谈兵"到"真刀真枪"
在前三章，我们完成了重要的准备工作：
| 章节 | 你学到了什么 | 比喻 |
|---|---|---|
| 第一章 觉醒 | 理解 Vibe Coding 是什么 | 认识新世界 |
| 第二章 心法 | 用产品经理思维想清楚要做什么 | 写好剧本 |
| 第三章 技法 | 用结构化方法与 AI 高效沟通 | 学会导演的语言 |
| 第四章 实战 | 真正动手做出一个产品 | 开拍！ |
本章，我们要把前面学的全部用起来——做一个真正能用的东西。
不是看别人做，不是想象着做，而是你自己亲手做出来。
为什么选择「待办清单」作为第一个项目
你可能会问：为什么不做个更酷炫的东西？比如 AI 聊天机器人、图片生成器？
我们选择「个人待办清单」，有三个重要原因：
1. 包含完整的 CRUD 操作
| 操作 | 英文 | 在待办清单中的体现 |
|---|---|---|
| 创建 | Create | 添加新任务 |
| 读取 | Read | 显示任务列表 |
| 更新 | Update | 标记任务完成 |
| 删除 | Delete | 删除任务 |
这四个操作是几乎所有应用的基础。学会了这个，做其他项目就是换个皮。
2. 与第二章案例无缝衔接
还记得第二章的小李吗？他想做一个待办清单来管理自己的任务。我们在第二章帮他做了：
- 灵魂三问分析
- 用户画像
- MVP 功能定义
- 简易 PRD
现在，我们要把小李的想法真正做出来。
3. 做完真的能用
这不是一个"练习项目"——做完后，你真的可以用它来管理自己的待办事项。刷新页面数据还在，手机上也能打开。这种"我做的东西真的能用"的成就感，是学习编程最大的动力。
本章如何整合前几章内容
| 来自章节 | 你将用到 | 用在哪里 |
|---|---|---|
| 第二章 心法 | 小李的PRD、灵魂三问、MVP定义 | 4.1 明确要做什么 |
| 第三章 技法 | S.C.A.F.F.框架、迭代对话技巧 | 4.2-4.4 写Prompt、调整优化 |
本章是前两章的"实战演练场"——第二章教你想清楚，第三章教你说明白，本章让你真正做出来。
本章学习目标
完成本章学习后，你将：
- ✅ 独立完成一个包含增删改查功能的完整网页应用
- ✅ 掌握从想法到产品的完整工作流程
- ✅ 学会使用 AI IDE 进行开发
- ✅ 能够在 AI 代码出错时进行调试和修复
- ✅ 理解数据存储的基本概念（localStorage）
- ✅ 拥有一个可以展示给朋友的真实作品
本章结构预览
4.1 开始之前 → 整合准备工作，选择工具
4.2 第一轮：搭建页面 → 先把"脸"做出来
4.3 第二轮：实现功能 → 让它能响应操作
4.4 第三轮：数据存储 → 让它记住你的数据
4.5 Debug 实战 → 当 AI 代码报错时怎么办
4.6 收尾与回顾 → 完整项目展示与经验总结预计时间
| 章节 | 预计时间 | 难度 |
|---|---|---|
| 4.1 开始之前 | 15 分钟 | ⭐ |
| 4.2 搭建页面 | 20 分钟 | ⭐ |
| 4.3 实现功能 | 30 分钟 | ⭐⭐ |
| 4.4 数据存储 | 20 分钟 | ⭐⭐ |
| 4.5 Debug 实战 | 20 分钟 | ⭐⭐ |
| 4.6 收尾回顾 | 15 分钟 | ⭐ |
| 总计 | 约 2 小时 |
💡 建议
可以一口气做完，也可以分成 2-3 次。每完成一轮都有阶段性成果，随时可以暂停。
准备好了吗？
让我们开始动手做东西！
→ 4.1 开始之前