TodoMVC 改功能练习：让 AI 只改一个小功能

这次练习的目标不是贡献 PR，而是在本地或自己的 fork 里练习“让 AI 改一个小功能”。TodoMVC 适合新手，因为不同框架实现的是同一个 Todo 应用，功能边界清楚。

今天只做这个任务

在一个 TodoMVC 示例里，给“空白 Todo 输入”加一个轻量提醒。

要求：

只选择一个框架示例，例如 React、Vue、Svelte、Angular、Preact、Lit 中你最想练的一个。
只改和新增 Todo 输入有关的文件。
不修改 TodoMVC 的应用规范。
不提交 PR，不影响上游仓库。

先准备输入材料

TodoMVC 仓库链接或本地路径。
你选择的一个框架示例，例如 examples/react。
练习目标：空白输入时给用户一个轻量提醒。
当前能否运行项目。如果不知道，就写“不知道”。
不能动的范围，例如依赖版本、多个框架示例、上游 PR。

如果你没有本地项目，就先只给仓库链接和框架名，让 Codex / Claude Code 做只读分析；不要一开始就让它安装依赖。

第一步：让 AI 先定位流程

请先只读 TodoMVC 项目，不要修改文件。

仓库或本地路径：{TodoMVC 仓库路径或链接}
我选择的示例：{例如 examples/react，如果你不确定，请先帮我找一个适合新手的示例}
练习目标：给空白 Todo 输入加一个轻量提醒
我的水平：初学者

请输出：
1. 这个示例的入口文件
2. 新增 Todo 的数据从输入框到列表显示经过哪些文件
3. 哪个文件最可能处理空白输入
4. 如果只做这个提醒，最多需要改哪些文件
5. 完成后怎么验证
6. 哪些目录或文件不要动

不要安装依赖，不要运行命令，除非先说明命令作用、是否联网、是否写文件。

合格输出应该包含具体文件和流程，例如：

我会先看 examples/react 的 package.json、入口文件和 Todo 输入组件。

新增 Todo 流程大概是：
输入框事件 -> 提交处理函数 -> 校验输入 -> 更新 todos 列表 -> 页面重新渲染。

最小改动范围：
- 只改处理新增 Todo 的组件或函数
- 如需提示文案，优先放在同一组件状态里
- 不改其他框架示例
- 不改依赖和构建配置

如果 AI 只说“我会优化 Todo 应用体验”，没有文件、流程和不改范围，先不要让它写代码。

第二步：让 AI 写小改动计划

请基于刚才定位到的文件，给一个最小修改计划。先不要改代码。

计划需要包含：
1. 修改目标
2. 准备修改的文件
3. 每个文件改什么
4. 空白输入时用户会看到什么
5. 非空输入时原有行为是否保持
6. 验证步骤

约束：
- 默认只改 1-2 个文件
- 不改依赖
- 不重构组件
- 不同时改样式系统和业务逻辑
- 不改多个框架示例

第三步：确认后再改

可以按这个计划修改。修改完成后请输出：
1. 实际改过的文件
2. 每个文件改了什么
3. 如何验证空白输入提醒
4. 如何确认正常新增 Todo 没坏
5. 有没有你没有运行的验证

手动验收

即使你不运行测试，也至少做这 4 个检查：

空白输入时不会新增空 Todo。
页面出现清楚但不打扰的提醒。
输入正常内容后，Todo 仍然能新增。
删除、勾选、筛选原有功能没有被顺手改掉。

验收时可以直接记录成这样：

空白输入：通过 / 未通过
正常新增：通过 / 未通过
删除 Todo：通过 / 未通过
勾选完成：通过 / 未通过
筛选状态：通过 / 未通过
本次实际修改文件数：{数字}
是否出现无关依赖或锁文件变化：是 / 否

停止信号

看到这些情况，先停，不要继续让 AI 改：

AI 准备同时修改多个框架示例。
AI 建议换 UI 库、换状态管理或重写 Todo 应用。
AI 要求先升级依赖或格式化整个仓库。
AI 不能说明正常新增 Todo 如何验证。
AI 建议直接提交上游 PR。

新手常见错误

一次改所有框架示例。
让 AI 顺手换 UI 库。
不看原有新增 Todo 流程，直接新写一套状态管理。
改完没有确认正常新增 Todo 是否还可用。
把练习改动当成上游 PR 直接提交。

进阶练习

完成空白输入提醒后，再做第二个独立任务：

给“清除已完成”按钮加确认。
给过滤器当前状态加更明显的样式。
给新增 Todo 的输入框补一个小测试。

每次只做一个任务，不要合并成大改。

来源与日期

来源：tastejs/todomvc、TodoMVC app spec。
分享日期：2026-06-16。
复测日期：2026-06-16。