html-ppt

html-ppt — HTML PPT Studio

将专业的 HTML 演示文稿制作成静态文件。一个主题文件对应一种视觉风格，一个布局文件对应一种页面类型，一个动画类对应一种入场效果。所有页面都共享 assets/base.css 中基于设计令牌的设计系统。

安装

npx skills add https://github.com/lewislulu/html-ppt-skill

一条命令即可运行，无需构建。纯静态 HTML/CSS/JS，仅使用 CDN 网络字体。

此技能提供的内容

• 36 种主题（assets/themes/*.css）—— minimal-white、editorial-serif、soft-pastel、sharp-mono、arctic-cool、sunset-warm、catppuccin-latte/mocha、dracula、tokyo-night、nord、solarized-light、gruvbox-dark、rose-pine、neo-brutalism、glassmorphism、bauhaus、swiss-grid、terminal-green、xiaohongshu-white、rainbow-gradient、aurora、blueprint、memphis-pop、cyberpunk-neon、y2k-chrome、retro-tv、japanese-minimal、vaporwave、midcentury、corporate-clean、academic-paper、news-broadcast、pitch-deck-vc、magazine-bold、engineering-whiteprint
• 15 个完整演示文稿模板（templates/full-decks/<name>/）——包含完整的多页演示文稿，并使用作用域限定的 .tpl-<name> CSS。其中 8 个提取自真实演示文稿（xhs-white-editorial、graphify-dark-graph、knowledge-arch-blueprint、hermes-cyber-terminal、obsidian-claude-gradient、testing-safety-alert、xhs-pastel-card、dir-key-nav-minimal），7 个为场景脚手架模板（pitch-deck、product-launch、tech-sharing、weekly-report、xhs-post 3:4、course-module、presenter-mode-reveal——专为演讲者模式设计）
• 31 种布局（templates/single-page/*.html），包含逼真的演示数据
• 27 种 CSS 动画（assets/animations/animations.css），通过 data-anim 使用
• 20 种 Canvas FX 动画（assets/animations/fx/*.js），通过 data-fx 使用——particle-burst、confetti-cannon、firework、starfield、matrix-rain、knowledge-graph（力导向）、neural-net（脉冲）、constellation、orbit-ring、galaxy-swirl、word-cascade、letter-explode、chain-react、magnetic-field、data-stream、gradient-blob、sparkle-trail、shockwave、typewriter-multi、counter-explosion
• 键盘运行时（assets/runtime.js）——方向键、T（主题）、A（动画）、F/O、S（演讲者模式：包含 CURRENT / NEXT / SCRIPT / TIMER 卡片的磁吸式弹窗）、N（备注抽屉）、R（重置演讲者模式计时器）
• FX 运行时（assets/animations/fx-runtime.js）——进入幻灯片时自动初始化 [data-fx]，离开时清理
• 主题 / 布局 / 动画 / 完整演示文稿画廊的展示演示文稿
• 用于导出 PNG 的无头 Chrome 渲染脚本

适用场景

当用户需要任何形式的幻灯片演示内容，或想将文本 / 笔记转换成适合展示的演示文稿时使用。优先使用此技能，而不是从头构建。

🎤 演讲者模式（演讲者模式 + 逐字稿）

如果用户提到以下任何内容：演讲 / 分享 / 讲稿 / 逐字稿 / speaker notes / presenter view / 演讲者视图 / 提词器，或者说“我要去给团队讲 xxx”“要做一场技术分享”“怕讲不流畅”“想要一份带逐字稿的 PPT”等类似内容，请使用 presenter-mode-reveal 全套幻灯片模板，并在每张幻灯片的 <aside class="notes"> 中撰写 150–300 字的逐字稿。

请参阅 references/presenter-mode.md，查看完整的编写指南，其中包括撰写演讲稿的 3 条规则：

1. 不是讲稿，而是提示信号——加粗核心词 + 将过渡句单独成段
2. 每页 150–300 字——按照每页 2–3 分钟的节奏
3. 使用口语，不用书面语——“因此”→“所以”，“该方案”→“这个方案”

所有全套幻灯片模板都支持 S 键演讲者模式（此功能内置于 runtime.js）。按 S 会打开一个包含 4 张磁吸卡片的新弹出窗口：

• 🔵 CURRENT——当前幻灯片的像素级精准 iframe 预览
• 🟣 NEXT——下一张幻灯片的像素级精准 iframe 预览
• 🟠 SPEAKER SCRIPT——大字号逐字稿（可滚动）
• 🟢 TIMER——已用时间 + 幻灯片计数器 + 上一页/下一页/重置按钮

每张卡片都可以拖动标题栏，也可以通过右下角手柄调整大小。卡片的位置和大小会按幻灯片集保存在 localStorage 中。“Reset layout”按钮可恢复默认布局。

预览为何能做到像素级精准：每个预览都是一个 <iframe>，会加载带有 ?preview=N 查询参数的实际幻灯片集 HTML；runtime.js 会检测该参数，并仅渲染第 N 张幻灯片，不显示界面装饰。因此，预览使用的CSS、主题、字体和视口都与观众视图相同——颜色和布局保证完全一致。

流畅导航：切换幻灯片时，演讲者窗口会向每个 iframe 发送 postMessage({type:'preview-goto', idx:N})。iframe 只需在幻灯片之间切换 .is-active，无需重新加载，也不会闪烁。两个窗口还会通过 BroadcastChannel 保持同步。

只有 presenter-mode-reveal 是从设计之初就围绕此功能打造的，并且每张幻灯片都配有恰当的逐字稿示例。

演讲者窗口中的键盘操作：← → 导航（与观众窗口同步）· R 重置计时器 · Esc 关闭弹出窗口。 观众窗口中的键盘操作：S 打开演讲者窗口 · T 切换主题 · ← → 导航（与演讲者窗口同步）· F 全屏 · O 概览。

开始编写前——务必先询问或提出建议

**在弄清楚以下三点之前，不要开始撰写幻灯片。**可以直接询问用户；如果用户已经提供了丰富的内容，则提出合适的默认方案并请用户确认。

1. **内容与受众。**这套幻灯片讲什么、要做多少页、观众是谁（工程师 / 高管 / 小红书读者 / 学生 / VC）？
2. **风格 / 主题。**36 个主题中哪个合适？如果用户拿不定主意，请根据基调推荐 2–3 个候选主题：
   • 商业 / 投资人路演 → pitch-deck-vc、corporate-clean、swiss-grid
   • 技术分享 / 工程 → tokyo-night、dracula、catppuccin-mocha、terminal-green、blueprint
   • 小红书图文 → xiaohongshu-white、soft-pastel、rainbow-gradient、magazine-bold
   • 学术 / 报告 → academic-paper、editorial-serif、minimal-white
   • 前卫 / 赛博 / 发布会 → cyberpunk-neon、vaporwave、y2k-chrome、neo-brutalism
3. **起点。**使用 14 个全套幻灯片模板之一，还是从头开始？指出最接近的 templates/full-decks/<name>/，并询问用户是否合适。如果用户的内容明显指向某个模板（例如“我要做产品发布会”→ product-launch），就自信地推荐，而不是盲目询问。

一个好的开场消息示例：

我可以给你做这份 PPT！先确认三件事：

1. 大致内容 / 页数 / 观众是谁？
2. 偏好什么风格？我建议从这 3 个主题里选一个：tokyo-night（技术分享默认好看）、xiaohongshu-white（小红书风）、corporate-clean（正式汇报）。
3. 要不要用我现成的 tech-sharing 全套幻灯片模板打底？

只有确认这些信息后，才搭建幻灯片并开始撰写。

快速开始

1. 搭建新演示文稿。 在仓库根目录中运行：

   ./scripts/new-deck.sh my-talk
   open examples/my-talk/index.html
   

2. 选择主题。 打开演示文稿并按 T 切换。也可以直接指定：

   <link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css">
   

   主题列表见 references/themes.md。
3. 选择布局。 从 templates/single-page/ 中的文件复制 <section class="slide">...</section> 代码块到演示文稿中，并替换示例数据。 布局列表见 references/layouts.md。
4. 添加动画。 在任意元素上添加 data-anim="fade-up"（或 class="anim-fade-up"）。 在 <ul>/网格上使用 anim-stagger-list，即可依次显示内容。 对于画布特效，使用 <div data-fx="knowledge-graph">...</div> 并引入 <script src="../assets/animations/fx-runtime.js"></script>。 动画列表见 references/animations.md。
5. 使用完整演示文稿模板。 将 templates/full-decks/<name>/ 复制到 examples/my-talk/，作为起点。每个文件夹都包含作用域限定的 CSS，可独立使用。 模板列表见 references/full-decks.md，画廊见 templates/full-decks-index.html。
6. 渲染为 PNG。

   ./scripts/render.sh templates/theme-showcase.html       # one shot
   ./scripts/render.sh examples/my-talk/index.html 12      # 12 slides
   

编写规则（重要）

• 始终从模板开始。 不要从头编写幻灯片——先从 templates/single-page/ 复制 最接近的布局，再替换内容。
• 使用设计令牌，不要使用字面颜色值。 所有颜色、圆角、阴影都应来自 assets/base.css 中定义并由主题覆盖的 CSS 变量。 正确：color: var(--text-1)。错误：color: #111。
• 不要创建新的布局文件。 优先组合现有布局。只有在 30 种布局都不适用时， 才添加新的 templates/single-page/*.html。
• 遵循框架插槽。 .deck-header、.deck-footer、.slide-number 和进度条由 assets/base.css + runtime.js 提供。
• 优先支持键盘操作。 始终包含 <script src="../assets/runtime.js"></script>， 以支持演示文稿使用 ← → / T / A / F / S / O / hash 深层链接。
• 每个逻辑页面对应一个 .slide。 runtime.js 会显示 .slide.is-active； 其他页面均隐藏。
• 提供备注。 在每张幻灯片内用 <div class="notes">…</div> 包裹演讲者备注。 按 S 打开浮层。
• 切勿在幻灯片上放置仅供演讲者查看的文字。 “这一页展示了……”或 “Speaker: 这里可以补充……”等描述性文字，以及面向演讲者的简短说明， 必须放在 <div class="notes"> 中，不得作为可见的 <p> / <span> 元素放在幻灯片上。 .notes 类默认设置为 display:none——仅在按 S 打开的浮层中显示。 幻灯片上只能包含面向观众的内容（标题、要点、数据、图表、图片）。

撰写指南

请参阅 references/authoring-guide.md，了解分步指南：文件结构、 命名方式、如何将大纲转换为演示文稿、如何根据受众选择布局和主题、如何制作 中英双语演示文稿，以及如何导出。

目录（按需加载）

• references/themes.md — 全部 36 种主题及其适用场景。
• references/layouts.md — 全部 31 种布局类型。
• references/animations.md — 27 种 CSS 动画 + 20 种画布特效动画。
• references/full-decks.md — 全部 15 个完整演示文稿模板。
• references/presenter-mode.md — 演讲者模式 + 逐字稿编写指南（技术分享/演讲必看）。
• references/authoring-guide.md — 完整工作流。

文件结构

html-ppt/
├── SKILL.md                 (this file)
├── references/              (detailed catalogs, load as needed)
├── assets/
│   ├── base.css             (tokens + primitives — do not edit per deck)
│   ├── fonts.css            (webfont imports)
│   ├── runtime.js           (keyboard + presenter + overview + theme cycle)
│   ├── themes/*.css         (36 token overrides, one per theme)
│   └── animations/
│       ├── animations.css   (27 named CSS entry animations)
│       ├── fx-runtime.js    (auto-init [data-fx] on slide enter)
│       └── fx/*.js          (20 canvas FX modules: particles/graph/fireworks…)
├── templates/
│   ├── deck.html                  (minimal 6-slide starter)
│   ├── theme-showcase.html        (36 slides, iframe-isolated per theme)
│   ├── layout-showcase.html       (iframe tour of all 31 layouts)
│   ├── animation-showcase.html    (20 FX + 27 CSS animation slides)
│   ├── full-decks-index.html      (gallery of all 14 full-deck templates)
│   ├── full-decks/<name>/         (14 scoped multi-slide deck templates)
│   └── single-page/*.html         (31 layout files with demo data)
├── scripts/
│   ├── new-deck.sh                (scaffold a deck from deck.html)
│   └── render.sh                  (headless Chrome → PNG)
└── examples/demo-deck/            (complete working deck)

渲染为 PNG

scripts/render.sh 会调用位于 /Applications/Google Chrome.app/Contents/MacOS/Google Chrome 的无头 Chrome。对于多张幻灯片的 捕获，runtime.js 提供 #/N 深层链接，render.sh 会依次遍历 1..N。

./scripts/render.sh templates/single-page/kpi-grid.html        # single page
./scripts/render.sh examples/demo-deck/index.html 8 out-dir    # 8 slides, custom dir

键盘快捷键速查表

←  →  Space  PgUp  PgDn  Home  End    navigate
F                                       fullscreen
S                                       open presenter window (magnetic cards: current/next/script/timer)
N                                       quick notes drawer (bottom overlay)
R                                       reset timer (in presenter window)
?preview=N                              URL param — force preview-only mode (single slide, no chrome)
O                                       slide overview grid
T                                       cycle themes (reads data-themes attr)
A                                       cycle demo animation on current slide
#/N in URL                              deep-link to slide N
Esc                                     close all overlays

许可证与作者

MIT。版权所有 (c) 2026 lewis <[email protected]>。