20 天,2600+ Star。又一个做 PPT 的项目在 GitHub 火了,叫 html-ppt-skill。
它做的事情听起来很简单:让 AI 帮你做 PPT。自带 36 套主题、31 种布局、47 个动效,还有一个像素级精确的演讲者模式。
它不生成 PPTX 文件,而是直接输出一份纯静态的 HTML 文件——零构建、零依赖、AI 原生,双击打开浏览器就能演示。
项目定位:Agent Skill
html-ppt-skill 本质上是一个 Agent Skill——AI Agent 的插件。装好后,直接告诉 AI 你要什么:
做一份微服务架构的技术分享,10 页,暗色主题,要有架构图和代码示例
AI 会自动选择模板、主题、布局,输出一个完整的 HTML 文件。双击打开,按 F 全屏,直接演示。

36 套主题,覆盖全场景
项目内置了 36 套主题,覆盖极简、暗色、渐变、科技、出版、柔和、商务、效果等不同风格:
- 学术汇报:minimal-white、editorial-serif 等极简风
- 技术分享:cyberpunk-neon、terminal-green 等赛博风
- 小红书图文:xiaohongshu-white、soft-pastel 等柔和风
按 T 键可以实时切换主题,方便快速对比效果。

15 套完整模板
除了主题,项目还从真实项目中提炼出 15 套完整模板:
- tech-sharing:GitHub 暗底风格,专门给技术分享用
- pitch-deck:YC 风格的融资路演模板
- xhs-post:3:4 竖版的小红书图文模板
- presenter-mode-reveal:每页带 150-300 字示例逐字稿,配合演讲者模式
如果要准备一场正式分享,直接拿这套模板改内容就行。



31 种布局 + 47 个动效
布局
从封面、目录、章节分隔,到文字排版、数据图表、代码展示,再到时间线、架构图、流程图,31 种布局基本够用。每种布局都带真实的示例数据,复制粘贴就能用。

动效
47 个动效 = 27 个 CSS 动画 + 20 个 Canvas FX:
- CSS 动画:轻量,适合常规入场
- Canvas FX:手写的 canvas 模块,粒子爆发、星空飞行、神经网络脉冲等电影级效果,适合封面或关键时刻

为什么是 HTML 而不是 PPTX?
作者的选择很明确:零构建。
- 生成的文件不需要安装任何软件,双击用浏览器打开就能演示
- 没有 node_modules,没有构建步骤,只有 CDN 上的字体文件
- 对于开发者来说,比打开 PowerPoint 顺滑太多
演讲者模式:真正用心的地方
按 S 键,弹出一个独立的演讲者窗口,里面有四个可拖拽、可缩放的磁吸卡片:
- 当前页预览
- 下一页预览
- 逐字稿
- 计时器
每个预览卡片是一个 iframe,加载同一份 HTML 文件,只是 URL 多了一个 ?preview=N 参数。这意味着预览和观众看到的是完全相同的 CSS、主题、字体、viewport——像素级精确,不会出现"预览和实际不一样"的尴尬。

翻页时,演讲者窗口通过 BroadcastChannel 和主窗口同步,用 postMessage 通知 iframe 切换页面。整个过程不重新加载页面,不白屏,不闪烁。
快速上手
方式一:安装为 Agent Skill(推荐)
npx skills add https://github.com/lewislulu/html-ppt-skill
装好后在 Claude Code 等 AI Agent 中直接说需求,AI 会自动调用 skill 生成 HTML 文件。
方式二:直接克隆仓库
git clone https://github.com/lewislulu/html-ppt-skill
cd html-ppt-skill
./scripts/new-deck.sh my-talk
然后用浏览器打开生成的 HTML 文件。
操作快捷键
| 按键 | 功能 |
|---|---|
← → |
翻页 |
F |
全屏演示 |
S |
打开演讲者窗口 |
O |
幻灯片网格预览 |
T |
循环切换主题(36 套) |
A |
循环演示入场动画 |


主题展示与模板浏览
想先感受效果?仓库里提供了两个展示页面:
templates/theme-showcase.html:36 套主题展示,每页用独立 iframe 渲染,避免样式互相污染templates/full-decks-index.html:全部 15 套完整模板浏览


导出 PDF
用浏览器打印功能,选择"另存为 PDF"即可导出。
当前限制
- 只能导出 PNG:没法直接生成 PPTX。需执行
./scripts/render.sh 你的PPT文件.html,借助无头 Chrome 把每页渲染成 PNG,再手动粘贴到 PPT 或批量转换。 - 需编辑 HTML 源码:修改内容需要直接编辑 HTML,对不懂前端的人来说上手门槛偏高。
苏米注
html-ppt-skill 的出现,标志着 AI 生成演示文稿正在从"模拟传统"走向"原生 HTML"。
与 Gamma、Beautiful.ai 等 SaaS 方案相比,它的核心优势在于:① 零依赖:纯静态 HTML,双击即用,无需注册账号;② AI 原生:作为 Agent Skill 直接嵌入工作流,不需要在多个工具间切换;③ 演讲者模式:像素级精确的预览 + BroadcastChannel 同步,体验甚至优于传统 PPT。
对于技术分享、路演等场景,如果你习惯用浏览器演示,这套方案值得尝试。项目基于 MIT 协议开放,20 天 2600+ Star,活跃度极高。
GitHub:https://github.com/lewislulu/html-ppt-skill