AI時(shí)代，PPT的未來是HTML，一個(gè)神奇的 Skills 推薦

讓 AI 做 PPT ，我之前一直在兩端之間來回踱步，一端是 Marp、Slidev 這類 Markdown 工具，結(jié)構(gòu)干凈但視覺一眼看穿；

另一端是直接讓模型生成 reveal.js 整頁(yè) HTML，每頁(yè)都得現(xiàn)搭骨架，主題、動(dòng)畫、版式都要重新交代一遍，模型一旦上下文一長(zhǎng)就開始忘前面定的樣式

最近翻到 lewislulu 開源的 html-ppt-skill，把這兩端的糾結(jié)直接繞過去了，它給 Claude Code / Cursor 這類帶 skill 系統(tǒng)的 Agent 裝上一整套預(yù)置素材庫(kù)，36 套主題、15 套完整 deck、31 個(gè)單頁(yè)布局、47 個(gè)動(dòng)效全部躺在倉(cāng)庫(kù)里隨取隨用，做出來的 PPT 是純靜態(tài) HTML/CSS/JS，瀏覽器雙擊就開

倉(cāng)庫(kù)地址：github.com/lewislulu/html-ppt-skill

下面是倉(cāng)庫(kù)首頁(yè)的封面動(dòng)圖，封面頁(yè)本身就是用這個(gè) skill 生成的，左下角實(shí)時(shí)預(yù)覽能看到它跑動(dòng)效的狀態(tài)：

html-ppt 封面 · 實(shí)時(shí)預(yù)覽

我用文字總結(jié)了一張能力速查圖，方便你先看個(gè)全貌：

一行命令把素材庫(kù)塞進(jìn) Agent

安裝就一句

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

跑完之后，Agent 的工作目錄里會(huì)多出 templates/ 目錄，里面分了 themes/、full-decks/、single-page-layouts/、animations/ 四塊，從此再讓 Claude 做 PPT，它不用從零寫 CSS，而是先讀 templates 索引，挑配色、挑布局、挑動(dòng)畫，把現(xiàn)成的卡片拼起來，最后只往里塞業(yè)務(wù)文案

這種"先選后填"的工作流讓我意識(shí)到一件事：之前模型生成 PPT 慢、丑、不一致，瓶頸不在模型，瓶頸在它每次都得重發(fā)明輪子

36 套主題不只是換配色

下圖是倉(cāng)庫(kù)放出的 8 套主題預(yù)覽，cyberpunk 的霓虹紫、tokyo-night 的深藍(lán)、bauhaus 的幾何塊，一眼能看出彼此差異：

36 主題 · 其中 8 個(gè)

我點(diǎn)進(jìn) templates/themes/ 看了一圈，cyberpunk、tokyo-night、bauhaus、小紅書白、商務(wù)深藍(lán)……每套都是一個(gè)獨(dú)立 CSS 文件，把字體、色板、陰影、間距、卡片圓角、強(qiáng)調(diào)色、引文樣式一次性定好，換主題就是換一行 link，整套 deck 立刻換皮

更關(guān)鍵的是每套主題都做了 scoped CSS 隔離，同一份 HTML 文件里塞兩套主題不會(huì)互相污染，這點(diǎn)小細(xì)節(jié)決定了你能不能在一份周報(bào)里同時(shí)放產(chǎn)品發(fā)布頁(yè)和內(nèi)部數(shù)據(jù)頁(yè)兩種風(fēng)格

15 套完整 deck 是用來抄作業(yè)的

下圖是 15 套 deck 的封面拼圖，pitch-deck、周報(bào)、小紅書 9 圖、技術(shù)分享，每套都自帶配色和節(jié)奏：

15 套完整 deck 模板

full-decks/ 下有 pitch-deck、周報(bào)、小紅書 9 圖、產(chǎn)品發(fā)布、技術(shù)分享、課程講義等等，每一套都是寫完文案、配好動(dòng)畫、連好導(dǎo)航的可直接演示的成品，Agent 拿到任務(wù)，先去這里找最貼近的 deck，復(fù)制一份再改文案，比讓它從空白頁(yè)搭起快得不止一個(gè)量級(jí)

我自己測(cè)的體感：讓 Claude 生成一份 12 頁(yè)技術(shù)分享 PPT，沒有 skill 時(shí)它會(huì)反復(fù)猶豫每頁(yè)該用啥布局，平均 8 分鐘一份還經(jīng)常版式翻車；裝上 skill 之后，它直接說"我用 minimal-tech 主題 + technical-talk deck 模板"，3 分鐘出一份能直接講

31 個(gè)單頁(yè)布局補(bǔ)齊長(zhǎng)尾

倉(cāng)庫(kù)里有一張動(dòng)圖把 31 種布局輪播一遍，每張都是真實(shí)模板渲染出來的，能直觀看出哪些是你常用的版式：

31 種布局通過真實(shí)模板文件自動(dòng)循環(huán)播放

15 套 deck 解決主線，剩下的 31 個(gè)單頁(yè)布局解決長(zhǎng)尾，cover 頁(yè)、目錄頁(yè)、對(duì)比表、時(shí)間線、KPI 看板、引用頁(yè)、代碼頁(yè)、Q&A 頁(yè)、致謝頁(yè)……每頁(yè)都帶一份示例數(shù)據(jù)，Agent 看一眼就知道結(jié)構(gòu)怎么填

寫 PPT 最折磨人的從來不是主線那幾頁(yè)，而是"我這里需要一個(gè)三欄對(duì)比怎么排"，這種零散需求過去全靠模型現(xiàn)編 flexbox，現(xiàn)在直接 templates/single-page-layouts/comparison-3col.html 拷出來填字

