教学门户 · Business Assistant Agent v1.0.0
描述你的业务问题 → Codex 自动生成产品文档(PRD) → 自动生成可用网页 Demo。
看到效果后继续提意见,一直改到满意为止。
理解这个 Skill 能做出什么东西,建立感性认知
点开 Demo,看到带真实数据的管理后台。体验:新增/编辑/删除、看板拖拽、深色模式。
单实体 CRUD + 看板拖拽
多实体 + 5 列管道看板
多实体 + 行动项看板
💡 这 3 个 Demo 是学员说了一句话后 Skill 自动生成的
→ 一句话需求 → 几轮对话 → PRD → 可用 Demo。整个过程学员不需要写任何代码。
看一个 HR 专员小王是怎么从零开始做招聘后台的
这是「老师讲你看」的材料。跟着小王的 4 个场景,理解 Skill 的工作方式。
walkthrough-hr-recruitment.md · 完整演练
HR 招聘后台从 0 到 v1.0,完整跑 4 个场景
📋 演练包含内容
🎯 学完能回答
用 checklist 边做边勾,卡了就举手
在 Codex 里说「用业务助手智能体做一个 XX」,然后跟着 Skill 走。
选业务时注意:做一个 1 天能做完的「真实小业务」(比如「团队周报收集工具」),不要做「全公司 OA 系统」。 包含 1-3 个实体、单一用户角色、2-3 步简单流程。
阶段一
需求发现
~30 分钟
阶段二
PRD 生成
~15 分钟
阶段三
Demo 生成
~20 分钟
阶段四
持续迭代
无限循环
提交 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 · 作业清单
142 项 · 给学员打印每人一份 · 边做边勾
自己跑一遍 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 看一下,这个图标屏幕阅读器念不出来」 |
90+
优秀
可直接交付生产
75-89
良好
需要少量打磨
60-74
合格
需要中等打磨
<60
不合格
需要返工
已带真实种子数据,双击即可打开体验
学员说的原话:
"我要做一个销售拜访纪要管理工具,销售员输入客户名称、拜访时间、跟进结论,按月份查看,能新建/编辑/删除。"
学员说的原话:
"我们公司 HR 经常要做招聘管理,需要发布招聘需求、跟踪候选人进度(简历筛选/HR 面试/业务面试/管理终面/已发 offer)、记录每轮面试评价、统计入职满意度。"
学员说的原话:
"我们团队每周开周会、月会、复盘,需要一个会议纪要管理工具,可以写会议笔记,自动整理出每个会议的行动项,按状态(待开始/进行中/已完成)看板跟踪。"
左侧主导航
深色/浅色主题
增删改查弹窗
本地持久化
移动端适配
看板拖拽
数据导出 JSON
设置页
4 阶段 + 4 种迭代场景,完整循环
2-3 轮对话,搞清楚业务场景、用户角色、核心功能
~30 分钟
自动生成产品文档,包含 6 大块内容
~15 分钟
单文件 HTML,双击即开,CRUD 可用
~20 分钟
看到效果后,继续提意见,一直改到满意
无限循环
改 PRD 后重生成
字段增删、功能加减。自动:保留旧版本注释、迁移字段、更新视图。
适用:流程调整、新增功能
把对话合并到 PRD
对话里出现的新需求、新约束、新字段,全部回写到 PRD 中,保持文档最新。
适用:持续完善 PRD
冻结老版本 + 迁移数据
流程推翻重做时,自动生成 freeze_v{version}.html,把 localStorage 数据迁移到新版。
适用:流程大改、数据迁移
直接改代码
视觉微调(颜色、间距、文字),不碰 PRD,直接生成修补 patch 追加到 index.html。
适用:视觉细节调整
Tailwind CSS
原子化样式
Alpine.js 3
响应式数据绑定
lucide 图标
开源 SVG 图标
localStorage
浏览器本地持久化
Inter 字体
Google Fonts
学员不需要懂任何代码。如果想看懂实现,所有 HTML 文件都可以在浏览器「查看源代码」看到完整结构。