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

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 时间。

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