Ai Pm Atom Lesson

AI PM 原子课件生成技能

把一个原子知识点升级为一个单文件交互式 HTML 课件。核心信条:一个原子 = 一页课 = 一个可点着玩的直觉。 抽象概念之所以难,不是因为定义难背,而是因为学员脑子里缺一个"能亲手拨一下、看它怎么变"的模型。这个技能的全部工作,就是把每个原子变成那样一页。

输入与产物

• 输入:一个原子概念(一个词 / 一个短语)。可能来自《AI 产品经理知识体系》里的任意叶子节点,也可能是用户临时给的。
• 产物:一个 原子课-NN-名称.html——单文件、零外部依赖、双击即开、断网可用。

全流程四步 SOP

① 定位与研课 → ② 靶点与交互选型 → ③ 出稿 → ④ 自检交付

每一步都不要跳。先想清楚这个原子难在哪、该拿什么交互打它,再动手写 HTML。 写代码前必读两份参考文件:references/visual-spec.md(视觉规范)与 references/html-scaffold.html(可直接填的骨架);选 Demo 形式时读 references/interaction-catalog.md。

---

第 ① 步:定位与研课(先把这一个原子想透)

拿到原子后,先产出一张研课卡(不落文件,想清楚即可),回答六个问题:

1. 它在知识体系哪一层? 属于哪个能力域、是"懂原理 / 会设计 / 能落地"哪一层。→ 决定 Hero 的层级标签和整页语气(懂原理偏认知直觉,能落地偏操作判断)。
2. 权威定义 + 真实出处是什么? 找到这个概念可查的正源(原始论文 / 权威教材 / 官方文档 / 经典著作 / 权威百科)。→ 见下方【出处硬约束】。
3. 一句话本质是什么? 用大白话把它压成一句,作为通俗解释的锚。避免用定义解释定义。
4. 放进贯穿项目长什么样? 用母婴电商客评回复助手造一个具体场景(见【硬约束】)。场景要具体到能看见数据/话术,不能是空泛的"某个功能"。
5. 学员最容易误解 / 最反直觉的那个点是什么? 这是全课的靶心——它直接决定第②步 Demo 打哪儿。每个原子几乎都有一个"口头认同、内心不信"或"总是搞错"的点,把它揪出来。
6. 和相邻原子怎么勾连? 上一个原子回指、下一个原子埋伏笔(前向伏笔)。→ 落到正文的 🔗 提示句和页面底部的原子互链卡。

出处硬约束:定义必须转述,不照抄(尊重版权,也更好懂);出处必须真实存在、可顺藤查证,标注到"著作/文档 + 大致年代/条目名"这一级(例:亚里士多德《前分析篇》约公元前 350 年;休谟《人类理解研究》1748;某模型的官方文档条目)。宁可给一个稳妥的经典正源,也不要编一个看起来专业的假引用。 拿不准时用 web 检索核实,不要凭印象编造作者、书名、年份。

---

第 ② 步:靶点与交互选型(本技能的灵魂)

一个原子课固定放 2 个「动手实验室」,不多不少:

• 实验室 1 = 实操判断题(每课必有)。用刚讲完的定义反向出题——给场景让学员判概念/判对错,不出记忆题。2 道题为宜:一道考"是不是这个概念",一道考"这个概念最容易踩的坑"。
• 实验室 2 = 可视交互 Demo(每课必有,放在最后当压轴)。它只打第①步揪出的那个靶心,不贪多。

用四条标准给靶心打分,命中哪条就决定 Demo 形式(详细骨架见 references/interaction-catalog.md):

| 靶心类型 | 判断问题 | 选用的 Demo 形式 | |---|---|---| | 反直觉的数量/强度关系 | 结论是否与直觉相悖(越多≠越好、单步高≠整体高)? | 滑块计算器(实时重算+变色+封顶线+判词) | | 有确定规则/形式的推导 | 是不是"条件命中就唯一确定结果"的确定性逻辑? | 装配台(套规则→出必然结论,可拨前提真假) | | 过程 / 循环 / 流水线 | 本质是不是一个随时间展开的多阶段过程? | 逐步模拟器(日志逐条打出+节点点亮) | | 判断框架 | 是不是学员将来要反复用的"该不该/选哪个"决策? | 决策树(逐题选→出结论+预置案例代入) | | 易混淆的一组概念 | 有没有几个概念学员总分不清? | 切换对比器(同一素材,不同链路并置) | | 需记忆的分类知识 | 是不是一组要记住的类型/清单? | 翻牌卡片(先猜标题再翻详情) |

Demo 的判词必须落到 PM 决策语言,不能停在数字或现象。反面例子:"成功率较低"。正面例子:"🚨 大概率失败——要么缩短步数、要么加人工介入点、要么别用 Agent"。学员要的是"那我该怎么办",不是"这个数是多少"。

Demo 必须能亲手制造出那个反直觉/易错结果:打开就停在最有冲击力的状态(如滑块初值设在"样本很大、比例很高,强度却仍到不了必然"),让学员一进来就被"啪"一下。

