AI時代，PPT的未來是HTML，一個神奇的 Skills 推薦

讓 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 封面 · 實時預覽

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

一行命令把素材庫塞進 Agent

安裝就一句

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 的幾何塊，一眼能看出彼此差異：

36 主題 · 其中 8 個

我點進 templates/themes/ 看了一圈，cyberpunk、tokyo-night、bauhaus、小紅書白、商務深藍……每套都是一個獨立 CSS 文件，把字體、色板、陰影、間距、卡片圓角、強調色、引文樣式一次性定好，換主題就是換一行 link，整套 deck 立刻換皮

更關鍵的是每套主題都做了 scoped CSS 隔離，同一份 HTML 文件里塞兩套主題不會互相污染，這點小細節決定了你能不能在一份周報里同時放產品發布頁和內部數據頁兩種風格

15 套完整 deck 是用來抄作業的

下圖是 15 套 deck 的封面拼圖，pitch-deck、周報、小紅書 9 圖、技術分享，每套都自帶配色和節奏：

15 套完整 deck 模板

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 的效果都封裝好了：

47 個動效 · 27 CSS + 20 Canvas FX

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

入場也做了自動化，每個動效組件都監聽了 reveal.js 的 slidechanged 事件，翻到這一頁才開始跑，翻走自動停，性能不會被一堆同時跑的粒子拖崩

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

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

演講者模式 · 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 豈不美哉？

結果如下：

8 頁總覽拼圖

封面頁單獨放大看：

這套 deck 用的是倉庫自帶的 tech-sharing 主題，所有漸變色文字、卡片樣式、kicker 標簽都是模板原生提供的，我只往里塞中文文案，CSS 一行沒動，這是這個 skill 最直接的價值——把 PPT 設計權交給模板維護者，讓你這個內容創作者只關心一件事：把內容講清楚

我的實際用法

現在我讓 Claude Code 做任何演示材料，prompt 模板都固定成三段：第一段說目標受眾和場景，第二段貼主題偏好和參考案例，第三段把素材丟過去，Claude 拿到之后會先回復"我準備用 X 主題 + Y deck 模板，加 Z 動效，你看 ok 嗎"，確認完才開始生成

這種工作流里，Agent 從一個"全靠靈感的 PPT 設計師"變成了一個"有素材庫的 PPT 裝配工"，前者隨機性大、產出不可預期，后者每次都穩定在一個能用的水位以上

制作不易，如果這篇文章覺得對你有用，可否點個關注。給我個三連擊：點贊、轉發和在看。若可以再給我加個，謝謝你看我的文章，我們下篇再見！