AI时代，PPT的未来是HTML，一个神奇的 Skills 推荐|css|html|ppt|幻灯片|素材库

让 AI 做 PPT ，我之前一直在两端之间来回踱步，一端是 Marp、Slidev 这类 Markdown 工具，结构干净但视觉一眼看穿；

另一端是直接让模型生成 reveal.js 整页 HTML，每页都得现搭骨架，主题、动画、版式都要重新交代一遍，模型一旦上下文一长就开始忘前面定的样式

最近翻到 lewislulu 开源的 html-ppt-skill，把这两端的纠结直接绕过去了，它给 Claude Code / Cursor 这类带 skill 系统的 Agent 装上一整套预置素材库，36 套主题、15 套完整 deck、31 个单页布局、47 个动效全部躺在仓库里随取随用，做出来的 PPT 是纯静态 HTML/CSS/JS，浏览器双击就开

仓库地址：github.com/lewislulu/html-ppt-skill

下面是仓库首页的封面动图，封面页本身就是用这个 skill 生成的，左下角实时预览能看到它跑动效的状态：

html-ppt 封面 · 实时预览

我用文字总结了一张能力速查图，方便你先看个全貌：

安装就一句

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

跑完之后，Agent 的工作目录里会多出 templates/ 目录，里面分了 themes/、full-decks/、single-page-layouts/、animations/ 四块，从此再让 Claude 做 PPT，它不用从零写 CSS，而是先读 templates 索引，挑配色、挑布局、挑动画，把现成的卡片拼起来，最后只往里塞业务文案

这种"先选后填"的工作流让我意识到一件事：之前模型生成 PPT 慢、丑、不一致，瓶颈不在模型，瓶颈在它每次都得重发明轮子

36 套主题不只是换配色

下图是仓库放出的 8 套主题预览，cyberpunk 的霓虹紫、tokyo-night 的深蓝、bauhaus 的几何块，一眼能看出彼此差异：

我点进 templates/themes/ 看了一圈，cyberpunk、tokyo-night、bauhaus、小红书白、商务深蓝……每套都是一个独立 CSS 文件，把字体、色板、阴影、间距、卡片圆角、强调色、引文样式一次性定好，换主题就是换一行 link，整套 deck 立刻换皮

更关键的是每套主题都做了 scoped CSS 隔离，同一份 HTML 文件里塞两套主题不会互相污染，这点小细节决定了你能不能在一份周报里同时放产品发布页和内部数据页两种风格

15 套完整 deck 是用来抄作业的

下图是 15 套 deck 的封面拼图，pitch-deck、周报、小红书 9 图、技术分享，每套都自带配色和节奏：

full-decks/ 下有 pitch-deck、周报、小红书 9 图、产品发布、技术分享、课程讲义等等，每一套都是写完文案、配好动画、连好导航的可直接演示的成品，Agent 拿到任务，先去这里找最贴近的 deck，复制一份再改文案，比让它从空白页搭起快得不止一个量级

我自己测的体感：让 Claude 生成一份 12 页技术分享 PPT，没有 skill 时它会反复犹豫每页该用啥布局，平均 8 分钟一份还经常版式翻车；装上 skill 之后，它直接说"我用 minimal-tech 主题 + technical-talk deck 模板"，3 分钟出一份能直接讲

31 个单页布局补齐长尾

仓库里有一张动图把 31 种布局轮播一遍，每张都是真实模板渲染出来的，能直观看出哪些是你常用的版式：

31 种布局通过真实模板文件自动循环播放

15 套 deck 解决主线，剩下的 31 个单页布局解决长尾，cover 页、目录页、对比表、时间线、KPI 看板、引用页、代码页、Q&A 页、致谢页……每页都带一份示例数据，Agent 看一眼就知道结构怎么填

写 PPT 最折磨人的从来不是主线那几页，而是"我这里需要一个三栏对比怎么排"，这种零散需求过去全靠模型现编 flexbox，现在直接 templates/single-page-layouts/comparison-3col.html 拷出来填字

47 个动效里藏了 20 个 Canvas FX

下图是 47 个动效的全家福， Canvas FX，粒子、烟花、矩阵雨这些过去要手撸 shader 的效果都封装好了：

动效目录分两类：27 个 CSS 动画解决文字入场、卡片浮起、渐变背景这类常规需求；20 个 Canvas FX 是真有意思的部分，粒子穿梭、烟花炸裂、矩阵雨、流体波纹这些过去要手撸 shader 才搞得出来的效果，每个都封装成一个加一段初始化脚本

入场也做了自动化，每个动效组件都监听了 reveal.js 的 slidechanged 事件，翻到这一页才开始跑，翻走自动停，性能不会被一堆同时跑的粒子拖崩

演讲者模式是这个 skill 真正杀手的地方

下图是按 S 之后的实际效果，主屏幕的 deck 还在原地，4 个磁吸卡片在四角飘出来：

按 S 键唤起演讲者模式，屏幕上漂出 4 个磁吸卡片：当前页大预览、下一页小预览、本页逐字稿、计时器，看一眼这布局熟不熟悉——和 Keynote 演讲者视图几乎一比一

实现思路有两个细节值得拆开讲，第一，当前页和下一页的预览不是单独再渲染一次，而是用 ?preview=N 参数让同一份 deck HTML 自己渲染单页，主窗口和预览窗口共用一份代码，主题、字体、动画的状态像素级一致，翻页零闪烁，第二，主窗口和卡片之间用 BroadcastChannel 加 postMessage 双通道同步，一边监听键盘事件，一边把当前 slide index 广播出去，多窗口状态从来不会错位

逐字稿这块也有几条铁律写在 skill 文档里：提示信号（"接下来我们看……"）不写进讲稿、每页 150-300 字、用真正的口语而不是把幻灯片文字念一遍，templates/full-decks/presenter-mode-reveal/ 里每页都给了示例逐字稿可以照抄结构

纯静态零构建是最让我安心的一点

整个产物没有 webpack、没有 vite、没有 npm install、没有任何依赖管理，一份 deck 就是一份 index.html 加几个相对路径的 css 和 js，扔到 GitHub Pages、扔到 Vercel、扔到任何对象存储，甚至直接 python -m http.server 都能演示

这意味着你交付给客户的就是一个文件夹，他用 Chrome 打开就能看，不用装 Node、不用装 PowerPoint、不用考虑版本兼容，这件小事直接把 PPT 的分发成本砍到了零

案例：把这篇文章本身做成一份 PPT

既然 skill 这么好用，那把这篇文章本身用它转一遍 PPT 岂不美哉？

结果如下：