发现一个开源的神级 PPT 替代品：36 套主题、47 种动效、还自带逐字稿提词器

每次做技术分享，我都会被 PPT 工具折磨——动画调半天配色丑、换台电脑字体全乱、上了台忘词只能硬背……

直到在 GitHub 上刷到这个项目：html-ppt。一个用 HTML/CSS/JS 做的演示文稿工具，36 套主题、15 套 deck 模板、31 种布局、47 种动效，还自带演讲者模式（逐字稿提词器 + 计时器）。

纯静态，无需构建，一行命令装好。

先看看它长什么样

36 套主题：换皮只需改一行

最让我惊艳的部分。

每个主题都是一份纯 CSS token 文件——换主题只需要改一行 <link>，整份 deck 的颜色、字体、阴影全部自动重排。

技术分享推荐 tokyo-night（蓝夜）、dracula、catppuccin-mocha；投资人 pitch 用 pitch-deck-vc（YC 风白底）；小红书图文有专属的 xiaohongshu-white；想要赛博朋克感可以用 cyberpunk-neon……

全部支持 T 键实时切换，演讲中途换主题都没问题。

15 套完整 deck 模板：拿来就能改

项目自带 15 个完整多页 deck 模板，全部采用 scoped CSS，多个模板可以同时加载互不污染。

提炼款（从真实作品提炼）：
- xhs-white-editorial — 小红书白底杂志风
- graphify-dark-graph — 暗底 + 力导向知识图谱
- knowledge-arch-blueprint — 蓝图/架构图风
- hermes-cyber-terminal — 终端 cyberpunk 风
- obsidian-claude-gradient — 紫色渐变卡
- testing-safety-alert — 红/琥珀警示风
- xhs-pastel-card — 柔和马卡龙图文
- dir-key-nav-minimal — 方向键极简

场景款（通用脚手架）：
- pitch-deck — 投资人 pitch
- product-launch — 产品发布会
- tech-sharing — 技术分享
- weekly-report — 周报
- xhs-post — 小红书图文（9 页 3:4）
- course-module — 教学模块
- presenter-mode-reveal — 完整分享模板，每一页都带 150-300 字的示例逐字稿

31 种单页布局：覆盖所有场景

cover、toc、bullets、two-column、big-quote、stat-highlight、kpi-grid、code、diff、terminal、flow-diagram、timeline、mindmap、comparison、pros-cons、chart-bar、chart-line、arch-diagram、cta、thanks……

每个布局都带真实的示例数据，拖进 deck 立即看效果。

47 种动效：CSS + Canvas FX 双管齐下

CSS 动画（轻量）： fade-up、rise-in、zoom-pop、blur-in、glitch-in、typewriter（打字机）、neon-glow（霓虹光晕）、shimmer-sweep（流光）、stagger-list（列表错开入场）、counter-up（数字滚动）……

Canvas FX（电影级）： particle-burst（粒子爆发）、confetti-cannon（彩带）、firework（烟花）、starfield（星空）、matrix-rain（代码雨）、knowledge-graph（力导向知识图谱）、neural-net（神经网络脉冲）、galaxy-swirl（星系漩涡）……

按 A 键循环演示当前页动画。

🎤 演讲者模式：这个功能太实用了

在任何 deck 里按 S 键，弹出独立演讲者窗口，包含 4 个可拖拽、可调整大小的磁吸卡片：

CURRENT — 当前页预览
NEXT — 下一页预览
SPEAKER SCRIPT — 大字体逐字稿
TIMER — 计时器 + 页码

为什么预览是像素级完美的： 每个卡片是 <iframe>，加载同一份 deck HTML，URL 加 ?preview=N 参数后只渲染第 N 页——和观众视图完全相同的 CSS、主题、字体、viewport。

丝滑翻页不闪烁： 翻页靠 postMessage 切换 .is-active class，不重新加载，两个窗口通过 BroadcastChannel 双向同步。

实战例子：做一个 5 页的技术分享 deck

假设我要做一场「AI 编程工具趋势」的技术分享，用 tokyo-night 主题。

第一步：创建 deck

./scripts/new-deck.sh ai-tools-sharing

第二步：选定主题
打开 index.html，把主题 link 改成：

<link id="theme-link" href="../assets/themes/tokyo-night.css">

第三步：填入内容
从 31 种布局里挑合适的——封面用 cover、目录用 toc、正文用 bullets 或 two-column、结尾用 thanks。

第四步：加动效
想让标题有冲击感？加 data-anim="glitch-in"。想让数据进场时更抓眼球？用 data-anim="counter-up"。

第五步：启用逐字稿
按 S 打开演讲者模式，每页的 <aside class="notes"> 里写上 150-300 字的逐字稿。演讲时屏幕上只显示逐字稿，观众看不到。

最终效果：一份有 cyberpunk 感的技术分享 slides，支持 T 键换主题、A 键演示动效、S 键提词。

一行命令安装

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

支持 Claude Code / Codex / Cursor / OpenClaw 等 agent。装好后直接说：

"做一份 8 页技术分享 slides，用 cyberpunk 主题"
"做一个小红书图文，9 张，白底柔和风"
"做一份带逐字稿的产品分享"

键盘快捷键

← → Space PgUp PgDn Home End   翻页
F                               全屏
S                               打开演讲者窗口
N                               底部 notes 抽屉
R                               重置计时器
O                               slide 总览网格
T                               切换主题
A                               演示动画
#/N (URL)                       深链到第 N 页

写在最后

html-ppt 本质上是一套设计系统驱动的演示文稿工具——Token 化的主题管理、隔离的 iframe 预览、零构建的纯静态输出。

用它做 PPT，换主题比 PowerPoint 快 10 倍，动效比 Keynote 炫酷 10 倍，演讲比裸讲安心 10 倍。

你平时用什么工具做 PPT？有没有被动画或配色折磨过？评论区聊聊。

📄 文档管理系统