业务助手智能体

教学门户 · Business Assistant Agent v1.0.0

你不需要写代码

描述你的业务问题 → Codex 自动生成产品文档(PRD) → 自动生成可用网页 Demo。
看到效果后继续提意见,一直改到满意为止。

零代码 双击即开 本地存储 持续迭代
我的学习进度 0%
✅ 已完成: 0 ⏳ 进行中: 0 ○ 未开始: 4
1

先看 3 个真实 Demo(10 分钟)

理解这个 Skill 能做出什么东西,建立感性认知

点开 Demo,看到带真实数据的管理后台。体验:新增/编辑/删除、看板拖拽、深色模式。

💡 这 3 个 Demo 是学员说了一句话后 Skill 自动生成的

Demo 01 "我要做一个销售拜访纪要管理工具,销售员输入客户名称、拜访时间、跟进结论,按月份查看,能新建/编辑/删除。"
Demo 02 "我们公司 HR 经常要做招聘管理,需要发布招聘需求、跟踪候选人进度(简历筛选/HR 面试/业务面试/管理终面/已发 offer)、记录每轮面试评价、统计入职满意度。"
Demo 03 "我们团队每周开周会、月会、复盘,需要一个会议纪要管理工具,可以写会议笔记,自动整理出每个会议的行动项,按状态(待开始/进行中/已完成)看板跟踪。"

→ 一句话需求 → 几轮对话 → PRD → 可用 Demo。整个过程学员不需要写任何代码。

看什么: 左侧导航怎么用 · 总览页 KPI 卡片 · 列表页的增删改查弹窗 · 看板拖拽 · 右上角主题切换
2

读完整演练文档(15 分钟)

看一个 HR 专员小王是怎么从零开始做招聘后台的

这是「老师讲你看」的材料。跟着小王的 4 个场景,理解 Skill 的工作方式。

📖

walkthrough-hr-recruitment.md · 完整演练

HR 招聘后台从 0 到 v1.0,完整跑 4 个场景

场景 A:改 PRD 后重生成 场景 B:把对话合并到 PRD 场景 C:冻结老版本 + 迁移数据 场景 D:直接改代码

📋 演练包含内容

  • • 需求发现:问哪些问题
  • • PRD 生成:字段 + 视图
  • • Demo 生成:5 个视图代码
  • • 场景 A/B/C/D 完整对话
  • • CHANGELOG 写法示例

🎯 学完能回答

  • • 4 个场景分别在什么情况下用
  • • PRD 改字段后 Demo 怎么重生成
  • • 老版本数据怎么迁移到新版本
  • • 三件套(PRD/代码/CHANGELOG)怎么配合
3

开始自己的业务(60-90 分钟)

用 checklist 边做边勾,卡了就举手

在 Codex 里说「用业务助手智能体做一个 XX」,然后跟着 Skill 走。

⚠️

选业务时注意:做一个 1 天能做完的「真实小业务」(比如「团队周报收集工具」),不要做「全公司 OA 系统」。 包含 1-3 个实体、单一用户角色、2-3 步简单流程。

📝

阶段一

需求发现

~30 分钟

📄

阶段二

PRD 生成

~15 分钟

💻

阶段三

Demo 生成

~20 分钟

🔄

阶段四

持续迭代

无限循环

口诀: 需求问 3 轮 → PRD 逐条审 → Demo 双击开 → 不满意继续改
4

完成交付(5 分钟)

提交 4 份文件给讲师

📄

PRD 文档

版本号 ≥ v0.1

💻

HTML Demo

双击即开,CRUD 可用

checklist 过程

边做边勾

📝

CHANGELOG

记录所有改动

💬 学员常见问题

Q:我只会用 Excel,能做吗?

可以。这个 Skill 就是给不会写代码的业务人员用的。你只需要描述业务,Codex 负责生成。

Q:生成出来的 Demo 能直接给同事用吗?

适合内部试用和原型验证。给真实用户用需要:后端 API、用户登录、HTTPS 部署。但作为业务可行性验证工具,完全够用。

Q:数据存在哪里?会丢吗?

存在你浏览器的 localStorage 里,除非手动清空浏览器数据,不会丢。每个 Demo 的「设置」页有「导出数据」按钮,可以把数据导出成 JSON 备份。

Q:做完后想改需求怎么办?

直接继续跟 Codex 说。它会基于你现有的 Demo 迭代,不会从头重做。

🎓

讲师培训指南

1-2 天课程,让零代码基础的学员做出可用的业务 Demo。
学员交付物:PRD + HTML Demo + checklist 过程文件 + CHANGELOG

🗓 5 小时课程表

上午 09:00-09:30 Skill 是什么 / 能做什么 / 不能做什么 讲解
上午 09:30-10:00 投影跑 walkthrough,展示 4 场景 演示
上午 10:00-11:30 学员跑阶段一/二/三(每人选真实业务) 实战
下午 13:30-15:00 学员跑 4 场景(用 student-checklist) 实战
下午 15:00-15:30 学员展示成果,讲师点评 + 评分 复盘
下午 15:30-16:00 答疑 + 收 checklist 和 demo 打包 收作业

