实战：Todo App - Vibe Coding | JR Academy

实战：用 Vibe Coding 完成 Todo App

前面学的 prompt、拆 task、validation 闭环，如果不落到一个完整 project 里，很容易停留在“看懂了，但不会用”。这章用一个小而完整的 Todo App，把 Vibe Coding 的节奏跑一遍。

目标不是做出花哨 demo，而是练会一套可复用的 workflow。

Project 范围

这次只做一个可交付的 MVP：

• 添加、完成、删除 Todo
• 按状态过滤：全部 / 未完成 / 已完成
• 本地 persistence localStorage
• 基本可用的 empty state 和 error 提示
• 基本无障碍：按钮可读、键盘可操作

这个范围有两个好处：

• 足够小，能在一两个小时内完成
• 足够完整，包含 state、interaction、storage、validation

为什么这个 project 适合练 Vibe Coding

Todo App 看起来简单，但非常适合练下面几类能力：

• 让 AI 生成初始 scaffold
• 逐步追加 interaction logic
• 在 multi-file 间改 type、component、style
• 用 error 驱动下一轮提问
• 最后补 test 和验收

如果你连 Todo App 都跑不顺，直接上复杂 full-stack project 通常只会更乱。

建议 Tech Stack

tech stack 不是重点。重点是你怎么指挥 AI 分步骤推进。

第 1 步：先让 AI 出 plan，不要直接开写

你可以先下这样的任务：

请在 React + TypeScript project 里实现一个 Todo App。
先不要写代码，先输出 implementation plan。

要求：
- 只包含 MVP 范围
- 说明需要修改哪些 file
- 说明每一步完成后如何验证

这一步的价值是把“模糊需求”变成“可执行 task list”。

第 2 步：先搭 data model 和 state

建议先把核心 structure 定住：

type Todo = {
	id: string;
	title: string;
	completed: boolean;
	createdAt: number;
};

然后让 AI 只做两件事：

• 定义 Todo type
• 实现增删改查的 state update logic

不要一开始就同时生成 UI、animation、persistence 和 test。那样问题一出来，你很难知道是哪一层错了。

第 3 步：逐个补核心 interaction

一个稳定的推进顺序：

1. 添加 Todo
2. 切换完成状态
3. 删除 Todo
4. filter 显示
5. empty state 提示

每做完一步，就让 AI 停下来，不要自动继续。
你先 run，再决定下一步。

第 4 步：再加 persistence

localStorage 是一个很适合练“AI 改已有代码”的点。
你可以这样约束 AI：

现在请在不改变现有 interaction logic 的前提下，
给 Todo state 加 `localStorage` persistence。

要求：
- initial load 时读取
- state 变化时写入
- 对 parse failure 做 fallback

这样比一句“帮我把功能做完整”要稳定得多。

第 5 步：补 UI 细节，但别一开始过度 design

很多人用 AI 写 project，最容易浪费时间的地方是太早追求“高级 UI”。
更好的顺序是先补这些必需项：

• input 和 button 的可用性
• empty list 提示
• 已完成 item 的视觉区分
• filter tabs 的当前态
• delete button 的可读文案

这些对“能不能交付”影响比 animation 大得多。

第 6 步：补 test 或手测 script

如果你刚开始学，可以先让 AI 生成手测 checklist：

如果你已有 testing 环境，再让 AI 写最少 3-4 条 test 即可，不要为了“显得完整”一下子堆十几条脆弱 test。

遇到问题时，怎么继续问 AI

不要只说“有 bug，帮我修”。
更有效的问法是：

我已经完成了 Todo App 的新增和删除。
现在问题是：刷新页面后数据没有保留。

相关代码：
[贴关键 snippet]

报错或现象：
[贴 log 或描述]

请先分析 root cause，再给最小修改方案。

这样的提问能明显减少 AI 乱改无关代码。

一个完整的小 project 节奏

你可以把这章的练习理解成下面这个闭环：

1. 定义 MVP
2. 让 AI 出 plan
3. 分步实现
4. 每步 validate
5. 记录问题
6. 补 test 或手测 checklist
7. 最后复盘 prompt 和 workflow

一旦你能稳定跑通这个闭环，后面换成 form system、admin dashboard、content publishing page，方法基本都通用。

建议你保留的 project log

做完后至少记三件事：

• 哪个 prompt 最有效
• 哪一步最容易引入 regression
• 下次如果重做，应该先约束什么

这类 log 比“收藏 100 条提示词”更能提升你的真实产出能力。

练习升级版

如果基础 Todo App 做完了，可以继续让 AI 帮你扩展：

• 增加 edit Todo
• 增加 due date
• 增加 batch 清理已完成
• 增加 dark mode
• 把 localStorage 替换成 backend API

升级时仍然遵守一个原则：每次只加一个 capability，不要一次 refactor 半个 project。

小结

Todo App 不是为了练“写 Todo”，而是为了练你如何把一个完整 task 拆成 AI 能稳定执行的步骤。
先把这个节奏练熟，再去做真实 project，你会少走很多弯路。

[VIBE_CODING_LAB_BANNER]