发现一个神级 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 双向同步。

一行命令安装

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？有没有被动画或配色折磨过？评论区聊聊。