第6课：做第一个 AI 小工具
用 AI 编辑器做出第一个能打开、能输入、能点击、能输出的小工具雏形。
本课目标
第 5 课，你已经写好了给 Codex 的项目启动提示词。
第 6 课开始真正动手。
今天不是要做完整产品，也不是要你学会所有代码。
今天只做一个最小闭环：
页面能打开。
输入框能输入。
按钮能点击。
结果区有输出。第一版越小越好。
本课结束时，你要完成一个能打开、能输入、能输出的小工具雏形。
开始之前
你现在应该已经准备好了三样东西：
项目定义卡
软件积木图
项目启动提示词如果你还没有准备好，不要急着写代码。
你可以先回到第 3、4、5 课，把这三样补齐。
今天你会发现，AI 确实能帮你写很多代码，但你仍然要负责三件事：
控制第一版范围。
看懂下一步要做什么。
在浏览器里验收结果。一个小故事
阿宁准备做“周报生成助手”。
她的第一版不是完整办公系统，而是一个很小的页面：
| 页面部分 | 内容 |
|---|---|
| 标题 | 周报生成助手 |
| 输入区 | 粘贴这一周做过的事情 |
| 按钮 | 生成周报 |
| 结果区 | 显示周报草稿 |
| 复制按钮 | 复制结果 |
她对 Codex 说：
请只实现第一版的第一个页面。
不要做登录，不要做数据库，不要做历史记录。
先让我能在浏览器里打开页面、输入内容、点击按钮、看到结果。Codex 改完后，阿宁没有马上继续加功能。
她先做验收：
| 检查问题 | 是否通过 |
|---|---|
| 页面能打开吗 | |
| 输入框能输入吗 | |
| 按钮能点击吗 | |
| 结果区有没有变化 | |
| 如果输出只是占位内容，是否说明页面流程跑通 |
这就是第一版实操课的正确节奏。
今天只做最小小工具
第一个 AI 小工具只需要 5 个部分。
| 部分 | 作用 |
|---|---|
| 标题 | 让用户知道这是什么工具 |
| 输入区 | 让用户输入材料 |
| 按钮 | 触发生成或处理 |
| 结果区 | 显示工具输出 |
| 复制按钮 | 可选，方便复制结果 |
先不要做：
- 登录。
- 注册。
- 用户权限。
- 复杂数据库。
- 历史记录。
- 多人协作。
- 支付。
- 自动发布。
- 完整后台。
这些功能以后可能有用，但第一版先不要碰。
推荐第一版项目类型
最适合第一版的是“AI 生成助手”或“文本整理助手”。
因为它们反馈最快：输入一段内容，马上看到输出。
| 类型 | 输入 | 输出 |
|---|---|---|
| 周报生成助手 | 这一周做过的事情 | 周报草稿 |
| 小红书标题助手 | 产品、目标人群、卖点 | 5 个标题 |
| 聊天记录转待办 | 一段聊天记录 | 待办清单 |
| 学习计划生成助手 | 学习目标、每天可用时间、截止日期 | 每日学习计划 |
如果你的项目是记录型或提醒型，也可以做，但第一版可能更容易碰到数据保存问题。
新手第一版优先选择生成或整理类，会更快看到结果。
动手前检查
开始之前，先检查这张表。
| 检查项 | 是否准备好 |
|---|---|
| 我知道项目名称 | 是 / 否 |
| 我知道使用者是谁 | 是 / 否 |
| 我知道用户输入什么 | 是 / 否 |
| 我知道工具输出什么 | 是 / 否 |
| 我知道第一版只做什么 | 是 / 否 |
| 我知道第一版不做什么 | 是 / 否 |
| 我知道成功标准 | 是 / 否 |
| 我已经写好给 Codex 的启动提示词 | 是 / 否 |
如果有 2 个以上是“否”，先不要开始实现。
第一步：把启动提示词交给 Codex
把第 5 课整理好的提示词交给 Codex。
重点保留这几句话：
请你先不要写代码。
请先复述你理解的项目目标。
请判断第一版是否太大。
请给我最小实现计划。
每一步都要告诉我如何运行和验收。Codex 给出计划后，你先检查：
- 有没有偷偷加登录。
- 有没有偷偷加数据库。
- 有没有做多人协作。
- 有没有做完整后台。
- 第一步是不是太大。
- 有没有告诉你怎么验收。
如果计划太大，立刻让它缩小。
第二步：只做第一个页面
确认计划后，让 Codex 先做第一个页面。
可以这样说：
请现在只实现第一版的第一个页面。
页面只需要：
1. 标题。
2. 简短说明。
3. 输入区。
4. 生成按钮。
5. 结果区。
6. 可选的复制按钮。
请不要做登录、数据库、历史记录、多人协作或复杂样式。
完成后请告诉我：
1. 你改了哪些文件。
2. 如何运行项目。
3. 我应该在浏览器里检查什么。注意“只实现第一个页面”。
这句话很重要。
第三步：运行项目
Codex 改完后，通常会告诉你运行命令。
你可能会看到类似：
npm run dev或者：
pnpm dev你现在不用理解所有命令。
你只要知道：
运行命令 = 把项目启动起来运行后，终端可能会显示一个本地地址，比如：
http://localhost:3000把它打开，就是在浏览器里看你的项目。
如果运行失败，不要慌。
第 7 课会专门讲报错。
今天先记住：把完整报错复制给 AI，不要只说“不行了”。
第四步：浏览器验收
页面打开后，先不要急着说“完成”。
用这张清单检查：
| 检查项 | 结果 |
|---|---|
| 页面能打开 | 通过 / 不通过 |
| 标题能看见 | 通过 / 不通过 |
| 输入区能输入 | 通过 / 不通过 |
| 按钮能点击 | 通过 / 不通过 |
| 点击后结果区有变化 | 通过 / 不通过 |
| 输出和项目目标有关 | 通过 / 不通过 |
| 页面没有明显报错 | 通过 / 不通过 |
| 没有加入第一版不需要的复杂功能 | 通过 / 不通过 |
如果暂时没有接真正 AI，结果区显示固定示例，也可以算“页面流程跑通”。
但你要写清楚：
当前完成的是页面流程。
真正 AI 生成能力还没有接入。第五步：接入最小生成能力
如果页面已经跑通，可以让 Codex 接入最小生成能力。
提示词：
页面流程已经跑通。
现在请只接入最小生成能力。
要求：
1. 用户输入内容后，点击按钮能生成结果。
2. 如果暂时不能接真实 AI，请先用本地示例逻辑跑通流程，并明确标注这是占位。
3. 不要加入登录、数据库、历史记录或复杂配置。
4. 完成后告诉我如何运行和验收。这里有一个重要原则：
先跑通流程，再追求真实能力。如果课堂环境暂时没有 API Key，先用占位输出跑通页面是可以的。
但你要知道：占位输出不是完整 AI 能力，只是为了先验收页面流程。
课堂练习：判断下一步是否太大
下面这些下一步，哪些适合第一版？哪些应该以后再做？
| 下一步 | 适合现在做吗 | 原因 |
|---|---|---|
| 做标题、输入区、按钮、结果区 | 适合 / 不适合 | |
| 加登录注册 | 适合 / 不适合 | |
| 让按钮点击后显示结果 | 适合 / 不适合 | |
| 做完整数据库历史记录 | 适合 / 不适合 | |
| 接一个最小 AI 生成能力 | 适合 / 不适合 | |
| 做支付系统 | 适合 / 不适合 | |
| 加复制按钮 | 适合 / 不适合 | |
| 做多人协作 | 适合 / 不适合 |
参考判断：
第一版适合：页面、输入、按钮、结果、复制、最小生成。
第一版不适合：登录、支付、多人协作、复杂数据库、完整后台。自己动手：我的第一次实操记录
| 项目 | 我的记录 |
|---|---|
| 我的项目名称 | |
| 我交给 Codex 的第一步任务是 | |
| Codex 修改了哪些文件 | |
| 运行命令是 | |
| 浏览器地址是 | |
| 我输入了什么测试内容 | |
| 页面输出了什么 | |
| 通过的检查项 | |
| 没有通过的检查项 | |
| 下一步只改一件事 |
给 AI 的一句话
这是本课实操提示词卡。
请只实现我的第一版小工具页面。
项目名称：
用户输入：
工具输出：
成功标准：
页面只需要：
1. 标题。
2. 简短说明。
3. 输入区。
4. 生成按钮。
5. 结果区。
6. 可选复制按钮。
请不要做：
登录、注册、数据库、历史记录、多人协作、支付、自动发布、完整后台。
完成后请告诉我：
1. 你改了哪些文件。
2. 如何运行项目。
3. 浏览器里应该检查什么。
4. 如果还没有接真实 AI，现在输出是占位还是真实生成。本课小结
今天你要记住：
- 第一次动手不要做完整系统。
- 第一个小工具只需要页面、输入、按钮和输出。
- Codex 改完后，要问它改了哪些文件、怎么运行、怎么验收。
- 浏览器能打开不等于完成，还要测试输入和按钮。
- 占位输出可以帮助先跑通流程，但要知道它不等于真实 AI 能力。
- 每次只做下一步，不要边做边加大范围。
课后任务
把你的第一个小工具跑一遍，并完成这张验收记录：
| 检查项 | 我的记录 |
|---|---|
| 页面能打开吗 | |
| 输入框能输入吗 | |
| 按钮能点击吗 | |
| 结果区有变化吗 | |
| 输出是否和项目目标有关 | |
| 现在是真实 AI 输出还是占位输出 | |
| 我遇到的第一个问题是 | |
| 我准备下一步只修什么 |
如果遇到报错，不要删除项目，也不要重来。
把报错留着。第 7 课会教你怎么处理。
本课最低标准
你能说出：
第一个小工具只验收一个闭环：输入 -> 点击 -> 输出。并且你完成了一个能打开、能输入、能输出的小工具雏形。