🛠️ Vibe Coding 教程 · 第三课 做一个真能用的 AI 工具
第三课 · 做一个会调用 AI 的工具

把你的问题卡,
变成一个真能用的 AI 工具。

第二课你带回了一个真问题、访谈记录和 5 条测试样本。今天,我们把它做成一个会调用 AI、能处理出错的小应用。

第一课做的网页是"死"的——它不会思考。今天的不一样:

用户输入 → 交给 AI 思考 → 返回有用的结果。

约 3 小时。今天你不需要会写代码——你负责把"要做什么"想清楚、写清楚,代码交给 Codex。请把第二课的问题卡和测试样本(至少 3 条)准备好。

第 1 步

确认问题,选一个模板

约 25 分钟

🔒 已解锁

先把第二课的问题卡抄过来——这是今天所有工作的地基。

✓ 已保存

选一个模板照着做

纯小白第一次做,不要从空白自由发挥。挑一个最接近你问题的模板——它们都是"单场景、三步走"的小工具,一个下午做得完。

🍜 食堂选择助手 ✓ 已选
用户填预算、口味、忌口、时间 → AI 给 3 个窗口建议和理由。
📝 社团推文改稿助手 ✓ 已选
用户填活动信息 → AI 生成标题备选、正文初稿,并指出还缺哪些信息。
📖 读书会讨论准备器 ✓ 已选
用户贴一段文本或读书笔记 → AI 生成讨论问题、关键矛盾、可追问点。
🎯 课程选题陪跑器 ✓ 已选
用户填兴趣和课程要求 → AI 给 3 个可做的选题、资料方向、风险提醒。
把问题写下来、选好一个模板,就能继续。

第 2 步

设计「用户要填什么」

约 25 分钟

🔒 先完成上一步

AI 工具的第一件事:用户得给它一点东西。这叫输入

规矩:最多 6 个填写框,越少越好。每多一个框,就少一个人愿意用。

✓ 已保存

想不出来?回头看你的模板——它已经告诉你大概要填什么了。

写下用户要填的东西,就能继续。

第 3 步

设计「AI 要给出什么」

约 25 分钟

🔒 先完成上一步

用户填完,AI 要还给他一个结果。这叫输出

规矩:最多 3 个模块。结果不是越多越好——是越能用越好。

反面例子(AI Slop):AI 输出一大段华丽的话,看着丰富,但用户读完还是不知道该干嘛。

正面例子:「食堂选择助手」输出 3 个模块——① 推荐窗口;② 一句话理由;③ 备选。清清楚楚。

✓ 已保存
写下 AI 要给出的结果,就能继续。

第 4 步

写一段「给 AI 的说明书」

约 35 分钟

🔒 先完成上一步

这是你事先写给 AI 的一段说明书(它的专业名叫「系统提示词」):告诉它扮演什么角色、干什么、不许干什么、按什么格式回答。每次有用户使用你的工具,AI 都会先读一遍这段说明。它是整个工具好不好用的关键。

填下面 4 格,右边会自动拼成一段完整的提示词,你可以直接复制给 Codex。

✓ 已保存
✓ 已保存
✓ 已保存
✓ 已保存

拼好的提示词(复制给 Codex)

这一下你就是在「调用一次 AI」——也正是你这个工具马上要做的事。先在这里试,再去 Codex 里搭。

⚠️ 边界这一格最重要。不写边界,AI 就会"自信地胡说"——信息不够也硬编一个答案出来。这是 AI Slop 最大的来源。一定要让它学会说「信息不足」。

4 格都填上,就能继续。

第 5 步

让网页真的会调用 AI

约 30 分钟

🔒 先完成上一步

到这里你已经把"要做什么"全想清楚了。现在让 Codex 把它变成代码。

先搞懂一件事:网页本身不会 AI

你的网页其实不会思考。它做的是:把用户填的东西打包寄给一个 AI 服务,等对方把结果寄回来,再显示出来。这一来一回,就叫调用 API。你第 0 课领的那串 sk- 钥匙,就是寄包裹时的身份证明。

把下面这段话发给 Codex

它会照着你前几步填的东西,搭好整个项目。

「请帮我做一个网页小工具。用户输入:(贴第 2 步)。要生成的结果:(贴第 3 步)。给 AI 的说明书:(贴第 4 步拼好的那段)。请调用 AI 接口来生成结果。API 钥匙不要写进网页文件里,放在一个单独的文件里——请明确告诉我这个文件叫什么名字、钥匙要填在哪一行。做成一个我在自己电脑上能运行的小项目:网页部分负责显示和收输入,另有一段后台代码负责调用 AI、保管钥匙——网页部分绝不碰钥匙。」

⚠️ 钥匙(sk-)永远不能写进网页文件。网页文件是用户能看到的;钥匙写进去,等于把钱包密码贴在门上。让 Codex 放进单独的配置文件——这点你一定要盯着它做到。

1
把上面那段话发给 Codex,把括号里的内容换成你前几步填的。
2
做完后,让 Codex 明确告诉你:钥匙要填进哪个文件(通常是一个叫 .env 的文件)、填在哪一行。照它说的填进去。看不懂就追问:「这个文件在哪,怎么打开?」
3
在电脑上打开这个网页,随便填一组输入,看 AI 有没有返回结果。
✓ 已保存
记一句你的运行情况,就能继续。报错也没关系——下一步专门讲怎么修。

第 6 步

让它「出错也不难看」

约 25 分钟

🔒 先完成上一步

AI 服务不是 100% 稳的——有时候会慢、会卡、会突然不返回。一个真能用的工具和一个临时演示品的区别,就在于它出错时还体面。

美食协会那三个项目都踩过这个坑:上游图像接口经常抽风,所以代码里都写了"失败就重试 3 次"。你的工具也要有兜底。

把这段话发给 Codex,给工具加三件兜底

「请帮这个工具加三个兜底:① 等待 AI 返回时,显示一个『正在生成…』的提示,别让页面像卡死了;② 如果 AI 调用失败,显示一句友好的提示,并给一个『重试』按钮;③ 用户什么都没填就点生成时,提醒他先填。」

没有兜底 ❌ 用户点一下,页面一片空白,他以为坏了,关掉再也不来。

有兜底 ✅ 用户点一下,看到"正在生成…";万一失败,看到"网络有点忙,点这里重试"。

✓ 已保存
记一句兜底测试情况,就能继续。

第 7 步

用真实样本打分

约 25 分钟

🔒 先完成上一步

工具能跑,不等于它好用。怎么知道它好不好?——用你孵化周带回的真实样本挨个试,诚实打分。至少打 3 条;带了 5 条就测满 5 条。

"看起来很 AI、很丰富"不算好。好的标准是:结果真的能帮到那个具体的人。

打完分,如果"差"和"凑合"偏多——别灰心,这正是这一步的价值。回第 4 步,改一改你的系统提示词(尤其是边界和输出格式),再测一遍。改提示词,是免费的;上线了被人吐槽,才贵。

至少给 3 条样本打上分,就能完成这一课。

🔒 先完成上一步
🎉 完成第三课

你做出了一个真能用的 AI 工具。

它会接收输入、调用 AI、处理失败、被你用真实样本验证过。这已经不是玩具了。

我的工具
它帮谁解决什么
5 条样本打分
记住这句
🎯 能跑 ≠ 好用。
用真实样本打分,才知道它到底行不行。

下一课:把这个还只在你电脑上的工具,变成一个全世界都能打开的链接。