修改和优化

这节课你会...

学会 Vibe Coding 最核心的工作节奏：迭代。第一版永远不完美，完美来自一遍遍的打磨。

---

五个版本的故事

一个学习者做了一个待办清单。来看看它怎么一步步变好的：

v1：输入框 + 添加按钮 + 任务列表。能添任务，但刷新就没了。

v2：加了 localStorage，刷新数据还在。但完成的任务没法标记。

v3：点击任务加删除线、变灰色。但不能删任务。

v4：加了删除按钮。但所有任务混在一起，已完成的也在列表里。

v5：加了筛选按钮——全部 / 进行中 / 已完成。清爽了。

每个版本只比上一个多一个功能。每一步只需要改 20-50 行代码。他从 v1 到 v5 用了不到一小时。

---

迭代时必做的三件事

1. 每次只改一样

不说"把样式改好看一点、再加个搜索框、顺便把数据存到本地"。拆成三条，一条一条发给 AI。

2. 改完就看效果

别攒着。每改完一次，刷新浏览器确认正常。出了问题你立刻知道是哪次改动引起的。

3. 保存每个版本

文件名用版本号：todo-v1.html, todo-v2.html, todo-v3.html。改坏了不需要撤回，直接回到上个版本。

---

常见的修改指令

样式类："把标题从 24px 改成 32px，颜色从黑色改成深蓝色 #1e3a5f" 功能类："加一个搜索框，输入关键字后筛选列表" 结构类："把左右布局改成上下布局，卡片最大宽度 600px 居中" 修复类："删除按钮点第二次会报错，帮我看下哪里有问题"