首页 / 教学门户 | examples/README.md · 学员快速开始
文档: 快速开始 SKILL 说明 完整演练 学员清单 讲师指南 评分量表 examples 指南 更新日志 原始 PRD 教学门户 →

业务助手智能体 · 学员启动指南

这个 Skill 帮你和企业员工用自然语言描述业务需求,自动生成可用的网页应用 Demo,用于快速验证业务想法或交付给同事使用。

快速开始

第一步:触发 Skill

在 Codex 对话框中,用一句话描述你的业务问题。例如:

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

第二步:审阅与确认

Skill 会基于你的描述生成产品文档(类似 PRD),包含:

  • 产品定位和目标用户
  • 核心功能列表
  • 页面结构(导航/视图)
  • 字段定义
  • 交互细节
  • 请你逐项审阅,有不对的地方直接说"修改 XX 部分"。

    第三步:得到 Demo

    确认 PRD 后,Skill 会生成单文件 HTML Demo(双击即可在浏览器打开),无需任何安装。

    数据保存在浏览器 localStorage,刷新页面不丢失。

    第四步:持续改进(双向往返)

    重点:这步是双向往返,不是单向交付。
    Demo 出来后,你可以:
    - 改 PRD 后重生成(场景 A) - 加字段、改功能
    - 把对话里说过的新需求合并到 PRD(场景 B) - 让 PRD 持续完善
    - 重大改动重生成(场景 C) - 流程推翻时,自动冻结老版本、迁移数据
    - 视觉微调(场景 D) - 直接改代码,跳过 PRD
    详细的 4 场景规则,读 walkthrough-hr-recruitment.md 看完整演练。

    第四步:持续改进

    你看到 Demo 后,可以继续提具体改进建议:

    加一个搜索框,能按客户名搜
    这个状态颜色换一下
    增加导出 Excel 功能
    改成深色模式

    Skill 会基于现有 Demo 迭代,而不是重新生成。

    内置的 3 个示例 Demo

    在 outputs 目录下,Skill 已经为你准备了 3 个完整可用的 Demo,作为参照基线:

    每个 Demo 都包含:

  • 左侧主导航 + 顶部固定栏
  • 浅色/深色主题自动切换
  • 完整的 CRUD(新增、编辑、删除,真能用)
  • 数据持久化(localStorage)
  • 移动端适配
  • 响应式设计
  • 你能拿这些 Demo 做什么

    场景一:内部业务工具

    很多公司有大量"业务专用"的小工具需求(招聘、客户跟进、订单管理、合同审批),用 Excel 管理、用微信群沟通,效率低又没有数据沉淀。你可以用这个 Skill 让员工自己描述需求,10 分钟生成一个原型,自己试用一周,确认有效后再考虑正式开发。

    场景二:原型验证

    新业务想法要不要做?做个原型跑 2 周,看用户行为,决定要不要投入正式开发。Skill 生成的 Demo 单文件 HTML,可以直接发邮件给同事用,完全够用做早期验证。

    场景三:培训交付物

    在 Codex 培训中,你可以让学员按自己的业务部门(HR、销售、运营、客服)各做一个 Demo,作为实战作业。Skill 本身已经准备好模板,学员只需要专注于业务理解和需求描述。

    技术原理(给好奇的同事)

    生成的 Demo 都是单文件 HTML,使用以下技术栈(全部通过 CDN 加载,无需安装):

  • Tailwind CSS — 原子化样式,实现 Vercel / shadcn UI 风格的现代设计
  • Alpine.js — 轻量响应式数据绑定,实现 CRUD、看板拖拽等交互
  • lucide — 开源图标库
  • localStorage — 浏览器本地存储,数据不丢失
  • 学员不需要懂任何代码。如果你想看懂实现,所有 HTML 文件都可以在浏览器"查看源代码"看到完整结构。

    常见问题

    Q:生成出来的 Demo 可以上线给真实用户用吗?

    A:Skill 生成的 Demo 是单文件 HTML + localStorage,适合内部试用和原型验证。给真实用户用需要:后端 API(数据存服务器而不是浏览器)、用户登录鉴权、HTTPS 部署。但作为"业务可行性验证"工具,完全够用。

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

    A:存在你浏览器的 localStorage 里,Key 是 "<产品名>__data_v1"。除非你手动清空浏览器数据,不会丢。每个 Demo 的"设置"页都有"导出数据"按钮,可以把数据导出成 JSON 文件备份。

    Q:可以多人协作吗?

    A:当前版本是单浏览器版本,不支持多人实时协作。如果需要多人用,可以让每个人在浏览器里独立用,然后定期汇总数据(用"导出数据"按钮)。后续可以考虑做后端版本。

    Q:能改成英文界面吗?

    A:可以。告诉 Skill "把界面改成英文",它会重写。

    Q:怎么部署给团队用?

    A:把生成的 index.html 文件发到公司内网(Confluence / 钉钉 / 飞书),或者扔到公司内部静态网站托管(Vercel / Netlify / 阿里云 OSS),同事打开链接就能用。

    端到端演练 demo(必读)

    把上面的"快速开始"流程跑一遍,你会发现真正难的是 Demo 出来之后的反复修改。 我们准备了一份完整演练,模拟一个真实学员(HR 专员小王)用本 Skill 跑 4 个场景的全过程:

  • walkthrough-hr-recruitment.md - HR 招聘后台,从 0 到 v1.0,完整跑 4 个场景
  • student-checklist.md - 学员作业 checklist,100 多项可勾选,边做边填
  • walkthrough 是「老师讲你看」,checklist 是「你自己做」,两份配合用。

    checklist 包含:10 节(基本信息 / 阶段一二三 / 场景 ABCD / 最终交付 / 自评打分 / 提交物),142 个可勾选项,每节带「判定标准」「反模式自检」「实地验证」,最后有 100 分制自评 + 常见挂科 10 项。

    用法:复制到 outputs/checklist-<产品名>.md,边做边勾,做完后这份文件作为过程文档一并提交给讲师。

    建议学习路径:玩 demo(10 分钟)→ 读 walkthrough(15 分钟)→ 拷 checklist 开始自己做。

    Skill 触发词参考

  • "用业务助手智能体做一个 XX 管理系统"
  • "我要做一个 HR 招聘 / 销售跟进 / 会议纪要 / 客户管理 / 订单管理 / 请假审批 工具"
  • "我要用 Codex 做网页应用,业务是 XX"
  • 直接说:"打开业务助手智能体"
  • CHANGELOG.md · 版本历史
    walkthrough-hr-recruitment.md · 完整演练