从单文件到三个文件：让 AI 规划一个小项目

结构规划得好，加菜只改一处；但 4 轮修改里两次「说改了没改」，一次越修越糟。

单文件网页适合第一个作品，但内容一多就难改。这一篇让 AI 把一个「家庭菜谱」网站规划成三个文件：页面、样式、数据和逻辑分开。结论先说：结构规划得不错，加一道菜真的只改一处；但 4 轮修改里，它两次声称改好了却没改好，一次把能用的东西改坏了。

实测：本地 qwen2.5:3b（3B 小模型，Ollama，temperature 0，seed 42），2026-10-19 运行；输出原样贴出，未修改。　每一版代码都存成文件，在 Chrome（390px 宽）里用自动脚本打开、点击、输入测试。

01 · Why为什么要拆文件

把网页拆成 index.html（放什么）、style.css（长什么样）、app.js（数据和动作）三个文件，好处是改一样东西时只动一个文件。更关键的是让「数据」单独成一块：以后加内容只改数据，不碰页面。

02 · Brief怎么交代

背景：我想做一个「家庭菜谱」小网站，放 3 道菜（番茄炒蛋、可乐鸡翅、清炒西兰花），每道菜有食材和步骤。以后还会继续加菜。
任务：帮我规划文件结构，并写出全部代码。
要求：
1. 分成 index.html、style.css、app.js 三个文件；菜谱数据写在 app.js 里的一个数组中，页面由 JavaScript 根据数组生成，以后加菜只改数组；
2. 不引用任何外部资源；
3. 先用一句话说明每个文件负责什么，然后按文件分别给出完整代码，每个文件用单独的代码块，代码块前一行写文件名。

要求 1 是这次的重点：先说清楚「以后会怎么改」，AI 才会把结构往这个方向设计。

03 · Version 1第一版：能打开，两处不对

它先用三行说明了每个文件管什么，然后给出三段代码。结构完全照要求。存成文件打开：

1. 步骤挤成一段。代码用换行符连接步骤，但网页会把换行当空格，五个步骤连成一段。
2. 「查看菜谱」按钮点了没反应。它给按钮设了 href，但按钮没有这个功能；而且链接是它自己编的 example.com 示例网址，我们根本没要这个按钮。

04 · Payoff真正的好处：加菜只改一处

我们自己在 app.js 的数组里加了第四道菜「紫菜蛋花汤」，其他文件一个字没动。刷新：页面上变成 4 道菜，控制台没有报错。这就是让 AI「先规划结构」的价值——这一点它做对了。

05 · Round 2一次提三件事

我在浏览器里打开测试了，发现两个问题，再加一个功能：
1. 每道菜的「步骤」全挤在一段里，看不出是第几步。请改成带序号的列表，一步一行。
2. 点「查看菜谱」按钮没有任何反应。这个按钮不需要，请删掉，菜谱数据里的 url 也删掉。
3. 新功能：页面顶部加一个搜索框，输入菜名或食材（比如「鸡」），只显示匹配的菜。
请告诉我每个文件要不要改；需要改的文件给出修改后的完整代码，不需要改的写「不用改」。每个代码块前一行写文件名。

它说「index.html 不需要修改、style.css 不需要修改」，实际两个文件都改了。测试结果：

1. 搜索：能用。输入「鸡」，显示番茄炒蛋（含鸡蛋）和可乐鸡翅，结果正确。但搜索框放在了页面最下面，不是我们说的「顶部」。
2. 按钮删了，但数据里的 url 没删。
3. 步骤变成了带尖括号的文字：页面上直接显示「<li>1. 步骤1：将鸡蛋打散……</li>」，序号还重复了。

06 · Round 3修「尖括号」：越修越糟

测试后还有问题：每个步骤在页面上显示成了带尖括号的文字，例如「<li>1. 步骤1：将鸡蛋打散……</li>」，标签被原样显示出来了，而且序号重复（「1.」和「步骤1：」）。
请先用一两句话解释为什么会这样，然后只修这个问题：步骤显示为真正的有序列表，每步一行，只保留一个序号。只给出需要修改的那段代码。

### 解释
步骤显示为带尖括号的文字是因为在生成 HTML 时，JavaScript 将步骤内容直接插入到 `<li>` 标签中，导致序号和步骤内容都被显示为原始文本。为了修复这个问题，我们需要在生成 HTML 时正确地嵌套 `<li>`……

它的解释不对，给的「修复」只是把步骤文字删了：页面变成「<li>1</li><li>2</li>……」，连原来的步骤内容都没了。

07 · Round 4把改法说死：基本修好

改完后步骤文字全没了，只剩「<li>1</li><li>2</li>」这样的文字。原因是 textContent 会把标签当成普通文字显示。
请这样改：用 document.createElement('ol') 创建列表，每个步骤用 document.createElement('li')，li.textContent 设为步骤文字（去掉数据里自带的「步骤1：」这类前缀），append 到 ol 里，再把 ol 加到 recipeDiv。只给出修改后的 renderRecipes 函数。

步骤终于一行一个。但：

1. 我们要求「去掉自带的『步骤1：』前缀」，它在说明里写「已去掉」，实际没去掉，所以还是「1. 步骤1：」双重序号。
2. 一搜索，旧 bug 又回来了：搜索函数里复制了一份旧的显示代码，它只改了一处。

08 · Limits真实边界

09 · Next下一步

页面一片空白、控制台一行红字，怎么办？下一篇专门讲怎么把报错交给 AI。

这是「05 用 AI 编程工具做网页」的第 1/2 篇。实测原始记录随站点源码保存（src/runs.json）。