---

第 ③ 步:出稿(套骨架,填五段)

复制 references/html-scaffold.html,按固定五段式顺序填充(顺序不可乱,这是学员的认知台阶):

Hero(眉题+原子名+层级标签+一句话定位+五步路径条)
→ ① 权威定义块(.def:定义转述 + .src 真实出处)
→ ② 通俗解释(大白话本质 + 🔗 相邻原子钩子)
→ ③ 贯穿项目案例(.case:流程图式呈现 + .pmnote PM 视角)
→ ④ 实操判断题(🟠 动手实验室 1)
→ ⑤ 可视交互 Demo(🟠 动手实验室 2,压轴)
→ 金句块(.takeaway:一句话点透本质)
→ 原子互链卡(上一个 / 下一个原子)→ Footer

视觉一律走 references/visual-spec.md:主题 A 教材青(浅色)、颜色语义硬约束(思考蓝 / 行动橙 / 框架青·通过 / 失败红)、动手实验室统一外壳。所有 CSS/JS 内联,原生 JS,SVG 手写,不引任何 CDN 或框架。

判断题引擎已在骨架里写好(data-ok="1" 标正确项、点击即判、逐项出讲解、支持键盘)——只需填题目和选项。Demo 部分从 interaction-catalog.md 抄对应形式的骨架再填数据。

---

第 ④ 步:自检清单(交付前逐条过)

• [ ] 五段式齐全且顺序正确;Demo 是最后一段(压轴)
• [ ] 恰好 2 个动手实验室:判断题 + 一个可视 Demo
• [ ] 权威定义是转述、非照抄;出处真实可查,不是编的
• [ ] 所有案例/交互素材都来自母婴电商客评回复助手这一个项目,没有另起炉灶编例子
• [ ] Demo 命中了第②步四标准里的某一条,且判词落到了 PM 决策语言
• [ ] 有一处相邻原子的钩子(回指或伏笔)+ 底部原子互链卡
• [ ] 颜色语义与 visual-spec 一致(思考蓝/行动橙/框架青/失败红),交互与静态统一
• [ ] 单文件、断网可用、双击无控制台报错
• [ ] 375px 宽无横向滚动;键盘可完成全部交互;prefers-reduced-motion 时动画关闭
• [ ] 无烹饪类比;无用金额比喻抽象价值;场景是中文用户熟悉的

---

硬约束(每次都适用)

• 贯穿项目唯一:所有案例与交互素材统一用母婴电商客评回复助手(帮商家自动处理店铺评价、生成回复话术)。不允许每个原子各编一个新项目。
• 禁两类比喻:不用烹饪类比(换成其它对照);不用金额/花钱来比喻抽象价值(直接说清它能达成什么)。
• 框架先于案例:先给定义/本质,再进案例;不要拿案例代替定义。
• PM 视角与工程实现分离:讲"产品经理该怎么判断、怎么决策",不陷进工程实现细节。
• 出处真实:见第①步【出处硬约束】。

命名与互链约定

• 文件名:原子课-NN-名称.html(NN 为两位序号,名称用中文原子名)。
• 底部互链卡:左"← 上一个原子"、右"下一个原子 →",href 指向相邻文件名;没有的一侧置灰(opacity:.55;cursor:default)。
• 同一批原子共用同一套 token 与结构,保证一系列课件同构、可翻页浏览。

五段式各段写作标准(填充时对照)

• Hero:眉题=原子课 · 能力域/子域;层级标签用真实层级(如"第一层 · 懂原理");一句话定位要点出这个原子"有用在哪 + 有个什么坑",不是复述定义。
• 权威定义块 .def:标签"权威定义";定义转述,句子里加粗关键判词(必然/或然/方向);.src 里给真实出处,出处: 开头。
• 通俗解释:先一句本质,再展开;必含一处 🔗 相邻原子钩子;可再加一处 🤖 AI 味钩子(把这个原子勾连到后面的大模型知识点)。
• 贯穿项目案例 .case:用 .flow 横向流程框呈现"输入→处理→结论";结尾 .pmnote(PM 视角,蓝底)必写;涉及"要小心"的点用 .warn(红底)。
• 判断题:2 题;每个选项都带讲解,错项讲解要指出误解具体错在哪,不是"再想想"。
• Demo:整段就干一件事——把靶心变成可操作直觉;判词落到 PM 决策。
• 金句块 .takeaway:标签"深刻理解的一句话";一句话,衬线字号,点透本质与边界。

交付话术

交付时讲教学设计决策,不罗列技术细节:① 这个原子的靶心是什么、Demo 为什么选这个形式;② 埋了哪些相邻原子钩子;③ 出处正源是什么;④ 邀请用户试用后指定要加深的地方。

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: uimarch123-arch
• Source: uimarch123-arch/ai-pm-atom-lesson
• License: MIT

Install and usage instructions live in the source repository linked above.