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

标题

工具栏

点击或拖拽上传图片

支持 PNG, JPG, GIF, WebP 格式

内容 (Markdown 格式)

每次做技术分享，我都会被 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**
```bash
./scripts/new-deck.sh ai-tools-sharing
```

**第二步：选定主题**
打开 `index.html`，把主题 link 改成：
```html
<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 键提词。

---

## 一行命令安装

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

摘要

标签多个标签用逗号分隔

分类