教学门户 · v1.0.0
描述你的业务问题 → Codex 自动生成产品文档(PRD) → 自动生成可用网页 Demo。
看到效果后继续提意见,一直改到满意为止。
学习材料
README.md · 快速开始
2 分钟了解 Skill 能做什么,含触发词参考
walkthrough-hr-recruitment.md · 完整演练
22 KB · 老师讲你看 · HR 专员小王从 0 到 v1.0
student-checklist.md · 作业 checklist
100 多项可勾选 · 边做边填 · 过程即交付
Skill 顶层 README
文件结构 · 安装方法 · 常见问题
找茬练习(推荐先做)
三关 21 题:改需求 · 挑 PRD 坑 · 验收 Demo
帮助知识库
19 条高频问题 · 支持搜索 · 做作业卡住先查这里
进阶实战课程
学完入门之后:多实体 · 数据迁移 · 团队部署
理解这个 Skill 能做出什么东西,建立感性认知
点开 Demo,看到带真实数据的管理后台。体验:新增/编辑/删除、看板拖拽。
Demo 01
单实体 CRUD + 看板拖拽
打开 Demo →Demo 02
多实体 + 5 列管道看板
打开 Demo →Demo 03
多实体 + 行动项看板
打开 Demo →这 3 个 Demo 是学员说了一句话后 Skill 自动生成的
→ 一句话需求 → 几轮对话 → PRD → 可用 Demo。整个过程学员不需要写任何代码。
看一个 HR 专员小王是怎么从零开始做招聘后台的
这是「老师讲你看」的材料。跟着小王的 4 个场景,理解 Skill 的工作方式。
walkthrough-hr-recruitment.md · 完整演练
HR 招聘后台从 0 到 v1.0,完整跑 4 个场景
演练包含内容
学完能回答
用 checklist 边做边勾,卡了就举手
在 Codex 里说「用业务助手智能体做一个 XX」,然后跟着 Skill 走。
01
需求发现
~30 分钟
02
PRD 生成
~15 分钟
03
Demo 生成
~20 分钟
04
持续迭代
无限循环
提交 4 份文件给讲师
PRD 文档
版本号 ≥ v0.1
HTML Demo
双击即开,CRUD 可用
checklist 过程
边做边勾
CHANGELOG
记录所有改动
学员常见问题
可以。这个 Skill 就是给不会写代码的业务人员用的。你只需要描述业务,Codex 负责生成。
适合内部试用和原型验证。给真实用户用需要:后端 API、用户登录、HTTPS 部署。但作为业务可行性验证工具,完全够用。
存在你浏览器的 localStorage 里,除非手动清空浏览器数据,不会丢。每个 Demo 的「设置」页有「导出数据」按钮,可以把数据导出成 JSON 备份。
直接继续跟 Codex 说。它会基于你现有的 Demo 迭代,不会从头重做。
1-2 天课程,让零代码基础的学员做出可用的业务 Demo。学员交付物:PRD + HTML Demo + checklist 过程文件 + CHANGELOG
讲师材料
instructor-guide.md · 课程大纲
5 小时课时表 · 讲解要点 · 常见错误救场话术 · 培训变体
instructor-rubric.md · 评分量表
100 分制 · 完成度 70 + 质量 30 · 红牌项
walkthrough-hr-recruitment.md · 演练(投影用)
22 KB · 老师讲你看 · 展示 4 场景完整过程
student-checklist.md · 作业清单
100 多项 · 给学员打印每人一份 · 边做边勾
5 小时课程表
课前准备清单
自己跑一遍 walkthrough
确保熟悉 4 场景路由规则
准备 3-5 个真实业务场景
自己行业的例子,给学员参考
3 个 demo 在自己机器上跑通
准备好截图/录屏(备用)
打印评分量表(instructor-rubric.md)
给学员每人一份
学员装好 Codex
桌面版或浏览器扩展
学员跑 smoke_test → 78/78
python work/smoke_test.py
讲解要点
第一段:Skill 是什么(15 分钟)
第二段:演示(20 分钟)
第三段:学员实战(60-90 分钟)
第四段:复盘 + 评分(30 分钟)
常见学员错误 · 讲师救场话术
| 错误 | 救场话术 |
|---|---|
| 一句话需求,太笼统 | 「你是 HR,你日常最头疼哪 3 件事?用大白话告诉我」 |
| PRD 写到对话里,没写文件 | 「PRD 必须写文件,这样能发给组长看」 |
| CRUD 是空架子,点击没反应 | 「点一下新建按钮,看看有没有弹窗」 |
| 场景 C 没冻结老版本 | 「你上次写好的 v0.3 数据呢?重写会丢吗?」 |
| 字段没版本号 | 「你给 5 个同事看,谁知道你这是哪一版?」 |
| 主导航放右侧 | 「主导航在左侧是业界标准,放在右侧学员会困惑」 |
| 用了 emoji 图标 | 「打开 dev tools 看一下,这个图标屏幕阅读器念不出来」 |
评分量表(instructor-rubric.md)
90+
优秀
可直接交付生产
75-89
良好
需要少量打磨
60-74
合格
需要中等打磨
<60
不合格
需要返工
Demos
已带真实种子数据,双击即可打开体验
Demo 01
"我要做一个销售拜访纪要管理工具,销售员输入客户名称、拜访时间、跟进结论,按月份查看,能新建/编辑/删除。"
Demo 02
"我们公司 HR 经常要做招聘管理,需要发布招聘需求、跟踪候选人进度(简历筛选/HR 面试/业务面试/管理终面/已发 offer)、记录每轮面试评价、统计入职满意度。"
Demo 03
"我们团队每周开周会、月会、复盘,需要一个会议纪要管理工具,可以写会议笔记,自动整理出每个会议的行动项,按状态(待开始/进行中/已完成)看板跟踪。"
每个 Demo 都包含的通用特性
左侧主导航
深色/浅色主题
增删改查弹窗
本地持久化
移动端适配
看板拖拽
数据导出 JSON
设置页
Workflow
4 阶段 + 4 种迭代场景,完整循环
4 阶段(单向流程)
2-3 轮对话,搞清楚业务场景、用户角色、核心功能
~30 分钟
自动生成产品文档,包含 6 大块内容
~15 分钟
单文件 HTML,双击即开,CRUD 可用
~20 分钟
看到效果后,继续提意见,一直改到满意
无限循环
4 种迭代场景(阶段四路由)
改 PRD 后重生成
字段增删、功能加减。自动:保留旧版本注释、迁移字段、更新视图。
适用:流程调整、新增功能
把对话合并到 PRD
对话里出现的新需求、新约束、新字段,全部回写到 PRD 中,保持文档最新。
适用:持续完善 PRD
冻结老版本 + 迁移数据
流程推翻重做时,自动生成 freeze_v{version}.html,把 localStorage 数据迁移到新版。
适用:流程大改、数据迁移
直接改代码
视觉微调(颜色、间距、文字),不碰 PRD,直接生成修补 patch 追加到 index.html。
适用:视觉细节调整
技术栈(全部 CDN,无需安装)
Tailwind CSS
原子化样式
Alpine.js 3
响应式数据绑定
lucide 图标
开源 SVG 图标
localStorage
浏览器本地持久化
系统字体
无需外部加载
学员不需要懂任何代码。如果想看懂实现,所有 HTML 文件都可以在浏览器「查看源代码」看到完整结构。
For Instructors · 讲师备课文档
本文记录"业务助手智能体"这个 Skill 从一句话需求到 v1.0.0 发布包的完整过程。 六个章节,每一步都附开发记录原文印证和可打开的资料文档——可直接投影讲解, 也是给进阶学员的最好案例:开发 Skill 这件事本身,就是四步工作流的完整演练。
目录
Chapter 01 · 缘起
业务背景:公司要向市场推广 AI 智能体培训服务,目标是让企业员工用 Codex 开发网页应用解决自己的业务问题。培训要规模化,就不能靠讲师人肉带练——需要把"怎么做应用"的方法固化成一个可复用的 Skill。一切从用户对 Codex 说的一段话开始:
"现在我们公司要向市场推广一项 AI 智能体的培训服务,培训目标聚焦:培训企业员工使用 Codex 开发网页应用解决具体的业务问题。1、首先需要开发一个 Skill,起名叫'业务助手智能体'。2、用这个智能体我可以读懂企业员工输入的需求,生成产品文档。5、用户看到实现的应用后,可以后续一直不断地提出具体的改进建议,一直一直修改产品。"
—— 开发记录 · 原始需求(节选)
讲师讲解要点
这条需求本身就是"黄金五问"的示范答案:有背景(培训服务)、有目标(Skill 名字都起好了)、有编号的分步要求、还附了参考附件。 反问课堂:"如果只说'帮我做个智能体',后面会多出多少轮对话?"——顺便引出学员路径 Step 1 的需求发现练习。
本章印证与资料
Chapter 02 · 奠基
接到需求后,Codex 没有直接写页面,而是先做两件地基工程:
① 搭 Skill 四层骨架
② 优化 PRD 模板
在原 16 步骨架上扩展为 6 大章节 + 附录,并把 Vercel / shadcn 的设计规范(11 档色值、字号阶梯、圆角阴影、组件规范)内嵌进模板,让"生成的页面天生好看"。
讲师讲解要点
两个因果链:① Skill ≠ 一段提示词,而是"说明书 + 素材库 + 质检工具"的完整包——学员交付作业同样要求三件套齐全; ② 模板的质量上限 = 生成物的质量上限——学员日后觉得"生成的页面丑",八成要回 PRD 模板里找原因。
本章印证与资料
Chapter 03 · 成长
第一个 Demo:销售拜访纪要(最小可用)
单页 + 列表 + 看板的最小版本,双击即跑。用户看完第一反应:
"销售拜访纪要 Demo 我看到了,页面样式很好。"
讲解:先做最小可用建立信任,别一上来做多模块——学员路径"选 1 天能做完的小业务"即源于此。
印证:打开这个 Demo↗
反馈一:需求会长大 → 多模块业务后台
用户马上提出真实业务的复杂度:
"用户可能要解决的业务功能可能由很多功能组成的。如人力资源专员要做面试系统可能有发布招聘需求、人力资源面试、业务面试、管理层面试、入职调查等等功能。你可以就这个需求看能不能设计一套业务后台的网页。"
Skill 随之升级:模板加入多模块后台骨架(五种视图:仪表盘 / 列表 / 看板 / 详情 / 设置),产出第二个 Demo「HR 招聘后台」。
讲解:需求会长大,架构要能接住——骨架库"按复杂度选模板"的指引就是这一步的沉淀。
反馈二:菜单放左侧 → 教训固化为硬性约束
第一版多模块后台把导航画在了右边,用户一句话点破:
"招聘管理后台 Demo 模板的菜单放在左侧更符合一般的习惯,这个要修改,免得以后用户生成的菜单都跑到右侧。"
修复同步做了四处:Skill 模板、HR Demo、README 说明、SKILL.md 规则,并把"主导航永远在左侧"写成硬性约束——此后所有生成的应用不会再犯。
讲解:把教训固化成规则,同一个坑就不会踩第二次;而且改的是源头模板而不是成品——这正是场景 A"改 PRD 后重生成"的示范。讲师救场话术表里"主导航放右侧"一条即来源于此。
第三个 Demo:会议纪要,以及暴露的问题
按同一条流水线做第三个 Demo「会议纪要管理」时,用正则替换模板数据反复出错,用户直言:
"修改这个怎么这么复杂。你一次性给修好吧。"……"我也发现之前做的 DEMO 中新增、修改、删除这些功能都不能用,最终交付的 SKILL 中不能出现这样的问题。"
讲解:两个教训同时出现——①同样的手工劳动重复三次以上就该工具化;②"看起来能用"和"真的能用"隔着一次亲手验收。checklist 里大量"点一下按钮"检查项的由来。
Chapter 04 · 进化
做完三个 Demo,大家发现一个别扭的事:每换一个业务,都要把模板里的示例数据一处一处换成新业务的内容—— 就像在一份旧合同上逐字涂改,又慢又容易改漏。第三个 Demo 就是因为这样反复涂改出了错, 用户当时直接说:"修改这个怎么这么复杂,你一次性给修好吧。"
解决办法说白了就一句话:别再涂改旧文件了,改成填一张"业务说明单"。 你只要在单子上写清楚——这个工具叫什么、有哪些菜单、要记录哪些信息—— 剩下的交给它自动生成。想换业务?换一张单子填就行。
| 对比 | 以前(手工涂改) | 现在(填说明单) |
|---|---|---|
| 换个业务 | 写几百行替换脚本,还常出错 | 填约 30 行业务说明 |
| 新增/编辑/删除 | 部分按钮"中看不中用" | 生成时就带好,当场可验 |
| 交出去的东西 | 一个网页文件 | 还是一个网页文件,双击即用 |
当时用户还问过一个特别实际的问题:"部署给客户的时候,是不是也要给客户装 Python?" 答案不用:填单子、生成应用这些事,都在你自己电脑上的 Codex 里完成; 最后交到客户手上的,只是一个网页文件——对方什么都不用装,双击就能用。
讲师讲解要点
一句话讲透:"人只管说清楚业务,格式的事让机器记。" 可以顺势问学员:你手上哪件活儿,其实也是"每次都在旧文件上涂改"?它值不值得变成一张表单?
本章印证与资料
Chapter 05 · 交付
发布包验收通过后打上 v1.0.0 标签(静态自检 78/78 通过)。对培训现场来说,更重要的是下面这两件上手的事:
安装 Skill(3 步,约 2 分钟)
下载并解压发布包
business-assistant-agent-v1.0.0.zip↓,解压后能看到 business-assistant-agent/ 文件夹——这个就是 Skill 本体
拷贝到 Codex 的 skills 目录
Windows 通常是 C:\用户\你的用户名\.codex\skills\;把整个文件夹拷进去,别改里面的结构
重启 Codex,自动生效
重启后对它说「你现在有哪些 Skill」,能在列表里看到业务助手智能体,就装好了
开始使用(3 步,约 30 分钟)
说一句话触发它
「用业务助手智能体,做一个销售拜访纪要工具:记录客户名称、拜访时间、跟进结论,能新建/编辑/删除」——照抄这句就能跑
跟着它的四步走
它会先问需求 → 给你一份 PRD 文档逐条确认 → 生成网页应用 → 之后你提意见它继续改,一直改到满意
双击验收
打开生成的 index.html:点新建、改一条、删一条、导出数据——都是真能用的才算过关
讲师讲解要点
培训开场最有效的一招:现场随机挑一位学员,按左边三步装 Skill、按右边三步说需求—— 30 分钟内让全场看到"一句话变成能用的工具"。装的过程卡住了,正好演练讲师救场话术。
本章印证与资料
Chapter 06 · 课堂包
技术选型速查(为什么长这样)
| 选择 | 理由 |
|---|---|
| 单文件 HTML | 零安装、双击即开、微信就能发——业务人员交付成本最低 |
| Tailwind + Alpine.js(CDN) | 不装 Node、不打包,浏览器直接渲染 |
| lucide 图标(禁 emoji) | 统一视觉、屏幕阅读器可读——评分量表红牌项 |
| localStorage 持久化 | 数据留在用户浏览器,可导出 JSON,不经服务器 |
| 主导航永远在左侧 | 踩坑后写入 SKILL.md 的硬性约束 |
| Python 只在 Codex 侧 | 构建时用工具,运行时零依赖——最终用户只要浏览器 |
课堂讨论题
Q1 · 起点
如果最初需求只有一句"帮我做个智能体",会多出多少轮对话?现场演示把它补成"黄金五问"级需求。
Q2 · 取舍
为什么坚持单文件 HTML 而不是 React 工程?什么情况该切换?(提示:使用者是谁、谁来维护)
Q3 · 踩坑
导航右侧的坑为什么修四处而不是一处?只修 Demo 不修模板,三个月后会怎样?
Q4 · 迁移
你的部门里,哪件重复劳动已发生三次以上,值得按"YAML + 生成器"思路工具化?
资料总索引(每一步的印证文档)
| 环节 | 资料 | 链接 |
|---|---|---|
| 缘起 · 需求与附件 | 原始 PRD 模板 | 智能体PRD.md↗ |
| 奠基 · Skill 全貌 | SKILL.md / README | SKILL.md↗ · README↗ |
| 成长 · Demo ×3 | 三个可玩应用 | 销售↗ · HR↗ · 会议↗ |
| 成长 · 使用侧演练 | 用 Skill 做应用全过程 | walkthrough↗ |
| 进化 · 版本记录 | CHANGELOG | changelog↗ |
| 交付 · 验收工具 | 作业 checklist / 评分量表 | checklist↗ · rubric↗ |
| 交付 · 发布包 | v1.0.0 完整包 | zip 下载↓ |