{"id":"c4977819-0d25-45cb-9763-527e1d745ce1","slug":"html-deck-kit","kind":"skill","name":"html-deck-kit","summary":"Spec + template + 6 themes + AI Skill for delivery-ready single-file HTML presentation decks (1600×900, speaker notes, 70% layout rule).","owner":"Gavinluo19","repoUrl":"https://github.com/Gavinluo19/html-deck-kit","license":"MIT","licenseTier":"permissive","trust":"community","stars":0,"match":null,"fewStars":true,"format":"skill","createdAt":"2026-10-27T15:49:41.000Z","addedAt":"2026-10-30T04:01:50.189Z","logoUrl":"https://avatars.githubusercontent.com/u/131426822?u=e1750626c9a78b36dfd8e32ad872015ac7737de7&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["browser-web","productivity","files-documents"],"tags":["css-themes","deck","html","presentation","slides","speaker-notes","training"],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-30T06:06:21.336Z","sample":false,"url":"https://conduits.dev/tools/html-deck-kit","language":"HTML","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# HTML Deck Kit · 交付级 HTML 演讲稿规范\n\n> 一套**规范 + 母版 + 6 套主题 + AI Skill**。把讲稿交给 AI，按规范生成一个可直接上台、可直接交付的单文件 HTML 演讲稿。\n> 人能读，AI 也能照做：Claude、Codex、WorkBuddy、Trae、飞书智能体都能用。\n\n![六套主题的封面](docs/img/overview-covers.jpg)\n\n---\n\n## 1. 它解决什么问题\n\nAI 生成的演讲稿常见三个问题：\n\n1. **能看，不能讲**：没有逐字稿，讲师上台不知道每一步说什么。\n2. **能讲，不能交付**：内容堆到页面底部，投到大屏后排看不见；换个场合要删页，只能重做。\n3. **每次都不一样**：今天一种风格，明天另一种风格，团队没法沉淀。\n\nHTML Deck Kit 用一份**严格规范**把这些固定下来：版面、字号、页面结构、讲稿、交互、案例写法、篇幅分档、主题，全部有明确规则；AI 只需要“照规范填内容”。\n\n## 2. 你会得到什么\n\n| 能力 | 说明 |\n|---|---|\n| 单文件交付 | 一个 `.html`，双击打开；图片内嵌，无视频，离线可用 |\n| 逐字稿 | 每页、每一步都有讲稿；S 键打开讲稿抽屉，P 键演讲者视图（带计时） |\n| 逐步弹出 | 只在“先问后答 / 层层深挖 / 案例拆解”时使用，其余一次性展示 |\n| 两档篇幅 | 精讲版 / 完整版一键切换（V 键）；模型卡、讲师页默认隐藏 |\n| 70% 版面规则 | 内容全部在画面上方 70%，大屏后排也看得见；L 键显示安全线 |\n| 字号可调 | + / − 六档放大正文，标题不变；内容满的页面自动停在安全上限 |\n| 6 套主题 | T 键切换：warm、mono、void、lunar、linen、stellar |\n| 13 种页面模板 | 封面、章节页、总分总地图、概念页、模型卡、表格、拆解、案例卡、计算器、四象限、分级卡…… |\n| 自动检查 | `tools/check_layout.py` 逐页检查 70% 规则与讲稿段数 |\n\n## 3. 六套主题\n\n所有主题共用同一组颜色变量（token），组件不写死颜色，所以换主题不需要改任何页面。\n\n| 主题 id | 名称 | 气质 | 主强调色 | 标题字体 |\n|---|---|---|---|---|\n| `warm`（默认） | 暖纸 | 温暖、学术、像纸质讲义 | `#C9623F` 陶土橙 | 衬线 |\n| `mono` | 极简黑白 | 克制、留白、工程感 | `#10A37F` 青绿 | 无衬线 |\n| `void` | 深空 | 全深色、科技、高对比 | `#1D9BF0` 亮蓝 | 无衬线 |\n| `lunar` | 月光 | 清爽、理性、蓝白 | `#1783FF` 月光蓝 | 无衬线 |\n| `linen` | 素白 | 安静、编辑感、浅色封面 | `#34507A` 墨蓝 | 衬线 |\n| `stellar` | 星光渐变 | 明亮、渐变、发布会感 | `#1A73E8` → `#9B72CB` → `#D96570` | 无衬线 |\n\n**同一页“总—分—总全课地图”在六套主题下的效果：**\n\n![六套主题的内容页](docs/img/overview-content.jpg)\n\n
逐个主题看（封面 · 全课地图 · 概念页 · 案例卡）\n\n**warm · 暖纸**\n![warm](docs/img/theme-warm.jpg)\n\n**mono · 极简黑白**\n![mono](docs/img/theme-mono.jpg)\n\n**void · 深空**\n![void](docs/img/theme-void.jpg)\n\n**lunar · 月光**\n![lunar](docs/img/theme-lunar.jpg)\n\n**linen · 素白**\n![linen](docs/img/theme-linen.jpg)\n\n**stellar · 星光渐变**\n![stellar](docs/img/theme-stellar.jpg)\n\n
\n\n> 主题中不含任何品牌标志或专有字体。\n\n## 4. 快速开始\n\n### 方式 A：直接用模板（不用 AI）\n\n1. 打开 `template/deck-template.html`，看 13 种示例页。\n2. 复制需要的 `
`，改文字。\n3. 改 `` 选默认主题。\n\n### 方式 B：交给 AI（推荐）\n\n把整个 `html-deck-kit` 文件夹交给 AI，第一句话：\n\n```\n请先阅读 html-deck-kit/SKILL.md 和 references/01-spec.md，严格按规范，\n以 template/deck-template.html 为母版，把附件讲稿做成 HTML 演讲稿。\n默认主题 warm，精讲 45 页左右。先给我逐页大纲，我确认后再做页面。\n```\n\n不同工具的接入方式见 [`references/06-prompts.md`](references/06-prompts.md)。\n\n### 方式 C：安装为 Claude Skill\n\n把 `html-deck-kit` 文件夹（含 `SKILL.md`）放入 Claude 的 Skills 目录或在 Claude.ai 上传为技能。之后直接说“用 deck-kit 做演讲稿”。\n\n## 5. 规范速览（完整版见 `references/01-spec.md`）\n\n```\ny=0 ┌──────────────────────────────────────────┐\n │ 眉标：第 N 章 · 第 N 步 · 页面类型（17px） │\n │ 标题：一句完整的判断（46px，≤ 2 行） │\n │ 模型：模型名 —— 一句白话（用到模型时必须有） │\n │ 正文：表格 / 卡片 / 图 / 交互 │ ← 上 70%\n │ 结论行：一句话，紧跟正文 │\ny=630 ├ ─ ─ ─ ─ ─ ─ ─ 70% 安全线（L 键） ─ ─ ─ ─ ─ ─┤\n │ │ ← 下 30%\n │ 页脚：出处 · ● 说明：模拟数据，仅供参考 · 页码 │ 只放页脚\ny=900 └──────────────────────────────────────────┘\n```\n\n**不可违反的 10 条：**\n\n1. 单文件 HTML，1600×900 画布，不改引擎。\n2. 正文与结论行全部在 y ≤ 630px；结论行紧跟正文。\n3. 标题 46px、眉标 17px 固定；正文 ≥ 18px。\n4. 每页有 id、标题、重点、时长和逐字稿；讲稿段数 = 弹出步数 + 1。\n5. 默认一次性展示；只有“先问后答 / 层层深挖 / 案例拆解”才逐步弹出，每页 ≤ 4 步。\n6. 用到模型的页面必须写出模型名 + 一句白话；模型卡只讲一次，默认隐藏。\n7. 概念用三段式：一句话 / 生活例子 / 怎么用。\n8. 数字与引语照抄并写出处；模拟数据、示意、解读写进页脚“说明”。\n9. 不放视频；不用品牌标志；颜色只用变量。\n10. 必须有“总—分—总”全课地图页。\n\n## 6. 快捷键\n\n| 键 | 作用 | 键 | 作用 |\n|---|---|---|---|\n| → / 空格 | 下一步 | ← | 上一步 |\n| G | 目录（可隐藏单页） | S | 逐字稿 |\n| P | 演讲者视图 | F | 全屏 |\n| **T** | 换主题 | **V** | 精讲 / 完整 |\n| **+ / −** | 正文字号 | **L** | 70% 安全线 |\n| H | 显示隐藏页 | B | 从模型卡返回 |\n\n## 7. 目录结构\n\n```\nhtml-deck-kit/\n├── SKILL.md # AI Skill 入口：工作流程 + 10 条硬规则\n├── README.md # 本文档（给人看，也给 AI 看）\n├── references/\n│ ├── 01-spec.md # 严格规范（必须 / 应该 / 可以）\n│ ├── 02-components.md # 13 种页面模板 + 组件类名\n│ ├── 03-themes.md # 6 套主题与 token 表、新增主题规则\n│ ├── 04-interaction.md # 快捷键、讲稿规则、交互约束\n│ ├── 05-checklist.md # 交付检查清单\n│ └── 06-prompts.md # Claude / Codex / WorkBuddy / 飞书 的用法\n├── template/deck-template.html # 母版：引擎 + 6 套主题 + 13 种示例页\n├── themes/themes.css # 主题层（与母版内一致，便于单独查看）\n├── tools/check_layout.py # 70% 规则与讲稿检查（Playwright）\n└── docs/\n ├── showcase.html # 主题展示页（本地打开）\n └── img/ # 预览图\n```\n\n## 8. 给 AI 的说明（AI 请从这里开始）\n\n1. 读 `SKILL.md`，然后读 `references/01-spec.md`；其余 reference 按需读。\n2. 永远以 `template/deck-template.html` 为母版：只增删 `
`，不改 `