文章目录
概述
html-ppt（HTML PPT Studio）是 Claude Code 生态中最受欢迎的演示文稿 Skill 之一，来自 lewislulu/html-ppt-skill 仓库，累计安装量超过 12,000 次。它的定位是用纯静态 HTML/CSS/JS 制作专业级演示文稿，不依赖 PowerPoint、Keynote 或任何构建工具。
这个 Skill 提供了一套完整的演示文稿制作体系：36 个视觉主题、15 个全套 deck 模板、31 种页面布局、27 个 CSS 动画和 20 个 Canvas 特效动画。所有资源通过统一的 token 设计系统连接在一起，换主题只需改一行 CSS 引用，所有页面自动适配新配色。
安装
bash
npx skills add lewislulu/html-ppt-skill@html-ppt -g -y安装后，当你在 Claude Code 中提出"做一份 PPT"、"帮我做 slides"、"做一份技术分享演示"等需求时，Skill 会自动介入。
36 个主题分类详解
html-ppt 的 36 个主题覆盖了从商务汇报到赛博朋克、从学术论文到小红书图文的广泛场景。每个主题都是一个独立的 CSS 文件，通过覆盖 base.css 中定义的 CSS 变量来改变整个 deck 的视觉表现。
商务与汇报
| 主题 | 风格描述 |
|---|---|
| corporate-clean | 正式企业汇报，干净利落 |
| pitch-deck-vc | 投资人路演 deck，专业有说服力 |
| swiss-grid | 瑞士网格排版，严谨精确 |
| minimal-white | 极简白底，让内容说话 |
技术与开发
| 主题 | 风格描述 |
|---|---|
| tokyo-night | 东京之夜配色，程序员圈广泛使用的暗色方案 |
| dracula | 经典 Dracula 暗色方案 |
| catppuccin-mocha | Catppuccin Mocha 变体，柔和的暗色系 |
| catppuccin-latte | Catppuccin Latte 变体，温暖的亮色系 |
| terminal-green | 终端绿字黑底，极客感十足 |
| blueprint | 蓝图风格，工程设计感 |
| engineering-whiteprint | 白底工程图纸风 |
| nord | Nord 极光配色 |
| solarized-light | Solarized 亮色方案 |
| gruvbox-dark | Gruvbox 暗色方案 |
| rose-pine | Rose Pine 配色 |
社交媒体与图文
| 主题 | 风格描述 |
|---|---|
| xiaohongshu-white | 小红书白色风格，适合图文笔记 |
| soft-pastel | 柔和粉彩色系 |
| rainbow-gradient | 彩虹渐变，活泼明快 |
| magazine-bold | 杂志粗体排版，视觉冲击力强 |
学术与编辑
| 主题 | 风格描述 |
|---|---|
| academic-paper | 学术论文风，严肃专业 |
| editorial-serif | 编辑衬线体风格，适合长文分享 |
| news-broadcast | 新闻播报风 |
潮流与艺术
| 主题 | 风格描述 |
|---|---|
| cyberpunk-neon | 赛博朋克霓虹 |
| vaporwave | 蒸汽波美学 |
| y2k-chrome | 千禧年镀铬风 |
| neo-brutalism | 新粗野主义 |
| glassmorphism | 玻璃拟态 |
| bauhaus | 包豪斯设计风 |
| memphis-pop | 孟菲斯波普 |
| retro-tv | 复古电视机 |
| japanese-minimal | 日式极简 |
| midcentury | 中世纪现代 |
其他
| 主题 | 风格描述 |
|---|---|
| aurora | 极光配色 |
| arctic-cool | 北极冷色调 |
| sunset-warm | 日落暖色调 |
| sharp-mono | 锐利单色 |
15 个全套 Deck 模板
全套模板是预先搭建好的多页 deck，包含完整的结构和示例内容，拿来即用或基于此修改：
从真实案例提取的 8 个模板：
- xhs-white-editorial -- 小红书白底编辑风
- graphify-dark-graph -- 深色数据图表风
- knowledge-arch-blueprint -- 知识架构蓝图风
- hermes-cyber-terminal -- 赫尔墨斯赛博终端风
- obsidian-claude-gradient -- Obsidian + Claude 渐变风
- testing-safety-alert -- 测试安全警报风
- xhs-pastel-card -- 小红书粉彩卡片风
- dir-key-nav-minimal -- 极简键盘导航风
7 个场景脚手架模板：
- pitch-deck -- 投资路演
- product-launch -- 产品发布会
- tech-sharing -- 技术分享
- weekly-report -- 周报汇报
- xhs-post -- 小红书图文（3:4 比例）
- course-module -- 课程模块
- presenter-mode-reveal -- 演讲者模式专用，内置逐字稿
31 种布局与 47 种动画
页面布局
31 种单页布局模板覆盖了演示文稿中常见的各种页面类型，每种都包含真实示例数据：封面页、目录页、KPI 网格、时间线、对比双栏、代码展示、引言页、团队介绍、数据图表等。
使用方式很简单：从 templates/single-page/ 中找到最接近的布局，复制 <section class="slide"> 块到你的 deck 中，替换内容即可。
CSS 动画（27 种）
通过 data-anim 属性或 anim- class 前缀添加入场动画：
- fade-up、fade-down、fade-left、fade-right
- zoom-in、zoom-out
- slide-in、slide-out
- bounce、flip、rotate
- blur-in、scale-up
- 以及列表专用的 anim-stagger-list（依次出现）
Canvas 特效动画（20 种）
通过 data-fx 属性触发的 Canvas 特效，适合关键页面的视觉增强：
- 粒子类：particle-burst（粒子爆发）、confetti-cannon（彩纸炮）、firework（烟花）、starfield（星空）、sparkle-trail（闪光轨迹）
- 图形类：knowledge-graph（力导向知识图谱）、neural-net（神经网络脉冲）、constellation（星座连线）、orbit-ring（轨道环）、galaxy-swirl（银河旋涡）
- 文字类：word-cascade（文字瀑布）、letter-explode（字母爆炸）、typewriter-multi（多行打字机）
- 科技类：matrix-rain（矩阵雨）、chain-react（链式反应）、magnetic-field（磁场）、data-stream（数据流）
- 其他：gradient-blob（渐变气泡）、shockwave（冲击波）、counter-explosion（计数器爆炸）
特效在幻灯片进入时自动初始化，离开时自动清理，不会影响其他页面的性能。
演讲者模式深度解析
html-ppt 最独特的功能之一是按 S 键 打开的演讲者模式。这不是简单的笔记弹窗，而是一个完整的演讲辅助系统。
四卡片磁性布局
按 S 键后会弹出一个新窗口，包含四张可拖拽、可调整大小的磁性卡片：
- CURRENT（蓝色）-- 当前幻灯片的像素完美 iframe 预览
- NEXT（紫色）-- 下一张幻灯片的预览
- SPEAKER SCRIPT（橙色）-- 大字体逐字稿，可滚动
- TIMER（绿色）-- 已用时间 + 幻灯片计数器 + 上下页按钮
每张卡片都可以通过标题栏拖拽、通过右下角手柄调整大小，位置和尺寸自动持久化到 localStorage。
像素完美预览的实现
预览之所以能做到"像素完美"，是因为每个预览都是一个 <iframe>，加载的是相同的 deck HTML，只是 URL 带了 ?preview=N 参数。runtime.js 检测到这个参数后只渲染第 N 张幻灯片，不显示任何 chrome 元素。因此预览使用的是与观众视图完全相同的 CSS、主题、字体和视口------颜色和布局保证一致。
双向同步
演讲者窗口和观众窗口通过 BroadcastChannel 保持同步。在任一窗口切换幻灯片，另一个窗口都会同步跟进。切换时通过 postMessage 通知 iframe 更新，只切换 .is-active class，不重新加载------没有闪烁。
逐字稿编写指南
对于需要演讲的场景（"我要做一场技术分享"、"帮我准备带逐字稿的 PPT"），应使用 presenter-mode-reveal 模板。逐字稿写在每张幻灯片的 <aside class="notes"> 中，遵循三条规则：
- 不是讲稿，是提示信号：加粗核心词 + 过渡句独立成段
- 每页 150-300 字：控制在 2-3 分钟/页的节奏
- 用口语，不用书面语："因此"改成"所以"，"该方案"改成"这个方案"
使用流程：三问启动
在开始制作前，html-ppt 会确认三件事：
第一问：内容与观众
deck 的主题是什么、大概多少页、谁在看？工程师、高管、小红书读者、学生、投资人------不同观众决定了完全不同的信息密度和视觉风格。
第二问：风格/主题
从 36 个主题中选择。如果不确定，Skill 会根据场景推荐 2-3 个候选：
- 投资路演 → pitch-deck-vc、corporate-clean、swiss-grid
- 技术分享 → tokyo-night、dracula、catppuccin-mocha
- 小红书图文 → xiaohongshu-white、soft-pastel、magazine-bold
- 学术报告 → academic-paper、editorial-serif
- 潮流/发布会 → cyberpunk-neon、vaporwave、neo-brutalism
第三问：起点
是从 15 个全套模板之一开始修改，还是从零搭建？如果用户的需求明显匹配某个模板（比如"产品发布会" → product-launch），会直接推荐。
键盘快捷键
html-ppt 是键盘优先的。runtime.js 提供了完整的键盘导航：
方向键 / Space / PgUp / PgDn / Home / End 翻页导航
F 全屏
S 打开演讲者窗口
N 笔记抽屉（底部浮层）
R 重置计时器（演讲者窗口中）
O 幻灯片概览网格
T 循环切换主题
A 循环当前页的动画演示
Esc 关闭所有浮层
#/N（URL hash） 深链接到第 N 张在演示过程中，观众看到的是干净的幻灯片界面，所有控制都通过键盘完成。
PNG 导出
html-ppt 支持通过 Headless Chrome 将幻灯片导出为 PNG 图片：
bash
./scripts/render.sh templates/single-page/kpi-grid.html # 单页导出
./scripts/render.sh examples/demo-deck/index.html 8 out-dir # 8 张幻灯片，指定输出目录runtime.js 为每张幻灯片提供 #/N 深链接，render.sh 遍历 1 到 N 逐张截图。导出的 PNG 可用于社交媒体分享、PDF 合并或其他需要静态图片的场景。
编写规则
html-ppt 有几条重要的编写纪律：
- 始终从模板开始：不从零写幻灯片，先找最接近的布局模板再修改内容
- 使用 token 变量 ：颜色、圆角、阴影全部来自 CSS 变量，不硬编码色值。
color: var(--text-1)而非color: #111 - 不发明新布局：优先组合现有的 31 种布局，只在确实没有匹配的情况下才新建
- 演讲者文本放 .notes ：描述性文字、演讲提示必须放在
<div class="notes">中，严禁出现在幻灯片可见区域
与传统工具的对比
| 维度 | PowerPoint / Keynote | html-ppt |
|---|---|---|
| 技术依赖 | 需要安装商业软件 | 纯静态文件，浏览器直接打开 |
| 主题切换 | 需要逐页适配 | 换一行 CSS 引用，全局生效 |
| 版本管理 | 二进制文件，无法 diff | 纯文本 HTML/CSS，Git 友好 |
| 动画能力 | 内置预设动画 | 27 CSS + 20 Canvas 特效 |
| 演讲者模式 | 独立窗口 + 笔记 | 四卡片磁性布局 + 像素完美同步 |
| 协作方式 | 需要云端服务 | 标准 Web 项目，任意 Git 平台 |
| AI 参与度 | AI 难以直接编辑 | AI 直接生成和修改 HTML |
| 离线使用 | 需要安装软件 | 单文件 HTML，任何浏览器可用 |
总结
html-ppt 的 12,000+ 安装量不是偶然的。它提供了一套完整的、经过实战验证的演示文稿制作体系：从 36 种视觉主题到 31 种页面布局、从 47 种动画效果到像素完美的演讲者模式、从键盘优先的导航到 Headless Chrome 的 PNG 导出。所有这些能力都通过统一的 token 设计系统串联在一起，让"换个风格"变成一行代码的事情。
对于经常需要做技术分享、产品演示或内容分享的人来说，这是目前 Claude Code 生态中制作演示文稿的首选方案。