第二课你带回了一个真问题、访谈记录和 5 条测试样本。今天,我们把它做成一个会调用 AI、能处理出错的小应用。
第一课做的网页是"死"的——它不会思考。今天的不一样:
用户输入 → 交给 AI 思考 → 返回有用的结果。
约 3 小时。今天你不需要会写代码——你负责把"要做什么"想清楚、写清楚,代码交给 Codex。请把第二课的问题卡和测试样本(至少 3 条)准备好。
先把第二课的问题卡抄过来——这是今天所有工作的地基。
纯小白第一次做,不要从空白自由发挥。挑一个最接近你问题的模板——它们都是"单场景、三步走"的小工具,一个下午做得完。
AI 工具的第一件事:用户得给它一点东西。这叫输入。
规矩:最多 6 个填写框,越少越好。每多一个框,就少一个人愿意用。
想不出来?回头看你的模板——它已经告诉你大概要填什么了。
用户填完,AI 要还给他一个结果。这叫输出。
规矩:最多 3 个模块。结果不是越多越好——是越能用越好。
反面例子(AI Slop):AI 输出一大段华丽的话,看着丰富,但用户读完还是不知道该干嘛。
正面例子:「食堂选择助手」输出 3 个模块——① 推荐窗口;② 一句话理由;③ 备选。清清楚楚。
这是你事先写给 AI 的一段说明书(它的专业名叫「系统提示词」):告诉它扮演什么角色、干什么、不许干什么、按什么格式回答。每次有用户使用你的工具,AI 都会先读一遍这段说明。它是整个工具好不好用的关键。
填下面 4 格,右边会自动拼成一段完整的提示词,你可以直接复制给 Codex。
这一下你就是在「调用一次 AI」——也正是你这个工具马上要做的事。先在这里试,再去 Codex 里搭。
⚠️ 边界这一格最重要。不写边界,AI 就会"自信地胡说"——信息不够也硬编一个答案出来。这是 AI Slop 最大的来源。一定要让它学会说「信息不足」。
到这里你已经把"要做什么"全想清楚了。现在让 Codex 把它变成代码。
你的网页其实不会思考。它做的是:把用户填的东西打包寄给一个 AI 服务,等对方把结果寄回来,再显示出来。这一来一回,就叫调用 API。你第 0 课领的那串 sk- 钥匙,就是寄包裹时的身份证明。
它会照着你前几步填的东西,搭好整个项目。
「请帮我做一个网页小工具。用户输入:(贴第 2 步)。要生成的结果:(贴第 3 步)。给 AI 的说明书:(贴第 4 步拼好的那段)。请调用 AI 接口来生成结果。API 钥匙不要写进网页文件里,放在一个单独的文件里——请明确告诉我这个文件叫什么名字、钥匙要填在哪一行。做成一个我在自己电脑上能运行的小项目:网页部分负责显示和收输入,另有一段后台代码负责调用 AI、保管钥匙——网页部分绝不碰钥匙。」
⚠️ 钥匙(sk-)永远不能写进网页文件。网页文件是用户能看到的;钥匙写进去,等于把钱包密码贴在门上。让 Codex 放进单独的配置文件——这点你一定要盯着它做到。
.env 的文件)、填在哪一行。照它说的填进去。看不懂就追问:「这个文件在哪,怎么打开?」AI 服务不是 100% 稳的——有时候会慢、会卡、会突然不返回。一个真能用的工具和一个临时演示品的区别,就在于它出错时还体面。
美食协会那三个项目都踩过这个坑:上游图像接口经常抽风,所以代码里都写了"失败就重试 3 次"。你的工具也要有兜底。
「请帮这个工具加三个兜底:① 等待 AI 返回时,显示一个『正在生成…』的提示,别让页面像卡死了;② 如果 AI 调用失败,显示一句友好的提示,并给一个『重试』按钮;③ 用户什么都没填就点生成时,提醒他先填。」
没有兜底 ❌ 用户点一下,页面一片空白,他以为坏了,关掉再也不来。
有兜底 ✅ 用户点一下,看到"正在生成…";万一失败,看到"网络有点忙,点这里重试"。
工具能跑,不等于它好用。怎么知道它好不好?——用你孵化周带回的真实样本挨个试,诚实打分。至少打 3 条;带了 5 条就测满 5 条。
"看起来很 AI、很丰富"不算好。好的标准是:结果真的能帮到那个具体的人。
打完分,如果"差"和"凑合"偏多——别灰心,这正是这一步的价值。回第 4 步,改一改你的系统提示词(尤其是边界和输出格式),再测一遍。改提示词,是免费的;上线了被人吐槽,才贵。
它会接收输入、调用 AI、处理失败、被你用真实样本验证过。这已经不是玩具了。
下一课:把这个还只在你电脑上的工具,变成一个全世界都能打开的链接。