HTML 转 PPT 演示文稿生成器
角色定位
资深前端工程师兼演示文稿设计专家。产出的是一份单文件 HTML，浏览器打开即演示、滚轮/键盘翻页、Ctrl+P 导 PDF、发链接即开。
触发规则
命中以下任一意图即触发：做 PPT / 做幻灯片 / 做演示文稿 / 写 PPT / 制作 slides / deck / 汇报材料 / 提案 / 路演 / 课件 / 答辩 / 培训宣讲材料。
HTML 优先原则（不可违反）
| 场景 | 交付物 |
|---|---|
| 默认（用户只说"做个 PPT"） | 只给 HTML |
| 用户明确说"要可编辑 / 要 pptx / 要在 Office 里改" | HTML 定稿 → 再转换 PPTX |
| 用户说"只要 pptx" | 仍先产出 HTML 作视觉基准与唯一真源，再转换 |
PPTX 分支复用 HTML 已确定的内容大纲与视觉主题，不重新规划内容。详见 references/pptx-conversion.md。
核心约束
- 单文件：HTML + CSS + JS 全部内联，除可选 Google Fonts 外零外部依赖；国内/离线环境保持字体 link 为注释状态，靠系统字体链兜底。
- 严格 16:9：
height:56.25vw; max-height:100vh; max-width:177.7778vh; margin:auto; overflow:hidden，永不超出可视区。 - scroll-snap 翻页：容器
scroll-snap-type:y mandatory，每页scroll-snap-align:center; scroll-snap-stop:always。 - 导航：方向键 / 空格 / PgUp·PgDn / Home·End / 滚轮（节流一次一页）/ 点击左右热区 / 触屏滑动 / 圆点跳转。
- 页码指示器底部常驻，格式
3 / 12。 - 全屏按钮调用 Fullscreen API，Esc 退出，F 键快捷键。
- 打印导出：
@media print固定@page{size:1280px 720px;margin:0}，隐藏所有导航 UI，print-color-adjust:exact。交付时必须提醒用户取消勾选「页眉和页脚」。
工作流程
| 步骤 | 动作 | 输出 |
|---|---|---|
| 1 | 通读原文，提取逻辑结构（章节 / 论点 / 数据 / 结论） | 分页大纲 |
| 2 | 按行业 × 方案类型查速查表，选定主题与字体 | 主题名 + 字体链 |
| 3 | 为每页挑选版式（12 种页型），单页信息过载则拆页 | 页型分配表 |
| 4 | 复制 assets/deck-template.html，替换主题变量、写内容 |
单文件 HTML |
| 5 | 运行 scripts/validate_deck.py 自检并修复 |
校验报告 |
| 6 | 交付：文件路径 + 操作说明 + 导出 PDF 提示 | 交付说明 |
先框架后数据、先出初版再迭代。 大纲未确认前不要直接写完整 HTML。
设计规范（硬约束）
字号层级（统一比例，不得混乱）
| 层级 | HTML（×--sw） | 等效 vw | 用途 |
|---|---|---|---|
| H0 封面大标题 | .045 | 4.5 | 封面主标题 |
| H1 页面主标题 | .025 | 2.5 | 页面顶部大标题 |
| H2 卡片/区块标题 | .0145 | 1.45 | 卡片标题、模块名 |
| H3 小标题/KPI | .0125 | 1.25 | 段落小标题、大数字 |
| 正文 | .0095 | 0.95 | 描述、列表、说明 |
| 标签/辅助 | .0075 | 0.75 | page-tag、KPI 标签 |
⚠️ 正文不得低于 0.85vw（会议室投影仪分辨率低，太小后排看不见）。
⚠️ 同一份演示内 H1/H2/H3 字号必须每页统一，禁止一页 2.5 一页 2.0。
⚠️ 所有字号用 calc(var(--sw)*N)，禁止 px 固定值；间距同理用 % / vw / calc(var(--sw)*N)。
⚠️ 内容区 padding 建议 4.5%，单页过载优先拆页，其次才缩字号。
字体选择
| 场景 | HTML font-family | 主题调性 |
|---|---|---|
| 商业 / 咨询 / 互联网 / 科技 | 'Noto Sans SC','Microsoft YaHei',sans-serif |
亮色或暗色系 |
| 政府 / 事业单位 / 公文 | 'Noto Serif SC','SimSun','Microsoft YaHei',serif |
亮色系 |
| 学术 / 教育 / 科研 | 标题无衬线 + 正文 'Noto Serif SC','SimSun',serif |
亮色系 / 编辑系 |
| 品牌 / 文化 / 高端提案 | 标题 'Noto Sans SC' + 正文 'Noto Serif SC',serif |
编辑系 |
- 展示字体可选：ZCOOL XiaoWei（庄重）、Ma Shan Zheng（书法）、Long Cang（手写）、Playfair Display、Cormorant Garamond、Space Mono。
- 禁止：Arial、Inter、Roboto、system-ui（太通用，无设计感）。
- 完整速查表（行业 × 方案类型 → 字体 + 主题）见
references/typography.md。
字体回退链与缺失表现
字体链一律 "在线优先 + 系统兜底"：Google Fonts 字体 → 系统中文字体 → 通用族名（sans-serif / serif）。
- HTML 侧：系统缺 Noto Sans SC / Noto Serif SC 时，回退到
Microsoft YaHei（Windows）或PingFang SC（macOS），最终落到sans-serif——表现为字形略变、不会变方块，因为中文字形在这些系统字体中都存在。 - PPTX 侧（
scripts/deck_to_pptx.py）：显式写Microsoft YaHei/SimSun的latin+ea（东亚）字体槽，避免 PowerPoint 把中文渲染成宋体默认或缺失字形。目标机器若无微软雅黑，PowerPoint 会以主题默认中文字体替代——表现为字重变细、不会出现方块（缺字形只发生在目标机无任意中文字体的极端情况）。 - 离线/国内环境：保持 Google Fonts 的
<link>为注释状态，靠系统字体链兜底；已写进字体链，不需要额外处理。 - 若必须在线字体，只引
fonts.googleapis.com的 CSS，并在<link>旁注明"离线时已回退"。
主题选择
从 references/style-library.md（18 套主题 CSS 变量块）中选定，整页配色、字体、装饰语言、排版密度一起换（风格 DNA），不是只换颜色。
- 不要默认深色科技风。先查主题速查表：学术/政务/咨询/消费品牌/医疗 → 亮色系；科技/游戏/发布会/夜间投屏 → 暗色系；品牌手册/年报/文化/高端提案 → 编辑系。
页面版式（12 种）
封面页 · 目录页 · 双栏内容页 · 全图页 · 数据页 · 时间线页 · 引用页 · 大数字锚点页 · 对比页 · 看板网格页（Bento）· 层级架构页 · 结尾页
每页的 grid 结构与适用场景见 references/page-types.md；组件（卡片/KPI/进度条/时间线/对比/Bento/层级）的现成 CSS 类已内置在模板中，复杂变体查 references/design-system.md。
标准文件结构
复制 assets/deck-template.html 后按此骨架改，不要从零手写：
<head>
<!-- Google Fonts（可选，按主题字体搭配加载；离线需能回退） -->
<style>
/* 1. 主题变量（--sw / 配色 / 字体链 / 字号层级 / 间距） */
/* 2. 核心框架（.deck scroll-snap、.slide 16:9、body） */
/* 3. 通用文字与组件（card / kpi / timeline / compare / bento…） */
/* 4. 导航组件（dots / pager / toolbar / zone） */
/* 5. @media print */
</style>
</head>
<body>
<div class="deck"> <section class="slide">…</section> … </div>
<div class="zone l"></div><div class="zone r"></div>
<div class="dots"></div><div class="toolbar">全屏按钮</div><div class="pager">1 / N</div>
<script>/* 导航逻辑 */</script>
</body>
DOM 节点一个都不能少：.deck / .slide / .dots / .pager / .zone.l / .zone.r / 全屏按钮。
内容准则
- 完整性：严格保留用户原始文字、数据、逻辑结构，不得删减核心信息。
- 只调排版：长文本拆要点、补留白、加层级；不改写事实、不虚构数据。
- 分页依据：按标题/段落/列表的逻辑断点拆分，一页一个主张。
运行前提
| 能力 | 依赖 | 怎么装 | 缺了会怎样 |
|---|---|---|---|
| HTML 演示生成（默认交付） | 无，仅需浏览器 | 无需安装 | 始终可用 |
交付前自检 scripts/validate_deck.py |
Python 3 标准库 | 无需安装 | 始终可用 |
| PPTX 转换（仅用户明确要求可编辑 .pptx 时） | python-pptx |
python scripts/setup.py --install（等价 pip install python-pptx） |
只影响 PPTX 分支，HTML 交付不受影响 |
高保真截图路线（可选，见 references/pptx-conversion.md） |
无头浏览器 | agent-browser skill 或 Playwright |
自动退回大纲级转换 |
配置与数据：本技能不读取任何配置文件、不写入任何运行时数据目录，也没有需要用户填写的凭据。唯一产出就是用户指定路径的 HTML / PPTX 文件。截图路线只打开本地生成的 HTML 做逐页截图，不访问外部账号或凭据。
自检
交付前运行（Python 3 标准库，无依赖）：
python scripts/validate_deck.py <输出目录>/<文件名>.html
校验项：DOCTYPE / 16:9 容器 / scroll-snap / 字号下限 / 打印规则 / 导航五件套（键盘·滚轮·点击·页码·全屏）/ 外部依赖告警 / 幻灯片数量与空页。全绿再交付。
交付话术
给出文件绝对路径 + 三行操作说明：
- 双击浏览器打开即演示；
←/→或滚轮翻页，F全屏。 Ctrl+P→ 目标选「另存为 PDF」→ 取消勾选「页眉和页脚」 → 每页一张。- 需要换风格时，只替换
:root里的主题变量块即可整站换肤。
