第 7 章

修改和迭代：让主页更像你

做项目最核心的技能不是"一次写对"，而是"写了改、改了再改"。学会跟 WorkBuddy 来回对话，把主页越改越好。

核心心态：别指望一次成型

WorkBuddy 第一次给的代码，大概 60-80 分。你的工作是通过后续对话，把它推到 90 分。这个过程完全正常，专业程序员也是这么干的。

📝

Step 1

描述需求

→

🤖

Step 2

AI 生成代码

→

👀

Step 3

打开测试

→

💬

Step 4

发现问题
继续描述修改

↻ 循环

话术	例子	适用场景
"请把 XX 改成 YY"	"请把按钮颜色从蓝色改成绿色""请把标题字号调大""请把头像从圆形改成方形"	修改现有元素
"加一个 XX 功能"	"加一个深色模式开关""加一个统计数据区域""加一个回到顶部的按钮"	新增功能
"现在的问题是 XX，请修复"	"现在手机上看按钮太小点不到，请修复""刷新后数据丢失了，请修复"	修 bug

💡 黄金法则：一次只改一件事

如果你一次提五个修改，WorkBuddy 可能漏掉两个，引入的新 bug 你不知道是哪次改动导致的。一次一个，改完试试，再改下一个。

改了三四轮之后，你可能发现越改越糟，想回到之前的版本。最简单的办法：

📁 我的主页项目 /

├── 个人主页-v1.html ← 第一版，基础功能

├── 个人主页-v2.html ← 改了头像和名字

├── 个人主页-v3.html ← 加了深色模式

└── 个人主页-v4.html ← 当前最新版

每次 WorkBuddy 给你新代码，另存为一个新文件，加个版本编号。这样随时可以回到任何历史版本。

第 1 轮 — 你："请把按钮颜色改成深蓝色，跟我的头像配色呼应"
WorkBuddy 修改 CSS 中的按钮颜色。

第 2 轮 — 你："加一个深色模式开关，点了之后整个页面颜色反转"
WorkBuddy 新增模式切换按钮和两套配色。

第 3 轮 — 你："现在的问题是切换到深色模式后，按钮上的文字看不清"
WorkBuddy 调整深色模式下按钮的对比度。

第 4 轮 — 你："请加一个回到顶部的按钮，页面滚动超过一屏后出现在右下角"
WorkBuddy 新增回到顶部按钮和滚动监听。

四轮之后，你的主页从一个基础版变成了"有定制配色、有深色模式、有回到顶部"的成熟网页。你没写一行代码——你只是在描述你想要的。

🔑 带代码追问（复杂修改时用）

如果修改比较复杂，打开 .html 文件全选复制所有代码，粘贴到 WorkBuddy 对话里，然后说"基于以上代码，请做 XX 修改，不要改动其他任何东西"。

最后那句"不要改动其他任何东西"非常重要——它能避免 AI 顺手改了不该改的地方。