| name | html-slides |
| description | 单文件 HTML 幻灯片（Han Xiao 式固定舞台 deck）的制作方案。当需要做网页版 slides、HTML 幻灯片、会议演讲 deck、或希望用浏览器直接放映且导出 PDF 的演示文稿时使用。触发词："HTML slides""网页幻灯片""单文件 deck""hanxiao 风格 slides""做个网页版演讲稿"。 |
html-slides
用一个手写的单文件 HTML 制作会议级演示文稿。方法源自 Han Xiao（Jina AI）的
公开演讲 deck（如 hanxiao.io/aie-sf-2026）：无框架、无构建步骤，浏览器直接
打开放映，Chrome 打印导出 PDF 交付会务。
When To Use
- 需要视觉风格完全可控、能在线分享（一个 URL）的演讲 slides
- 需要图表标注与正文风格像素级统一（手写 SVG，而非图表库截图）
- 不适用：需要多人协作编辑的场景用 PPT/Slides；内容型交互网页用
interactive-html；学术 beamer 需求用 rhetoric-of-decks
叙事与修辞（标题写论断、一张 slide 一个想法、三幕结构）遵循
rhetoric-of-decks 的原则，本 skill 只负责"HTML 这种载体怎么做"。
核心机制（不可省略的三件事）
- 固定舞台 + 等比缩放：
#stage 固定 1280×720，所有排版用绝对 px；
JS 按 min(vw/1280, vh/720) 缩放整个舞台。绝不写响应式断点——
固定坐标系是排版永不破版的前提。
- 设计 token + 语义组件：颜色只在
:root 定义，纪律是"颜色即
角色"——每个语义色全场固定代表一个叙事角色，语义色不超过 3 个；
每种修辞成分一个 class（金句、对比卡片、流程图、大数字、
三线表……），slide 内不写内联颜色和字号。
- 图表手写 SVG：用 15 行工具箱（
el/txt/mount）逐图绘制，
数据放独立的 data.js。不用图表库——风格统一和图内结论性标注是
这套方法的核心卖点。
完整机制拆解（导航、深链接、CSS 动画、打印适配、手机遥控）见
references/anatomy.md。
Workflow
- 大纲先行：每张 slide 写一句论断式标题（不是"结果"而是"X 提升了
61%"），排出三幕结构，并按
references/design-catalog.md 的
内容→组件决策表为每页标注版式。自检信号（非硬性）：纯文字版式
连排多页时停下来问一遍——这些内容的形态是不是其实是对比/趋势/
流程，能画就画。大纲连同版式标注一起与用户确认后再动手。
- 起步模板：复制
assets/template.html 到工作目录，重命名为
index.html。模板内置 6 种版式（标题页/编号要点/对比卡片/流程图+
大数字/SVG 折线图/金句结尾）。
- 定设计 token：优先从
references/design-catalog.md 的主题预设
起步（默认 warm-cream 暖米+橙；另有 elastic-blue），或按用户品牌改
:root 变量。颜色即角色：--accent/--foil/--teal 只是默认
角色位（主角/对照/中性），按主题实际分配——无对抗性的主题
--foil 可整场缺席；角色多于 3 个时不加第四色，改用分组或同色
深浅（见 design-catalog §4）。不要引入灰色文字——层级靠字号和
字重区分。
- 逐张生成 slide：每张一个
<section class="slide">，只用语义组件
拼装。缺组件时先看 references/anatomy.md 的组件清单；确实没有就
按 references/design-catalog.md §4 的生成语法造新组件——符合语法
的新组件天然和全场和谐（样式进 <style> 统一管理，不写内联）。
- 图表：先在
references/design-catalog.md 的配方库里选图型
（折线/分组柱状/堆叠条/坡度图/热力图/散点/时间轴/盒线图）。数据写进
data.js（const DATA = {...}），每图一个 drawXxx() 函数挂到对应
容器 id。坐标轴刻度、单位、图内 legend、结论性标注（直接写在数据点旁）
都要有；legend 放数据空白区，截图确认不与数据重叠。
- 验证：用
scripts/screenshot.sh <file> <页码...> 无头截图逐张检查
溢出与对齐（内容超出 720px 高度是最常见问题）。有 figure-checker
可用时交给它做视觉 QA。
- 交付：告知用户放映方式（浏览器打开，方向键翻页、
f 全屏、
点击左 1/3 后退右 2/3 前进、#N 跳页）；需要 PDF 时 Chrome 打印、
纸张自定义 1280×720px、无边距。需要手机遥控翻页时按
references/anatomy.md 的 sync 方案加装。
常见坑
- 字号低于 13px 在投影上不可读；正文不小于 16px
- 每张 slide 内容超出 720px 不会滚动，只会被裁掉——宁可拆页
@media print 里必须关闭所有动画，否则 PDF 导出会截到中间帧- MathJax 只在确有公式时引入（本地 vendor 文件，不走 CDN）
.kicker/.tag 等 mono 标签常带 text-transform:uppercase，会把
希腊字母 τ/π 转成大写破坏数学记号——含公式符号的标签要加
text-transform:none