47 個(gè)動(dòng)效里藏了 20 個(gè) Canvas FX

下圖是 47 個(gè)動(dòng)效的全家福， Canvas FX，粒子、煙花、矩陣雨這些過去要手?jǐn)] shader 的效果都封裝好了：

47 個(gè)動(dòng)效 · 27 CSS + 20 Canvas FX

動(dòng)效目錄分兩類：27 個(gè) CSS 動(dòng)畫解決文字入場(chǎng)、卡片浮起、漸變背景這類常規(guī)需求；20 個(gè) Canvas FX 是真有意思的部分，粒子穿梭、煙花炸裂、矩陣雨、流體波紋這些過去要手?jǐn)] shader 才搞得出來的效果，每個(gè)都封裝成一個(gè) 加一段初始化腳本

入場(chǎng)也做了自動(dòng)化，每個(gè)動(dòng)效組件都監(jiān)聽了 reveal.js 的 slidechanged 事件，翻到這一頁(yè)才開始跑，翻走自動(dòng)停，性能不會(huì)被一堆同時(shí)跑的粒子拖崩

演講者模式是這個(gè) skill 真正殺手的地方

下圖是按 S 之后的實(shí)際效果，主屏幕的 deck 還在原地，4 個(gè)磁吸卡片在四角飄出來：

演講者模式 · 4 個(gè)磁吸卡片

按 S 鍵喚起演講者模式，屏幕上漂出 4 個(gè)磁吸卡片：當(dāng)前頁(yè)大預(yù)覽、下一頁(yè)小預(yù)覽、本頁(yè)逐字稿、計(jì)時(shí)器，看一眼這布局熟不熟悉——和 Keynote 演講者視圖幾乎一比一

實(shí)現(xiàn)思路有兩個(gè)細(xì)節(jié)值得拆開講，第一，當(dāng)前頁(yè)和下一頁(yè)的預(yù)覽不是單獨(dú)再渲染一次，而是用 ?preview=N 參數(shù)讓同一份 deck HTML 自己渲染單頁(yè)，主窗口和預(yù)覽窗口共用一份代碼，主題、字體、動(dòng)畫的狀態(tài)像素級(jí)一致，翻頁(yè)零閃爍，第二，主窗口和卡片之間用 BroadcastChannel 加 postMessage 雙通道同步，一邊監(jiān)聽鍵盤事件，一邊把當(dāng)前 slide index 廣播出去，多窗口狀態(tài)從來不會(huì)錯(cuò)位

逐字稿這塊也有幾條鐵律寫在 skill 文檔里：提示信號(hào)（"接下來我們看……"）不寫進(jìn)講稿、每頁(yè) 150-300 字、用真正的口語而不是把幻燈片文字念一遍，templates/full-decks/presenter-mode-reveal/ 里每頁(yè)都給了示例逐字稿可以照抄結(jié)構(gòu)

純靜態(tài)零構(gòu)建是最讓我安心的一點(diǎn)

整個(gè)產(chǎn)物沒有 webpack、沒有 vite、沒有 npm install、沒有任何依賴管理，一份 deck 就是一份 index.html 加幾個(gè)相對(duì)路徑的 css 和 js，扔到 GitHub Pages、扔到 Vercel、扔到任何對(duì)象存儲(chǔ)，甚至直接 python -m http.server 都能演示

這意味著你交付給客戶的就是一個(gè)文件夾，他用 Chrome 打開就能看，不用裝 Node、不用裝 PowerPoint、不用考慮版本兼容，這件小事直接把 PPT 的分發(fā)成本砍到了零

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

既然 skill 這么好用，那把這篇文章本身用它轉(zhuǎn)一遍 PPT 豈不美哉？

結(jié)果如下：

8 頁(yè)總覽拼圖

封面頁(yè)單獨(dú)放大看：

這套 deck 用的是倉(cāng)庫(kù)自帶的 tech-sharing 主題，所有漸變色文字、卡片樣式、kicker 標(biāo)簽都是模板原生提供的，我只往里塞中文文案，CSS 一行沒動(dòng)，這是這個(gè) skill 最直接的價(jià)值——把 PPT 設(shè)計(jì)權(quán)交給模板維護(hù)者，讓你這個(gè)內(nèi)容創(chuàng)作者只關(guān)心一件事：把內(nèi)容講清楚

我的實(shí)際用法

現(xiàn)在我讓 Claude Code 做任何演示材料，prompt 模板都固定成三段：第一段說目標(biāo)受眾和場(chǎng)景，第二段貼主題偏好和參考案例，第三段把素材丟過去，Claude 拿到之后會(huì)先回復(fù)"我準(zhǔn)備用 X 主題 + Y deck 模板，加 Z 動(dòng)效，你看 ok 嗎"，確認(rèn)完才開始生成

這種工作流里，Agent 從一個(gè)"全靠靈感的 PPT 設(shè)計(jì)師"變成了一個(gè)"有素材庫(kù)的 PPT 裝配工"，前者隨機(jī)性大、產(chǎn)出不可預(yù)期，后者每次都穩(wěn)定在一個(gè)能用的水位以上

制作不易，如果這篇文章覺得對(duì)你有用，可否點(diǎn)個(gè)關(guān)注。給我個(gè)三連擊：點(diǎn)贊、轉(zhuǎn)發(fā)和在看。若可以再給我加個(gè)，謝謝你看我的文章，我們下篇再見！