修改和优化

这节课你会...

学会 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。改坏了不需要撤回，直接回到上个版本。这是最简单的"版本控制"——专业程序员用 Git 做的也是同一件事。

---

常见修改指令速查

跟 AI 沟通时，用这些具体的词能提高效率：

样式类：

• "把标题从 24px 改成 32px，颜色从黑色改成深蓝色 #1e3a5f"
• "卡片加圆角 12px 和阴影，hover 时微微上浮"
• "移动端（屏幕宽度 < 768px）时，两列变一列"

功能类：

• "加一个搜索框，输入关键字后实时筛选列表"
• "点击按钮时加一个 0.3 秒的缩放动画"
• "数据存到 localStorage，刷新页面后恢复"

修复类：

• "删除按钮点第二次时报错：Uncaught TypeError，这是控制台的报错信息"
• "在 Safari 浏览器里布局错位了，帮我检查一下兼容性"

结构类：

• "把左右布局改成上下布局，卡片最大宽度 600px 居中"
• "把重复的样式代码提取成一个 CSS class"

---

练习：迭代你的第一个网页

打开第 3-1 课你创建的那个网页，做以下练习：

1. 先复制一份 v1.html → v2.html
2. 告诉 AI 你想改的三个地方（每次只改一个）
3. 每改完一次，保存为新版本（v3, v4...）
4. 对比 v1 和最终版本，感受迭代的力量

你会发现：v1 到 v5，你其实没写一行代码，但作品的质量翻了不止五倍。这就是 Vibe Coding 的力量——你的审美和判断力在驱动一切。