【skill】HTML PPT Skill：用 Claude Code 一句话生成专业演示文稿

概述

做 PPT 是许多人的痛点------PowerPoint 操作繁琐，Keynote 只在 Mac 上，在线工具又受限于模板质量。HTML PPT Skill 提供了一种截然不同的方案：用 Claude Code 直接生成纯静态 HTML 幻灯片，36 个主题、31 种布局、47 种动画，开箱即用，无需任何构建工具。

这个 Skill 由开发者 lewis 创建，在 skills.sh 上获得了 11.6K 安装量和 5.7K GitHub Star。本文拆解它的设计理念、技术实现，并通过实战示例演示如何从零生成一份带演讲者模式的技术分享 PPT。

安装

bash 复制代码

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

一条命令，无需构建流程。生成的文件是纯静态 HTML/CSS/JS，用浏览器直接打开即可。

设计理念：Token 驱动的设计系统

HTML PPT Skill 的核心思想是一切样式由 CSS 变量（Token）驱动。

复制代码

assets/base.css     → 定义所有 token（颜色、圆角、阴影、字体）
assets/themes/*.css → 每个主题只覆盖 token 的值

这意味着：

切换主题只需换一个 CSS 文件，所有页面自动变色
永远用 color: var(--text-1) 而不是 color: #111
动画颜色也读 token，换主题后动画配色自动跟着变

一个主题文件只需覆盖十几个变量：--bg、--surface、--text-1/2/3、--accent、--accent-2/3、--good、--warn、--bad 等，通常不到 200 行 CSS。

资源清单

类型	数量	位置
主题	36 个	`assets/themes/*.css`
全 Deck 模板	15 个	`templates/full-decks/<name>/`
单页布局	31 个	`templates/single-page/*.html`
CSS 动画	27 个	`assets/animations/animations.css`
Canvas 特效	20 个	`assets/animations/fx/*.js`

36 个主题详解

主题按风格分为几大类：

浅色 & 克制

主题	风格	适用场景
`minimal-white`	极简白，强文字层级	内部汇报、技术评审
`editorial-serif`	杂志风衬线 + 奶油底	品牌故事、文字密度大的演讲
`soft-pastel`	马卡龙三色渐变	产品发布、面向消费者
`xiaohongshu-white`	小红书白底 + 暖红 accent	小红书图文、生活美学
`corporate-clean`	纯白 + 海军蓝	董事会汇报、B2B 销售
`academic-paper`	论文白 + 衬线正文	学术报告、研究分享

深色 & 冷调

主题	风格	适用场景
`tokyo-night`	蓝夜色调	技术分享首选
`dracula`	经典紫红主色	代码密集的分享
`catppuccin-mocha`	catppuccin 深色	开发者内部分享
`nord`	北欧清冷蓝白	基础设施、云产品
`terminal-green`	绿屏终端 + 发光文字	CLI/黑客/复古朋克
`blueprint`	蓝图工程 + 网格底纹	系统架构、工程蓝图

大胆 & 个性

主题	风格	适用场景
`neo-brutalism`	厚描边 + 硬阴影 + 明黄	创业路演
`cyberpunk-neon`	霓虹粉青黄 + 发光	黑客文化、赛博 talk
`vaporwave`	深紫 + 粉红青蓝渐变	潮流艺术
`glassmorphism`	毛玻璃 + 多色光斑	Apple 式发布会
`pitch-deck-vc`	YC 风白底 + 蓝紫渐变	融资路演、VC meeting

按 T 键可以在运行时循环切换主题，方便现场挑选。

31 种布局

布局覆盖了演示文稿的所有常见需求：

开场与过渡： cover（封面）、toc（目录）、section-divider（章节分隔）

文字内容： bullets（要点列表）、two-column（双栏）、three-column（三栏）、big-quote（大引言）

数据展示： stat-highlight（单个大数字）、kpi-grid（4 个 KPI）、table（数据表格）、chart-bar/line/pie/radar（Chart.js 图表）

代码与终端： code（语法高亮）、diff（差异对比）、terminal（终端窗口模拟）

流程与架构： flow-diagram（流程图）、arch-diagram（架构图）、process-steps（步骤卡片）、mindmap（思维导图）

计划与对比： timeline（时间线）、roadmap（路线图）、gantt（甘特图）、comparison（前后对比）、pros-cons（优缺点）

收尾： cta（行动号召）、thanks（致谢页 + 撒花特效）

每个布局都是一个独立的 HTML 文件，内含真实的 demo 数据，可以直接在浏览器中预览效果。

47 种动画

动画分为两套系统：

27 个 CSS 动画（入场效果）

通过 data-anim="fade-up" 属性触发，每次翻到该页面时自动播放：

类别	动画	用途
方向渐入	`fade-up/down/left/right`	段落、卡片入场
戏剧性入场	`rise-in`、`blur-in`、`zoom-pop`、`glitch-in`	标题、封面揭示
文字效果	`typewriter`、`neon-glow`、`shimmer-sweep`	标语、品牌词
列表与数字	`stagger-list`、`counter-up`	逐条展开、数字滚动
3D 效果	`parallax-tilt`、`card-flip-3d`、`cube-rotate-3d`	产品卡片、章节切换
氛围效果	`marquee-scroll`、`kenburns`、`confetti-burst`	Logo 条、背景、致谢页

使用建议：每页最多 1-2 种动画。封面用 rise-in 或 blur-in，正文用 fade-up + stagger-list，结尾用 confetti-burst。

20 个 Canvas 特效（持续运行）

通过 data-fx="knowledge-graph" 触发，进入页面时启动，离开时自动销毁：

html 复制代码

<div data-fx="knowledge-graph" style="width:100%;height:360px;"></div>

特效	效果	适用场景
`particle-burst`	粒子从中心爆发	数据揭示
`confetti-cannon`	彩色纸片从两侧喷射	庆祝/致谢页
`firework`	连续烟花	发布会、庆典
`starfield`	3D 星空飞驰	科幻背景
`matrix-rain`	绿色字符雨	赛博/安全主题
`knowledge-graph`	力导向图，28 节点 + 50 边	知识图谱、RAG
`neural-net`	4-6-6-3 前馈网络 + 脉冲	ML/模型架构
`constellation`	漂浮点 + 距离连线	氛围背景
`galaxy-swirl`	800 粒子对数螺旋	封面页
`typewriter-multi`	多行终端打字效果	Agent 启动日志
`counter-explosion`	数字滚动 + 粒子爆发	KPI 揭示

所有特效颜色自动读取主题的 --accent、--accent-2 等变量，换主题后特效配色自动跟着变。

演讲者模式：逐字稿的正确打开方式

这是 HTML PPT Skill 最有价值的功能之一。按 S 键打开演讲者窗口，4 个可拖拽的磁吸卡片：

复制代码

 观众窗口（投影到外接屏）      演讲者窗口（留在面前的屏幕）
┌─────────────────┐   ┌──────────────────┬──────────────────┐
│                 │   │ 🔵 CURRENT       │ 🟣 NEXT          │
│  正常 slide     │   │                  │                  │
│  全屏展示       │◄►│  当前页 iframe    │  下一页 iframe    │
│                 │   │  像素级完美预览   │  像素级完美预览   │
│                 │   ├──────────────────┼──────────────────┤
│                 │   │ 🟢 TIMER         │ 🟠 SPEAKER SCRIPT│
│                 │   │ ⏱ 12:34  3/8    │  大字号逐字稿    │
│                 │   │ [←Prev][Next→]   │  可滚动          │
└─────────────────┘   └──────────────────┴──────────────────┘
        ↑ BroadcastChannel 双向同步翻页 ↑

技术实现细节

预览为什么像素级完美？ 每个预览是一个 <iframe>，加载同一个 deck HTML 文件，URL 多了 ?preview=N 参数。runtime.js 检测到这个参数时只渲染第 N 页、隐藏所有 chrome。iframe 使用和观众视图完全相同的 CSS、主题、字体、viewport------颜色和排版保证一致。外层用 transform: scale() 等比缩放。

翻页为什么不闪烁？ iframe 初次加载后常驻，翻页时通过 postMessage({type:'preview-goto', idx:N}) 告诉 iframe 切换 .is-active class，不重新加载页面。两窗口通过 BroadcastChannel 保持双向同步。

逐字稿写作三铁律

铁律 1：不是讲稿，是"提示信号"

错误写法（像在念稿）：

复制代码

大家好，欢迎来到今天的分享。今天我将要给大家介绍一下
我们团队在过去三个月做的工作。首先，我们来看一下背景情况。

正确写法（提示信号 + 加粗核心）：

html 复制代码

<p>欢迎！今天分享我们团队<strong>过去 3 个月</strong>的工作。</p>
<p>先说<em>背景</em>------三个月前我们遇到了<strong>三个核心问题</strong>：
延迟高、成本炸、稳定性差。</p>
<p>接下来逐个讲解怎么解的。</p>

关键词加粗，过渡句独立成段，看一眼就能接上。

铁律 2：每页 150-300 字

少于 150 字提示不够会卡，多于 300 字眼睛扫不完。2-3 分钟/页是最舒服的节奏。

铁律 3：用口语，不用书面语

书面语	口语
因此	所以
该方案	这个方案
然而	但是 / 不过
进行优化	优化一下
综上所述	所以简单来说

检查方法：写完读一遍，听起来像说话才对。

Skill 的工作流设计

SKILL.md 在 Claude Code 开始写 slide 之前，强制执行一个三问确认流程：

内容与受众 --- 主题是什么？几页？给谁看（工程师 / 高管 / 小红书读者 / 投资人）？
风格与主题 --- 36 个主题选哪个？Skill 会根据场景推荐 2-3 个候选
起点模板 --- 15 个全 deck 模板选哪个？还是从零开始？

Claude 不会在没确认这三点之前动手写代码。这个约束很关键------防止 AI 自作主张选了不合适的风格。

文件结构

复制代码

html-ppt/
├── SKILL.md                     (技能定义)
├── references/                  (详细文档目录)
│   ├── themes.md                (36 主题详解)
│   ├── layouts.md               (31 布局详解)
│   ├── animations.md            (47 动画详解)
│   ├── full-decks.md            (15 模板详解)
│   ├── presenter-mode.md        (演讲者模式指南)
│   └── authoring-guide.md       (完整创作流程)
├── assets/
│   ├── base.css                 (Token 设计系统)
│   ├── fonts.css                (Web 字体)
│   ├── runtime.js               (键盘 + 演讲者 + 主题切换)
│   ├── themes/*.css             (36 个主题文件)
│   └── animations/
│       ├── animations.css       (27 个 CSS 动画)
│       ├── fx-runtime.js        (Canvas 特效生命周期管理)
│       └── fx/*.js              (20 个 Canvas 特效模块)
├── templates/
│   ├── deck.html                (6 页入门模板)
│   ├── full-decks/<name>/       (15 个完整 deck 模板)
│   └── single-page/*.html       (31 个单页布局)
├── scripts/
│   ├── new-deck.sh              (创建新 deck)
│   └── render.sh                (Headless Chrome → PNG 导出)
└── examples/demo-deck/          (完整工作示例)

实战示例

示例 1：技术分享 PPT（带演讲者模式）

对 Claude Code 说：

帮我做一份技术分享 PPT，主题是"我们如何将 API 延迟降低 80%"，给团队内部工程师看，大概 10 页，要带逐字稿，我下周要讲 30 分钟。

Claude 会执行以下流程：

确认三要素：内容（API 优化）、受众（工程师）→ 推荐 tokyo-night 主题、起点模板 → presenter-mode-reveal
以 presenter-mode-reveal 模板为基础创建 deck
规划 10 页结构：

cover → toc → section-divider(问题) → stat-highlight(延迟数据) →
arch-diagram(优化前架构) → section-divider(方案) → code(关键代码) →
chart-line(优化曲线) → kpi-grid(最终指标) → thanks
每页写 150-300 字口语化逐字稿

生成的 HTML 结构：

html 复制代码

<section class="slide" data-title="Cover">
  <p class="kicker">2026 Q2 · 后端团队</p>
  <h1 class="h1">API 延迟降低 80%<br><span class="dim">我们做了什么</span></h1>
  <p class="lede">从 P99 320ms 到 P99 64ms 的优化之路</p>
  <aside class="notes">
    <p>大家好！今天跟大家分享我们团队<strong>过去两个月</strong>做的 API 优化。</p>
    <p>先说结论------我们把 <strong>P99 延迟从 320ms 干到了 64ms</strong>，降了 80%。</p>
    <p>接下来我会讲<strong>三个关键改动</strong>，每个都不复杂，
    但组合起来效果很猛。</p>
  </aside>
</section>

<section class="slide" data-title="优化前延迟">
  <h2 class="h2">优化前：P99 = 320ms</h2>
  <div class="stat-highlight">
    <span class="counter" data-to="320">0</span>
    <span class="unit">ms</span>
  </div>
  <p class="dim">P50 = 85ms · P95 = 210ms · P99 = 320ms</p>
  <aside class="notes">
    <p>这是优化前的数据。<strong>P99 是 320 毫秒</strong>，
    意味着每 100 个请求里有 1 个要等超过 300 毫秒。</p>
    <p>听起来还行？但是我们的 SLA 要求是 <strong>P99 < 100ms</strong>，
    超了 3 倍多。而且这个数字在<strong>高峰期会飙到 500ms 以上</strong>。</p>
    <p>所以我们必须改。接下来看看问题出在哪。</p>
  </aside>
</section>

示例 2：小红书风格图文

做一份小红书风格的图文，介绍 5 个提升效率的 VS Code 插件，要好看

Claude 会选择 xiaohongshu-white 主题 + xhs-post 3:4 模板，生成竖版排版，每页一个插件，大图 + 简短文案，配合 soft-pastel 色彩。导出时用 render.sh 输出 1242×1660 的 PNG 图片。

示例 3：投资人路演 Deck

做一份种子轮融资路演 PPT，12 页，产品是一个 AI 代码审查工具

Claude 会选择 pitch-deck-vc 主题 + pitch-deck 模板，按经典路演结构生成：

复制代码

cover → 痛点(big-quote) → 市场规模(stat-highlight) →
产品演示(image-hero) → 技术架构(arch-diagram) →
商业模式(three-column) → 竞争格局(comparison) →
里程碑(timeline) → 团队(image-grid) →
财务预测(chart-bar) → 融资需求(kpi-grid) → cta

示例 4：给现有 deck 加动画

html 复制代码

<!-- 封面：模糊渐入 -->
<h1 class="h1" data-anim="blur-in">AI 代码审查的未来</h1>

<!-- 要点列表：逐条展开 -->
<ul class="anim-stagger-list">
  <li>自动检测 OWASP Top 10 漏洞</li>
  <li>PR 级别的实时反馈</li>
  <li>支持 20+ 编程语言</li>
</ul>

<!-- KPI 数字滚动 -->
<span class="counter" data-to="98">0</span>
<span class="unit">%</span>
<span class="dim">准确率</span>

<!-- 知识图谱 Canvas 特效 -->
<div data-fx="knowledge-graph" style="width:100%;height:400px;"></div>

示例 5：双屏演讲实操

拿到生成好的 PPT 后，双屏演讲的标准流程：

复制代码

1. 浏览器打开 index.html
2. 按 S → 弹出演讲者窗口
3. 把观众窗口拖到投影/外接屏，按 F 全屏
4. 演讲者窗口留在自己面前的屏幕
5. 在任一窗口按 ← → 翻页，两边自动同步
6. 演讲者窗口里看逐字稿 + 下一页预览 + 计时器

示例 6：导出为 PNG

bash 复制代码

# 导出单页
./scripts/render.sh examples/my-talk/index.html

# 导出全部 12 页
./scripts/render.sh examples/my-talk/index.html 12

# 导出到指定目录
./scripts/render.sh examples/my-talk/index.html 12 out/png

# 小红书 3:4 比例（需改 render.sh 里的 --window-size）
./scripts/render.sh examples/xhs-post/index.html 5

默认输出 1920×1080 分辨率。

键盘快捷键速查

键	功能
`← →` / Space / PgDn	翻页
`S`	打开演讲者窗口
`T`	切换主题
`F`	全屏
`O`	总览网格
`N`	底部笔记抽屉
`A`	在当前页循环演示动画
`R`	重置计时器（演讲者窗口）
`Esc`	关闭所有浮层
`#/N`	URL 深链接到第 N 页

创作规则备忘

永远从模板开始 --- 不要从空白文件写起，先复制最接近的布局再改内容
用 Token 不用硬编码 --- var(--text-1) 而不是 #111，var(--accent) 而不是 #3b82f6
一个 .slide = 一页 --- runtime.js 通过 .is-active 控制显示/隐藏
逐字稿放 <aside class="notes"> --- 永远不要把演讲者才需要看的文字放在 slide 可见区域
引入 runtime.js --- 没有它就没有键盘导航、没有演讲者模式、没有主题切换
动画克制 --- 每页最多 1-2 种，fade-up + stagger-list 覆盖 80% 场景
不要自创布局文件 --- 31 个布局几乎覆盖所有需求，优先组合现有的

总结

HTML PPT Skill 的价值在于把"做 PPT"这件事从 GUI 操作变成了自然语言描述 。你只需要告诉 Claude 主题、受众、风格偏好，它就能从 36 个主题、31 种布局、47 种动画中组合出一份完整的演示文稿。纯静态 HTML 意味着无需安装任何软件，浏览器打开就能演示，S 键一按就有像素级完美的演讲者视图。对于需要频繁做技术分享的工程师来说，这可能是目前最高效的 PPT 制作方式。