AI做PPT换个思路：html-ppt-skill直接输出HTML演示文稿

20天，2600+ Star。又一个做 PPT 的项目在 GitHub 火了，叫 html-ppt-skill。

它做的事情听起来很简单：让 AI 帮你做 PPT。自带36套主题、31种布局、47个动效，还有一个像素级精确的演讲者模式。

html-ppt-skill 不生成 PPTX 文件，而是直接输出一份纯静态的 HTML 文件，零构建、零依赖、AI 原生，双击打开浏览器就能演示。

它本质上是一个 AgentSkill——AI Agent 的插件。装好后直接告诉 AI 你要什么：

做一份微服务架构的技术分享，10页，暗色主题，要有架构图和代码示例

AI 会自动选择模板、主题、布局，输出一个完整的 HTML 文件。双击打开，按 F 全屏，直接演示。

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个动效

27个 CSS 动画加上20个 Canvas FX。前者轻量，适合常规入场。后者是手写的 canvas 模块，粒子爆发、星空飞行、神经网络脉冲这种电影级效果，适合封面或关键时刻。

为什么是 HTML 而不是 PPTX

作者的想法很明确：零构建。生成的文件不需要安装任何软件，双击用浏览器打开就能演示。没有 node_modules，没有构建步骤，只有 CDN 上的字体文件。对于开发者来说，这种方式比打开 PowerPoint 顺滑太多。

演讲者模式

按 S 键，会弹出一个独立的演讲者窗口。里面有四个可拖拽、可缩放的磁吸卡片：当前页预览、下一页预览、逐字稿、计时器。

每个预览卡片其实是一个 iframe，加载的是同一份 HTML 文件，只是 URL 多了一个 ?preview=N 参数。这意味着预览和观众看到的是完全相同的 CSS、主题、字体、viewport——像素级精确，不会出现"预览和实际不一样"的尴尬。

翻页的时候，演讲者窗口通过 BroadcastChannel 和主窗口同步，用 postMessage 通知 iframe 切换页面。整个过程不重新加载页面，不白屏，不闪烁。

如何使用

先运行 npx skills add https://github.com/lewislulu/html-ppt-skill 把它装成 AgentSkill，然后在支持的 AI Agent 里直接说需求。如果用的是 Claude Code，它会自动调用这个 skill 生成 HTML 文件。

不想装 skill 的话，也可以直接 git clone 仓库，用 ./scripts/new-deck.sh my-talk 创建新项目，然后用浏览器打开生成的 HTML。

生成好 HTML 文件后操作很简单：用浏览器打开，按 ←``→ 键翻页，按 F 进全屏，按 S 打开演讲者窗口。按 O 键会弹出一个幻灯片网格，快速预览所有页面。按 T 键循环切换36套主题。按 A 键会在当前页循环演示各种入场动画。

想导出 PDF 就用浏览器的打印功能，选择另存为 PDF 就行。

注意事项

目前它只能导出 PNG 图片格式，没法直接生成 PPTX。只能先执行 ./scripts/render.sh 你的PPT文件.html，借助无头 Chrome 把每一页单独渲染成 PNG，之后再手动粘贴到 PPT 里，或者用别的工具批量转成 PPTX。另外修改内容需要直接编辑 HTML 源码，对不懂前端、不会 HTML 的人来说上手门槛会偏高。

以前做技术分享，光是排版、调样式就得耗一两个小时。现在简单跟 AI 说清楚需求，几分钟就生成好，省下的时间专心打磨内容就行。

项目基于 MIT 协议开放。

开源地址：https://github.com/lewislulu/html-ppt-skill