# 🎯 实战案例：30 分钟做一个 Todo App
> 难度：⭐ 入门 | 技术栈：HTML/CSS/JS | 耗时：30 分钟
---
## 最终效果
一个简洁的待办事项应用，支持：
- ✅ 添加任务
- ✅ 完成/取消完成
- ✅ 删除任务
- ✅ 本地存储（刷新不丢失）
---
## 第 1 步：启动对话
复制以下提示词，粘贴到 [Claude](https://claude.ai/) 或 [ChatGPT](https://chatgpt.com/)：
```
你是一个专业的前端开发助手。我想用 Vibe Coding 的方式做一个 Todo App。
项目要求：
- 纯 HTML/CSS/JS，不用任何框架
- 单文件实现（一个 index.html）
- 功能：添加任务、完成任务、删除任务
- 数据存到 localStorage，刷新不丢失
- 界面简洁美观，有动画效果
请直接给我完整代码，我复制到 index.html 就能运行。
```
---
## 第 2 步：获取代码
AI 会给你一个完整的 `index.html` 文件，大约 150-200 行代码。
**示例代码结构**：
```html
Todo App
```
---
## 第 3 步：运行测试
1. 新建文件 `index.html`
2. 粘贴 AI 给的代码
3. 双击打开，或用 VS Code Live Server
---
## 第 4 步：迭代优化
不满意？继续对话：
```
请帮我优化：
1. 添加深色模式切换
2. 任务支持拖拽排序
3. 添加任务分类功能
```
---
## 踩坑记录
| 问题 | 解决方案 |
|:---|:---|
| localStorage 报错 | 用浏览器打开，不要直接双击 file:// |
| 样式不生效 | 检查 CSS 是否在 `