Menu
当用户提到「PPT」「宣讲材料」「SOP 手册」「多 Tab 信息文档」时触发，产物为 HTML 多 Tab 信息文档。「方案文档」走 prd skill（方案型项目）。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
当需求涉及多系统对接 / 资金流转，或用户提到「架构图」「技术架构」时触发。超复杂链路中场景清单后、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 调用