---
title: "第 4 章：实战 —— 从 0 到 1 开发个人工具"
---


![04-practice-0-to-1_index.png](/images/Basic/04-practice-0-to-1_index.png)
# 第 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 小时** | |

::: tip 💡 建议
可以一口气做完，也可以分成 2-3 次。每完成一轮都有阶段性成果，随时可以暂停。
:::

## 准备好了吗？

让我们开始动手做东西！

→ [4.1 开始之前](./4.1-before-start/)