Tech sharing · 2026-04-15 html-ppt

Keynote · Demo

# 做一份像杂志一样的
技术分享稿

24 主题 · 30 版式 · 25 动效 · 零构建

tokens keyboard first PNG export CN + EN
Hi，今天我给大家演示一下 html-ppt 这套演讲系统是怎么工作的。这份 demo 本身就是用它做出来的——每一张幻灯片都只是几行 HTML + 一个 class。

Agenda

## 今天 10 分钟，讲三件事

#### ① 为什么

每次做 PPT 都在重复劳动，而这件事 99% 可以模板化。

#### ② 怎么做

tokens + layouts + animations，三层分离。

#### ③ 效果

同一份 deck，一键切 24 种主题。

三段式结构——Why / How / Result。这是最稳的讲法。
"

> 好的演讲稿是写出来的，
> 不是「做」出来的。

— 每一个被 PPT 折磨过的人

这里停一秒。让这句话自己说话。

The result

0%

### 你花在 PPT 上的时间可以被省下

10 份真实 deck 的平均测试数据。

强调：数据来源——自己真实的 10 个 deck。

How · 核心思路

## 把「看起来像什么」收进 `:root`

### 概念

每一种视觉属性——颜色、字体、圆角、阴影——都变成语义变量。

- `--text-1` / `--text-2` / `--text-3`
- `--surface` / `--surface-2`
- `--accent` / `--accent-2` / `--accent-3`
- `--radius` / `--shadow` / `--grad`

### 示例

    /* assets/themes/aurora.css */
    :root {
      --bg: #06091c;
      --text-1: #e8f0ff;
      --accent: #5ef2c6;
      --accent-2: #7aa2ff;
      --accent-3: #c984ff;
      --radius: 20px;
    }

——整个 aurora 主题就这么大。

关键是：base.css 只认变量名，不认具体色值。换主题 = 换一份变量。

Numbers · 实际效果

## 做 deck 的时间分布，使用前/使用后

使用后，「写内容」时间占比大幅上升，其他一切下降——这正是我们想要的。

Your turn

# 开始做你的第一份

复制一份 deck，换你的内容，按 T 选一个最对味的主题，讲完还能一键导 PNG。

`./scripts/new-deck.sh my-talk`

←/→ 翻页 · T 主题 · A 动效 · F 全屏 · O 概览 · S 备注

最后给一个具体的行动：一条命令。别停留在「我回去试试」。

# Thanks

lewis · sudolewis@gmail.com · MIT 2026

谢谢大家。Q&A 时间。