第6课：给小工具加历史记录

本课目标

前 5 课都在做准备：

• 第 1 课：知道项目是一个文件夹。
• 第 2 课：知道终端怎样运行项目。
• 第 3 课：看懂 package.json 和启动命令。
• 第 4 课：能把项目跑不起来的问题交给 AI 排查。
• 第 5 课：理解保存数据不是页面显示，而是刷新后还能找回来。

第 6 课开始真正升级第一册小工具。

本课只做一个功能：

给小工具加历史记录。

本课不是重新做项目。

本课不是加登录、会员、云数据库、部署或复杂后台。

本课的目标非常明确：

每次生成结果后，可以保存一条历史记录。
刷新页面后，历史记录还在。
可以删除不需要的记录。

开始之前

请先确认你已经准备好 4 样东西：

第一册做出的小工具。
能正常运行项目的命令。
第 5 课填写的数据保存方式选择表。
一条你准备保存的示例输入和示例输出。

如果项目现在还跑不起来，先回到第 4 课。

如果你还不知道要保存什么，先回到第 5 课。

本课不适合在项目混乱时强行开始。

一个小故事

小林已经做出了“小红书标题助手”。

它能输入产品信息，生成 5 个标题。

但是每次生成完，小林只能复制到别的地方。

只要刷新页面，刚才的标题就没了。

小林想让 AI 帮他加一个功能：

把每次生成的标题保存到历史记录里。

他一开始直接对 AI 说：

帮我加历史记录。

AI 可能会做很多事：

• 新建数据库。
• 改页面布局。
• 加登录。
• 改项目结构。
• 把原来的生成逻辑也重写。

这就太大了。

本课要训练的是另一种说法：

请先读项目，不要马上改代码。
只加历史记录。
第一版用浏览器本地保存。
不要做登录、云数据库和复杂后台。
请先告诉我准备改哪些文件。

这才是小白能控制住的 AI 协作方式。

这节课到底加什么

本课的历史记录功能，至少包含 4 个动作。

1. 保存一条记录

每次生成结果后，应该能把这次结果保存下来。

保存内容可以包括：

原始输入
生成结果
生成时间
标题或备注

第一版可以不完美。

但至少要保存“输入”和“结果”。

2. 显示历史记录列表

页面上应该有一个地方显示历史记录。

每条记录最好能看出：

什么时候生成的
输入大概是什么
结果是什么

如果结果很长，可以只显示摘要，再允许展开。

但第一版不用追求复杂交互。

3. 刷新页面后还在

这是本课最重要的验收。

你要做这个测试：

保存一条记录。
刷新页面。
看记录是否还在。

如果刷新后消失，就还没有完成。

4. 删除不需要的记录

历史记录不能只增加，不删除。

至少要支持删除单条记录。

清空全部记录可以作为可选功能。

本课明确不做什么

动手前，要把边界写清楚。

不做什么	为什么先不做
登录	会扩大项目范围
云数据库	会引入后端、账号、部署问题
多人共享	超出第二册第一版目标
会员系统和支付	和历史记录无关
部署上线	后续课程再讲
大规模重构	容易把原功能改坏
改主题风格	不是本课目标

这不是因为这些不重要。

而是因为第二册第 6 课的目标只有一个：

让第一册小工具拥有最小历史记录能力。

保存方式：第一版先用浏览器本地保存

第 5 课已经讲过，第二册第一版推荐：

浏览器本地存储。

你不需要自己写出代码。

但你要理解这个选择：

记录保存在当前浏览器里。
刷新页面后还能看到。
换电脑或换浏览器可能看不到。
清理浏览器数据后可能消失。
不适合保存敏感信息。

对第二册练习来说，这个范围正好。

因为你可以明确验收：

刷新页面后历史记录还在。

动手前检查卡

请在让 AI 改代码之前，先填写这张卡。

1. 我的工具

项目	我的记录
工具名称
它现在能做什么
启动命令
浏览器地址

2. 我要保存什么

字段	是否保存
原始输入	是 / 否
生成结果	是 / 否
生成时间	是 / 否
标题	是 / 否
备注	是 / 否
其他

项目	我的填写
必须保存的字段
以后再说的字段

3. 本课只改什么

功能	是否本课做
保存记录	做 / 不做
历史记录列表	做 / 不做
刷新后保留	做 / 不做
删除单条记录	做 / 不做
清空全部记录	可选 / 不做
登录	不做
云数据库	不做
部署	不做
重写项目	不做

4. 验收方式

问题	我的答案
我准备输入的测试内容
我期待生成的结果
保存后应该看到什么
刷新后应该看到什么
删除后应该看到什么

