CaufieldZ
CaufieldZ/pm-workspace-public
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/CaufieldZ/pm-workspace-public --skill ppt命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 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 调用