html-ppt：让 AI 做出真正能打的 HTML 演示文稿

从"配色车祸"到"专业级幻灯片"：一个开发者的 PPT 救赎之路

你有没有过这种经历——用 PowerPoint 做完一份技术分享，打开投影仪的瞬间，配色辣眼睛、字体歪七扭八、动画卡成 PPT 动画，恨不得找个地缝钻进去？

Lewis 就遇到了这个问题。作为一个天天和代码打交道的人，他受不了 PowerPoint 的笨拙和格式锁定。于是他用自己最擅长的技术——Web 开发——做了一套全新的演示文稿工具：html-ppt-skill。一行命令装好，36 套主题、15 套完整模板、36 种页面布局、47 种动效，配合全新的演讲者模式，让 AI 做出真正能打的 HTML 幻灯片。

这套方案不仅面向人类用户，更面向 AI Agent——它本质上是一个 AgentSkill：安装后，任何支持 AgentSkill 的 AI（Claude Code、Codex、Cursor、OpenCode 等）都能理解"做一份技术分享 PPT"这样的自然语言需求，并自动生成专业级的 HTML 演示文稿。

技术解析：Token 驱动的设计系统

html-ppt 的核心是一套 Token 驱动的设计系统。所有颜色、圆角、阴影、间距、字体全部抽象为 CSS 变量，写在 assets/base.css 里。每个主题（assets/themes/*.css）只需要覆盖这些变量，一行 <link> 切换，整份 deck 瞬间换皮。

这样做有两个好处：

1. 一致性：整份 deck 共享同一套视觉语言，不会出现某一页颜色和别页不一致的尴尬。
2. 可组合性：主题、布局、动画是三个独立维度，可以自由搭配——同一份 pitch deck，可以是极简白、可以是赛博朋克、可以是小红书马卡龙风格。

架构上，这是一个典型的静态站点生成器模式：

• templates/ 下是页面模板（单页布局 + 完整 deck 模板）
• assets/ 下是设计系统和运行时（CSS token、键盘导航、Canvas 动效）
• scripts/new-deck.sh 是脚手架工具，快速从模板生成分叉项目
• runtime.js 是前端运行时，处理键盘事件、演讲者窗口、主题切换、动画触发

整个项目没有构建步骤，生成的 HTML 文件是真正的静态文件——可以发邮件、挂 CDN、直接拖进浏览器，没有任何服务端依赖。

演讲者模式：PPT 演讲的"作弊器"

html-ppt 最让人惊喜的功能是 演讲者模式（Presenter Mode）。在任何 deck 里按 S 键，会弹出一个独立的演讲者窗口，包含 4 个磁吸卡片：

• 当前页预览：和观众看到的完全一致，像素级精确
• 下一页预览：提前看到下一张，心中有数
• 逐字稿：150–300 字/页的口语化演讲提示词，加粗关键词、过渡句独立成段
• 计时器：已用时间 + 页码 + 重置按钮

技术实现很精妙：演讲者窗口里的预览页是真实的 <iframe>，加载同一份 deck HTML 文件，只是 URL 多了 ?preview=N 参数。runtime.js 检测到这个参数后，只渲染第 N 页、隐藏所有 chrome。所以预览页和观众看到的使用完全相同的 CSS、主题、字体和 viewport，颜色排版 100% 一致。翻页时通过 postMessage 通知 iframe 切换 active class，零重新加载、零白屏、零闪烁。两个窗口通过 BroadcastChannel 双向同步。

这套机制不需要任何 WebSocket 或服务端，纯粹依赖浏览器原生 API。

Canvas FX 动画：让每一页都有"出场特效"

47 个动效是 html-ppt 的另一大亮点，分为两类：

• 27 个 CSS 动画（轻量）：淡入、升起、缩放、模糊、打字机、霓虹光晕、流光、渐变流动、列表错开入场、数字滚动、路径绘制、3D 翻页等。
• 20 个 Canvas FX（电影级）：粒子爆发、彩带礼炮、烟花、星空、代码雨、力导向知识图谱（knowledge-graph）、神经网络脉冲、星座连线、轨道环、星系漩涡、字母爆炸、磁力场……每个都是手写的 Canvas 模块。

动效的触发机制：fx-runtime.js 在每一页进入时自动扫描 [data-fx] 属性，找到对应的 Canvas 模块并初始化，离开时自动清理。这意味着你只需要在 HTML 里写 <div data-fx="knowledge-graph">，这一页进入时就会自动渲染力导向知识图谱动画——不需要写一行 JavaScript。

36 套主题：覆盖从学术论文到赛博朋克的所有场景

主题覆盖了几乎所有常见场景：

场景	推荐主题
投资人 Pitch	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

每个主题都是一份纯 CSS token 文件。换主题只需换一行 <link>，在 deck 里按 T 键可以实时切换主题，所有预览（包括演讲者窗口）实时同步更新。

36 种单页布局：从封面到甘特图全覆盖

页面布局涵盖：cover、toc、section-divider、bullets、two-column、three-column、big-quote、stat-highlight、kpi-grid、table、code、diff、terminal、flow-diagram、timeline、roadmap、mindmap、comparison、pros-cons、todo-checklist、gantt、image-hero、image-grid、chart-bar、chart-line、chart-pie、chart-radar、arch-diagram、process-steps、cta、thanks……

每个布局都带真实的示例数据，直接复制到 deck 里替换内容即可。5 个图片版式（单图 / 全出血 / 图文分栏 / 网格图库 / 改版前后对比）使用 .img-frame 原语，比例和裁剪由框决定，不由图片决定——竖图、方图、超宽图直接换 src，版式不用改。

AI Agent 集成：把"做 PPT"变成自然语言任务

html-ppt-skill 的设计初衷之一就是让 AI Agent 也能做出好看的 PPT。安装方式极为简单：

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

安装后对 agent 说"做一份 8 页的技术分享 slides，用 cyberpunk 主题"或"把这段 outline 变成投资人 pitch deck"，agent 就能理解意图、选择合适的模板和主题、自动生成完整的多页 HTML deck。

这种集成方式的意义在于：AI 生成的内容不再局限于纯文本或 Markdown，可以通过 AgentSkill 能力输出真正可用于演示的、专业级的视觉内容。

局限与争议

• 没有内置的 PPTX 导出：目前导出方式是 headless Chrome 截图或打印为 PDF，不直接生成 PPTX 文件。如果企业要求 PPTX 格式，需要额外转换步骤。
• 字体依赖 Google Fonts：断网环境下字体回退到系统字体栈，可能影响美观。不过 base.css 里已有完整的 fallback 方案，核心内容显示不受影响。
• 仅支持单文件输出：每份 deck 是单个 HTML 文件，所有资源（CSS/JS/字体）通过相对路径引用。如果需要将 deck 发布到某个 URL，需要确保资源路径正确。

总结与行业意义

html-ppt-skill 代表了一个趋势：用 Web 技术栈替代传统办公软件做视觉内容。它不是第一个这样做的项目，但可能是目前最完整的方案——36 套主题、36 种布局、47 种动效、演讲者模式，加上完整的 AgentSkill 集成，覆盖了从个人技术博客到投资人 pitch 的全部场景。

对于 AI 开发者而言，它提供了一种新的可能性：让 AI Agent 生成的不只是代码和文字，还可以是直接可用的专业演示文稿。这在 AI 辅助办公的工作流中有很强的实用价值。