Menu
当用户提到「PPT」「宣讲材料」「SOP 手册」「多 Tab 信息文档」时触发，产物为 HTML 多 Tab 信息文档。「方案文档」走 prd skill（方案型项目）。
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
当需求涉及多系统对接 / 资金流转，或用户提到「架构图」「技术架构」时触发。超复杂链路中场景清单后、IMAP 前自动接续；也适用于系统设计文档、技术方案评审、风险分析、Phase 路线图等。
「竞品分析 / 调研 / 抓情报 / 采集 XX」触发，丢竞品截图或链接亦触发。「截图 / 截一下」单独不触发。
当 PRD 完成后最终交付前验收，或用户说「拉通检查」「校验一下」「检查一致性」「reader test」时触发。 7 维结构性校验已脚本化（PRD 写入自动跑），本 skill 保留两件脚本替代不了的事：① 多 ❌ 项的修复优先级编排 ② Reader Testing 评审实践。
「流程图 / 泳道图 / 审批流 / 状态机」触发。引擎自动选（mermaid / drawio），输出 .svg + .png 供 PRD / IMAP / PPT / 架构图 `<img>` 引用。
当用户提到「交互大图」「交互流程图」「IMAP」时触发。 场景清单确认后进入视觉化阶段自动接续触发。
MRD 评审 / 价值评审 / 该不该做触发。判断市场窗口 + UE 模型，输出投票表 + 评审意见。已有报告迭代修改直接编辑 deliverables/mrd-review-*.md，不走此 skill。
| name | ppt |
| description | 当用户提到「PPT」「宣讲材料」「SOP 手册」「多 Tab 信息文档」时触发，产物为 HTML 多 Tab 信息文档。「方案文档」走 prd skill（方案型项目）。 |
| argument-hint | ["内容大纲文件 或 口述大纲"] |
| type | standalone |
| output_format | .html |
| output_prefix | ppt- |
| depends_on | [] |
| optional_inputs | ["baseline"] |
| consumed_by | [] |
| scripts | {"gen-notes-docx.py":"导出演讲者备注 docx — python3 gen-notes-docx.py <html>"} |
做什么：把方案 / SOP / 方法论类内容生成 HTML 多 Tab 信息文档（等同 PPT 给人讲方案），Doc / Deck 双模式内置，支持演讲提词器。
何时触发：用户说「PPT / 宣讲材料 / SOP 手册 / 多 Tab 信息文档」。
不做：方案型项目文档（归 prd skill）/ 项目内链路型架构图（归 architecture-diagrams，按 13 种页面类型输出）。
与 architecture-diagrams 区别：arch 依赖 scene-list + baseline 项目链路；ppt 独立产出型，不依赖任何链路，用户提供内容大纲。
用途：团队分享 / 对外宣讲 / 方法论沉淀 / SOP 手册。
hook 守的是「Read 过本文件」不看读了多少行。改 scripts/*.py 用
Read 此文件 limit=80（§1+§2 即够）。改产出物建议全文 + Readassets/fill-template.js。
Public API（不可改签名）：
fillTemplate({ title, theme, nav, renderers, notes, outputPath }) — assets/fill-template.js 拼出 HTMLpython3 gen-notes-docx.py <html> — 导出演讲者备注 docx会拦你的 hook：
post-script-syntax-check / post-cjk-punct-checkpre-skill-load-gate — 改 ppt-*.html 必先 Read 本 SKILL.md改完跑啥：
node scripts/gen_ppt_v{N}.js # 项目脚本（fillTemplate 调用）
python3 scripts/check_cjk_punct.py deliverables/ppt-*.html --strict
深入读什么：Step 0 澄清门 Read references/ppt-step0-clarification.md；Doc / Deck 双模式 Read references/doc-deck-modes.md；Step 6 口播稿 Read references/ppt-notes-docx.md；语法骨架 Read references/deck-grammar.md（必读）；组件 grep -n "^### " references/components-cheatsheet.md 按需。
ppt-template.html 是唯一类名来源（Step 3.0 类名预检兜底）scripts/sop-src/pages/{id}.js 或对应 source 文件，改完 node gen_{主题}_v{N}.js 重生。违反 = 下次迭代必定改错.claude/runbooks/html-build-split.md），不能把所有页面塞进单脚本--cd-* 变量源头 _shared/claude-design/tokens.css。脚本必须 fs.readFileSync(tokens.css) 拼进 CSS 模板，禁手抄 :root 整块 token。项目级扩展 token 在 tokens.css 后追加 :root {}anim-rise-in 等 27 个动画来自 assets/animations.css，混 3-5 个看着乱。cover→anim-rise-in / anim-blur-in；bullets→anim-stagger-list；KPI→counter；thanks→anim-confetti-burstgrep -nE '决策\s*[0-9]+|[A-G]-[0-9]+\s*(/\s*[A-G]-[0-9]+)*' deliverables/ppt-*.html | grep -v "scene-[a-g]" | grep -v "id=\""
scene-x anchor id / DOM id 不算违规，正文含「决策 N / A-N」即违规）projects/{项目}/deliverables/ppt-{主题}-v{N}.html（有项目关联）或 deliverables/（独立产出）ppt-{主题}-v{N}.htmlscripts/gen_ppt_v{N}.js（fillTemplate 调用范例见 assets/script-template.js）.claude/runbooks/version-bump.md继承 _shared/claude-design/tokens.css：
--bg2--bg: #0a0c10 系（claude-native 默认 #1F1F1E）references/components-cheatsheet.md）<link> = 实际用到的字体，不照搬 tokens.css 注释里的完整 CDN URL。CJK PPT 最小集 = Noto Sans SC + Noto Serif SC + JetBrains Mono--cd-sans / --cd-serif 中文字体必须排在英文字体前（tokens.css 默认已 CJK 优先）。Lora + Poppins 是 Anthropic 官方 brand-guidelines 钦定的免费字体，对标 claude.ai 实际用的 Tiempos + Styrene BPPT 用法分四类（SOP 手册 / 演讲材料 / 对外宣讲 / 方法论沉淀），用法差极大，门按用途分流：
完整规则 → Read references/ppt-step0-clarification.md（跳过条件 / 用途表 / 9 套主题清单 / 子门细则 / 逐字稿三铁律）。
必读规则（HTML pipeline 通用）：
view .claude/runbooks/html-pipeline.md
view references/deck-grammar.md # 每页四层骨架 + 样式约定 + 视觉主角轮换规则
grep -A 20 "决策速查" .claude/skills/_shared/claude-design/anti-ai-slop.md
核心原则：Step 1 只加载 deck-grammar.md（语法骨架）；其余 references 在 Step 2 大纲确认后，按页面 layout / 组件类型 / 叙事模式按需 grep 局部段，禁止全量 Read。
按需 grep（Step 2 大纲确认后）：
| 触发条件 | 查阅指令 |
|---|---|
| 每页归属哪个 layout | grep -n "^## Layout" references/page-layouts.md 看清单，再 grep -A 30 "Layout N — " |
| 写填充函数前确定要用的组件 | grep -n "^### " references/components-cheatsheet.md 看清单，再按 class 拉局部 |
| 叙事模板参考 | grep -n "^## " references/gold-snippets.md 看 8 种叙事模式，按页面定位选 1-2 种 |
| 含架构图 / 流程图形状 | grep -n "^## " references/shapes-toolkit.md 看 10 种 shape，按需 grep |
用户提供内容大纲（几个 Tab、每页什么内容）。模型整理为 NAV 结构：
NAV = [
{ group: '分组名', dot: 'green', items: [
{ id: 'tab-id', icon: '📍', label: 'Tab 标题' },
]},
];
确认要点：Tab 数量（建议 5-15 个）/ 每页类型（总览 / 对比 / 清单 / 表格 / 详解 / Prompt 展示）/ 是否需 modal 弹窗。等用户确认后进 Step 3。
去 AI 味 6 规则 + 推荐序列 + 反面教材 → 见 references/gold-snippets.md §7 节奏编排（单一来源，Step 4 填充前 grep -A 40 "^## 7" references/gold-snippets.md）。
写任何 PAGE_RENDERERS 之前，先确认所用类都在 ppt-template.html 的 <style> 里定义：
node -e "
const f = require('fs').readFileSync('.claude/skills/ppt/assets/ppt-template.html','utf8');
const used = ['page-hero','hero-headline','page-split','stat-card','grid2','grid3','grid4',
'flow-h','pipe','cmp-table','quote-block','eyebrow','hairline','display','section-label'];
used.forEach(c => console.log(c.padEnd(24), f.includes('.'+c+'{') || f.includes('.'+c+' ') ? '✓' : '✗'));
"
任一 ✗ 时停下：
page-layouts.md）→ 在 ppt-template.html <style> 里补定义（不要 inline 重写）style="..." inline 写，不发明新 class遵守 HTML > 200 行铁律，用 Node.js 生成。
脚本模板：复制 assets/script-template.js 到项目 scripts/ 目录改写（fillTemplate 调用范例 + NAV / PAGE_RENDERERS 结构）。
脚本拆分规则（Tab ≥ 8 或产出 > 1500 行）：详见 .claude/runbooks/html-build-split.md（档 A 轻量拆分 + 档 B orchestrator 编排 + 反向拆分方法）。
按确认的大纲逐 Tab 填充。每个 Tab 对应一个 PAGE_RENDERERS 函数。
页面类型 → 组件映射：
| 页面类型 | 推荐组件 |
|---|---|
| 呼吸页 | page-hero（hero-accent + hero-headline + hero-sub） |
| 分隔页 | page-split（split-num + split-title + split-desc） |
| 总览页 | stat-card + grid3 + note |
| 对比页 | grid2 双栏 + card |
| 清单页 | ck-item 列表 |
| 表格页 | cmp-table |
| 详解页 | card + note 混排 |
| Prompt 展示页 | prompt-block + modal |
| 竖向流程页 | pipe + pipe-node + pipe-arrow（≥ 5 步） |
| 横向流程页 | flow-h + flow-h-step（≤ 4 步） |
| 嵌套图页 | nest-outer/mid/inner |
| 金句页 | quote-block（em 高亮关键词） |
| 流程图页 | flowchart skill 独立产出 → 截图嵌入 |
| 架构图页 | 手画 platform-card 三段式 + 中央 callout，或 flowchart skill 截图 |
填充节奏：先填前 2-3 个 Tab → 用户确认方向 → 批量填剩余。
每个 Tab 填充后 2 层语法校验（任一不过立即修）：
node --check <生成脚本路径>：检查生成脚本本身（能抓 '\\n' 等字符串转义错误）node -e "new Function(scriptMatch[1])" 检查内嵌 <script> 块的 JS 语法仅校验第 2 层会漏掉第 1 层 bug。
Node.js 模板字符串规范：
const renderers = {
'overview': `
<div class="page active">
<div class="page-title">标题</div>
<div class="card"><!-- 卡片内容 --></div>
</div>
`
};
class="page"${} 需转义 \${}（很少见）演示模式 Doc / Deck 双模式 → Read references/doc-deck-modes.md（键盘操作 / NAV 扩展字段 / chrome / data-step / 大文档模式集成）。
# 1. Tab 完整性：NAV items 数量 = PAGE_RENDERERS 函数数量
grep -c "PAGE_RENDERERS\[" {产出物}
# 2. HTML 结构闭合
grep -c '</html>' {产出物}
# 3. Sidebar 可导航
grep "renderNav\|goPage" {产出物} | head -5
# 4. 每个 page 有 active class
grep -c 'class="page active"' {产出物}
# 5. 中文排版（pangu / heti，全工程唯一规则源）
# PPT HTML 是 node 脚本生成的，hook 触发不到，必须显式调
python3 scripts/check_cjk_punct.py {产出物} --strict
# RC=2 阻断；warn 级（中英文间空格 / 全角标点旁空格）只 stderr 提示，不阻断
PPT 是 fill-template.js 拼 PAGE_RENDERERS / NAV 数据驱动的，升版只改源文件重跑，禁直接 Edit HTML：
pages_*.js 中对应 renderer + nav 数组node scripts/gen_ppt_v{N}.js 出新版本 HTML老项目若还有手写 Edit / patch_ppt_* 脚本，参 leaderboard / activity-center 反向拆分思路：把 HTML 反向切回 pages_*.js 散件 + orchestrator，archive 老 patch 脚本。
HTML 产出物交付后按需生成 → Read references/ppt-notes-docx.md（触发规则 / 产物路径 / python-docx 模板 / 排版规格 / 写作要求）。
references/components-cheatsheet.md 中有定义</html> 存在）ppt-{主题}-v{N}.html 规范P 键可进入 Deck 模式（sidebar / header 消失，全屏横排翻页）→ / Space 翻页，ESC 退出回 Doc 模式data-step 的元素在 Doc 模式下全显；Deck 模式下默认隐藏，按 → 逐步揭示#deck:{pageId} 刷新后直达 Deck 模式定位到该页check_cjk_punct.py --strict 通过| 文件 | 触发条件 |
|---|---|
.claude/runbooks/html-pipeline.md | HTML pipeline 通用规则 |
references/deck-grammar.md | Step 1 必读（每页四层骨架 + 样式约定 + 视觉主角轮换） |
_shared/claude-design/anti-ai-slop.md | grep 决策速查表，不全量 Read |
| 文件 | 触发条件 |
|---|---|
references/ppt-step0-clarification.md | Step 0 需求澄清门完整规则（用途识别 / 主题色 9 套 / 子门细则 / 逐字稿三铁律） |
references/doc-deck-modes.md | Step 4 Doc / Deck 双模式细节（键盘 / kicker / data-step / 大文档模式集成） |
references/ppt-notes-docx.md | Step 6 口播稿 docx（触发规则 / python-docx 模板 / 排版规格） |
references/page-layouts.md | Step 2 大纲确认后按 layout 名 grep |
references/components-cheatsheet.md | Step 3 写填充函数前按 class 名 grep |
references/gold-snippets.md | 叙事模板参考（8 种叙事模式） |
references/shapes-toolkit.md | 含架构图 / 流程图形状（10 种 shape） |
references/full-decks.md | 15 套从真实作品提炼的整套视觉语言（Step 0.3 视觉锚点） |
references/presenter-notes.md | 逐字稿方法论（演讲型门附逐字稿三铁律 + S 键独立 popup 提词器） |
assets/ppt-template.html — 骨架 CSS + JS，由 fill-template.js open().read() 自动拼接assets/fill-template.js / scripts/gen-notes-docx.py / assets/presenter-mode.js — 脚本，通过 node / python3 调用