这张卡越清楚，AI 越容易按你的目标工作。

第一条给 Codex 的提示词：先读项目

第一条提示词不要直接让 AI 改代码。

先让它读项目、报计划。

我想给这个小工具增加历史记录功能。
请先阅读项目，不要马上改代码。

目标：
1. 每次生成结果后，可以保存一条记录；
2. 页面上能看到历史记录列表；
3. 刷新页面后记录还在；
4. 可以删除单条记录；
5. 第一版先用最简单的本地保存方式；
6. 不做登录、不做云数据库、不做部署、不重写整个项目。

请先告诉我：
1. 这个项目当前生成结果的逻辑在哪里；
2. 历史记录功能可能需要改哪些文件；
3. 每个文件为什么要改；
4. 你建议的最小实现步骤；
5. 修改完成后我应该怎样验收。

你要等 AI 回答。

不要急着让它动手。

看 AI 的计划是否合格

AI 的计划合格，应该满足这些条件：

检查项	是否通过
它知道当前项目入口在哪里
它能说出生成结果的代码在哪里
它只打算改少量相关文件
它没有突然加入登录、数据库或部署
它说明了保存方式
它说明了刷新验收

如果 AI 的计划太大，你要立刻缩小：

这个方案太大了。
请缩小范围：
1. 不做登录；
2. 不做云数据库；
3. 不改项目主题；
4. 不重写项目；
5. 只用浏览器本地保存实现历史记录。
请重新给我最小修改计划。

第二条给 Codex 的提示词：开始修改

当计划看起来合理后，再让 AI 修改。

可以开始修改。

请按你刚才的最小计划实现历史记录功能。

要求：
1. 每次生成结果后，可以保存为一条历史记录；
2. 历史记录至少包含原始输入、生成结果和时间；
3. 页面上能看到历史记录列表；
4. 刷新页面后历史记录仍然存在；
5. 可以删除单条历史记录；
6. 不做登录、不做云数据库、不做部署；
7. 不重写整个项目，只做必要修改。

修改完成后，请告诉我：
1. 你改了哪些文件；
2. 每个文件改了什么；
3. 我应该运行什么命令；
4. 我应该按什么步骤验收。

AI 修改记录表

AI 修改完成后，不要只看页面。

还要记录 AI 改了什么。

项目	我的记录
AI 修改的文件 1
它改了什么
为什么要改
AI 修改的文件 2
它改了什么
为什么要改
AI 新增的文件
它负责什么
AI 删除的文件
是否合理
我不懂的改动
我准备怎么问 AI

如果 AI 改了很多文件，学生要停下来问：

这次为了历史记录，为什么需要改这么多文件？
哪些修改是必须的？哪些可以撤回或暂时不做？

功能验收清单

请按下面步骤验收。

1. 原功能还在

检查项	结果
页面能打开
输入框还在
原来的生成按钮还在
可以生成结果
结果显示正常

如果原功能坏了，历史记录还不算完成。

2. 可以保存记录

检查项	结果
我输入了测试内容
我生成了结果
我点击了保存或触发自动保存
历史记录列表出现了

3. 刷新后还在

检查项	结果
我刷新了页面
历史记录还在
记录内容正确
时间还在

4. 可以删除单条记录

检查项	结果
我删除了一条记录
这条记录消失了
其他记录还在
刷新后删除状态仍然正确

5. 空状态合理

如果没有历史记录，页面应该有合理提示。

比如：

暂无历史记录。
生成一次结果后会出现在这里。

不要让学生看到一片奇怪空白。

课堂活动：准备一条测试记录

请先准备一条固定测试数据。

这样验收时不会混乱。

项目	我的测试
我的测试输入
我期待生成的结果大概是
保存后历史记录应该显示
刷新后我应该看到
删除后我应该看到

测试数据越固定，越容易判断功能是否真的完成。

第三条给 Codex 的提示词：验收和解释

修改后，请让 AI 帮你做一次解释。

请你帮我验收刚才的历史记录功能。

请说明：
1. 历史记录保存在哪里；
2. 每条记录包含哪些字段；
3. 为什么刷新页面后记录还能保留；
4. 删除记录时发生了什么；
5. 这个实现方式的限制是什么；
6. 如果以后要换成云数据库，需要另外做哪些事情。

请用小白能听懂的话解释。

这条提示词很重要。

它能让你从“功能能用”变成“知道自己做了什么”。

本课最低标准

你能说出：

历史记录第一版只验收：
生成结果 -> 保存记录 -> 显示历史 -> 刷新后还在 -> 可以删除。

并且你的小工具已经能保存历史记录。