Menu
当用户提到「PPT」「宣讲材料」「SOP 手册」「多 Tab 信息文档」时触发，产物为 HTML 多 Tab 信息文档。「方案文档」走 prd skill（方案型项目）。
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
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.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/CaufieldZ/pm-workspace-public --skill pptThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
| 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 演讲 / 信息文档（等同 PPT 给人讲方案），支持演讲提词器。两套生成骨架：
vendor-editorial（衬线杂志感 + teal/amber 双语义 + 浅深双底）。deck-fill.js 生成。fill-template.js 生成。何时触发：用户说「PPT / 宣讲材料 / SOP 手册 / 多 Tab 信息文档」。演讲 / 方案宣讲默认走纯 deck；长 SOP 手册 / 需侧边导航走 sidebar Doc。
不做：方案型项目文档（归 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（不可改签名）：
fillDeck({ title, theme, acts, slides, outputPath }) — assets/deck-fill.js 拼纯 deck（默认范式）fillTemplate({ title, theme, nav, renderers, notes, outputPath }) — assets/fill-template.js 拼 sidebar Doc 模式python3 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_deck_v{N}.js # 纯 deck（fillDeck）／或 gen_ppt_v{N}.js（fillTemplate）
python3 scripts/check_cjk_punct.py deliverables/ppt-*.html --strict
深入读什么：语法骨架 Read references/deck-grammar.md（必读 · 纯 deck 范式在上半部）；Step 0 澄清门 Read references/ppt-step0-clarification.md；sidebar Doc / Deck 双模式 Read references/doc-deck-modes.md；Step 6 口播稿 Read references/ppt-notes-docx.md；sidebar 组件 grep -n "^### " references/components-cheatsheet.md 按需。
deck-template.html；sidebar Doc = 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 {}opacity/transform .5s），保持杂志感克制anim-rise-in 等 27 个来自 assets/animations.css，混 3-5 个看着乱。cover→anim-rise-in；bullets→anim-stagger-list；KPI→countergrep -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：
纯 deck 范式（默认）：
fit() 整体缩放贴合窗口--paper #F4F5F6 / 深底 --ink #15181C（封面 / 章节转场 / 收尾用深底）vendor-editorial：teal #0F726B + amber #A86A22 双语义色sidebar Doc 模式（可选）：
--bg2；主内容区 max-width 1200px#1F1F1E改视觉风格新增独立 theme，不改 tokens.css 全局：PPT 想换配色 / 字体调性时新建一套 theme 变量集，别动 _shared/claude-design/tokens.css 的共享 token——那份被 imap / prototype 依赖，必须保留业务蓝等既定语义色。
references/components-cheatsheet.md）deck-template.html 已内置正确 <link>，vendor-editorial 主题把 --cd-mono 切 IBM Plex Mono。三字体分工见 deck-grammar.md §一<link> = 实际用到的字体，不照搬 tokens.css 注释里的完整 CDN URL。sidebar Doc 模式 CJK 最小集 = Noto Sans SC + Noto Serif SC + JetBrains Mono--cd-sans / --cd-serif 中文字体必须排在英文字体前（tokens.css 默认已 CJK 优先）PPT 用法分四类（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）。
写任何页面之前，先确认所用类都在对应模板的 <style> 里定义（纯 deck = deck-template.html，sidebar Doc = ppt-template.html）。下例为 sidebar Doc：
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 生成。先按形态选模板：
纯 deck 范式（默认 · 演讲）：
assets/deck-script-template.js 到项目 scripts/gen_deck_v{N}.js 改写<section class="slide">），调 fillDeck({ title, theme:'vendor-editorial', acts, slides, outputPath })deck-template.html；四层骨架 + 浅深交替 + 五幕 ACTS 见 deck-grammar.md §一sidebar Doc 模式（可选 · 长文档 / SOP）：
assets/script-template.js 改写（fillTemplate 调用 + NAV / PAGE_RENDERERS 结构）.claude/runbooks/html-build-split.md纯 deck：按五幕叙事逐页填 slides 数组，每页对应一个 <section class="slide">。页面类型 → 组件映射见 deck-grammar.md §一 可复用组件（card-grid / bluf-grid / track-3 / code-block 等）。
sidebar Doc：按确认的大纲逐 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 模板 / 排版规格 / 写作要求）。
通用：
</html> 存在）ppt-{主题}-v{N}.html 规范check_cjk_punct.py --strict 通过纯 deck 范式：
deck-template.html <style> 中定义（不发明新 class）.slide.dark，论证页浅底）← → / Space 翻页，Home/End 跳首尾，边缘点击可翻fit() 缩放贴合窗口.deck-foot + .pagenum 占位（运行时注入页码）sidebar Doc 模式：
assets/ppt-template.html 的 <style> 中有定义（唯一类名源 · Step 3.0 类名预检；components-cheatsheet.md 仅人读速查）P 键可进入 Deck 模式（sidebar / header 消失，全屏横排翻页）→ / Space 翻页，ESC 退出回 Doc 模式data-step 的元素在 Doc 模式下全显；Deck 模式下默认隐藏，按 → 逐步揭示#deck:{pageId} 刷新后直达 Deck 模式定位到该页| 文件 | 触发条件 |
|---|---|
.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 | ⚠️ 归档参考：素材已移至 assets/archive/full-deck-refs/，本文为历史索引 |
references/page-layouts.md 内单页样例 | ⚠️ 归档参考：HTML 已移至 assets/archive/page-layouts/，layout 名仍可 grep |
references/presenter-notes.md | 逐字稿方法论（演讲型门附逐字稿三铁律 + S 键独立 popup 提词器） |
纯 deck 范式（默认）：
assets/deck-template.html — 1280×720 舞台 + ~20 组件 + code-block，由 deck-fill.js 拼接（唯一类名源）assets/deck-fill.js — fillDeck(...) 拼 slides 数组；assets/deck-runtime.js — 注入的运行时（翻页 / ACTS / fit）assets/deck-script-template.js — 项目 gen 脚本范例，复制到 scripts/ 改写sidebar Doc 模式（可选）：
assets/ppt-template.html — 骨架 CSS + JS，由 fill-template.js open().read() 自动拼接assets/fill-template.js / assets/script-template.js / scripts/gen-notes-docx.py / assets/presenter-mode.js — 脚本，通过 node / python3 调用