✅ 课前准备清单

自己跑一遍 walkthrough

确保熟悉 4 场景路由规则

准备 3-5 个真实业务场景

自己行业的例子,给学员参考

3 个 demo 在自己机器上跑通

准备好截图/录屏(备用)

打印评分量表(instructor-rubric.md)

给学员每人一份

学员装好 Codex

桌面版或浏览器扩展

学员跑 smoke_test → 78/78

python work/smoke_test.py

🎤 讲解要点

第一段:Skill 是什么(15 分钟)

  • • Skill = 给 Codex 读的「说明书」
  • • 工作流:4 阶段 + 4 场景
  • • 学员角色:不是程序员,是「业务产品经理」
  • • 强调:不需要懂 HTML / CSS / JS

第二段:演示(20 分钟)

  • • 用 walkthrough 投影
  • • 重点:30 秒场景判断
  • • 三件套(PRD/代码/CHANGELOG)一起改
  • • 场景 C 的冻结老版本 + 迁移函数

第三段:学员实战(60-90 分钟)

  • • 每人选一个真实业务(不能是 HR)
  • • 边做边勾 checklist
  • • 每 15 分钟巡场,问「卡在哪了」

第四段:复盘 + 评分(30 分钟)

  • • 抽 2-3 个学员 5 分钟演示
  • • 用 rubric 现场打分
  • • 学员互评,看标准是否一致

⚠️ 常见学员错误 · 讲师救场话术

错误 救场话术
一句话需求,太笼统 「你是 HR,你日常最头疼哪 3 件事?用大白话告诉我」
PRD 写到对话里,没写文件 「PRD 必须写文件,这样能发给组长看」
CRUD 是空架子,点击没反应 「点一下新建按钮,看看有没有弹窗」
场景 C 没冻结老版本 「你上次写好的 v0.3 数据呢?重写会丢吗?」
字段没版本号 「你给 5 个同事看,谁知道你这是哪一版?」
主导航放右侧 「主导航在左侧是业界标准,放在右侧学员会困惑」
用了 emoji 图标 「打开 dev tools 看一下,这个图标屏幕阅读器念不出来」

🏆 评分量表(instructor-rubric.md)

90+

优秀

可直接交付生产

75-89

良好

需要少量打磨

60-74

合格

需要中等打磨

<60

不合格

需要返工

重要:讲师不只看最终交付物,还要看 checklist 过程。一个 60 分交付物 + 完整 checklist,比 90 分交付物 + 空白 checklist 学得多。

3 个参考 Demo

已带真实种子数据,双击即可打开体验

每个 Demo 都包含的通用特性

📌

左侧主导航

🌙

深色/浅色主题

增删改查弹窗

💾

本地持久化

📱

移动端适配

🔲

看板拖拽

📤

数据导出 JSON

⚙️

设置页

Skill 工作流

4 阶段 + 4 种迭代场景,完整循环

🔟 4 阶段(单向流程)

1

需求发现

2-3 轮对话,搞清楚业务场景、用户角色、核心功能

~30 分钟

✓ 角色 + 痛点
✓ 核心功能 + 字段
✓ 风格 + 参考
2

PRD 生成

自动生成产品文档,包含 6 大块内容

~15 分钟

✓ 产品定位
✓ 核心功能
✓ 页面结构
3

Demo 生成

单文件 HTML,双击即开,CRUD 可用

~20 分钟

✓ Tailwind CSS
✓ Alpine.js 交互
✓ localStorage 存储
4

持续迭代

看到效果后,继续提意见,一直改到满意

无限循环

✓ 改 PRD 重生成
✓ 合并对话到 PRD
✓ 直接改代码

🔀 4 种迭代场景(阶段四路由)

场景 A

改 PRD 后重生成

字段增删、功能加减。自动:保留旧版本注释、迁移字段、更新视图。

适用:流程调整、新增功能

场景 B

把对话合并到 PRD

对话里出现的新需求、新约束、新字段,全部回写到 PRD 中,保持文档最新。

适用:持续完善 PRD

场景 C

冻结老版本 + 迁移数据

流程推翻重做时,自动生成 freeze_v{version}.html,把 localStorage 数据迁移到新版。

适用:流程大改、数据迁移

场景 D

直接改代码

视觉微调(颜色、间距、文字),不碰 PRD,直接生成修补 patch 追加到 index.html。

适用:视觉细节调整

⚙️ 技术栈(全部 CDN,无需安装)

🎨

Tailwind CSS

原子化样式

Alpine.js 3

响应式数据绑定

🔣

lucide 图标

开源 SVG 图标

💾

localStorage

浏览器本地持久化

🔤

Inter 字体

Google Fonts

学员不需要懂任何代码。如果想看懂实现,所有 HTML 文件都可以在浏览器「查看源代码」看到完整结构。