又一個神級 skill 開源 ! 好用很多。
整理版優先睇
html-ppt-skill 開源：AI 直接生成 HTML 版 PPT，零依賴、36 主題、演講者模式一流
呢篇文章介紹一個新開源項目 html-ppt-skill，由開發者 lewisulu 發佈，20 日就攞咗 2600+ Star。佢嘅核心係畀 AI Agent 幫你整 PPT，但唔係輸出傳統嘅 PPTX，而係一份純靜態 HTML 文件，雙擊瀏覽器就開得，完全唔使 Node.js 或其他依賴。
作者本身係開發者，成日要做技術分享，覺得每次排版調樣式嘥好多時間，所以諗到用 AI 生成 HTML 幻燈片，將時間放返喺內容上面。文章詳細講咗項目嘅設計理念、功能同限制，結論係呢個方案比起傳統 PPT 軟件慳水慳力，尤其適合技術人員快速製作演講投影片。
文章整理咗 36 套主題、31 種佈局、47 個動效，仲有像素級精確嘅演講者模式，支援即時切換主題、翻頁同步、逐字稿顯示等，實際使用感受幾好。作者亦坦白講咗限制：暫時只能匯出 PNG、修改內容要識 HTML，但整體嚟講係一個高質素嘅 AI 原生工具。
- html-ppt-skill 係 AI Agent 插件，用自然語言描述需求，AI 會自動揀模板、主題、佈局，生成可直接用瀏覽器打開嘅 HTML 文件。
- 內置 36 套主題（極簡、科技、商務、小紅書等）、31 種佈局（封面、目錄、圖表、流程圖等）同 47 個動效（27 CSS + 20 Canvas FX），覆蓋常見場景。
- 演講者模式（按 S 鍵）提供 4 個可拖拽磁吸卡片：當前頁預覽、下一頁預覽、逐字稿、計時器，透過 iframe 實現像素級同步，唔會有預覽異步問題。
- 整體思路同傳統 PPT 好大分別：輸出靜態 HTML，零構建零依賴，雙擊即用；支援鍵盤快捷鍵（方向鍵翻頁、T 轉主題、A 試動效、O 顯示縮略圖網格）。
- 目前限制係只能匯出 PNG（用 render.sh 逐頁渲染）同埋需要直接修改 HTML 源碼，對非開發者門檻較高；但對於技術人員嚟講，省翻大量排版時間。
html-ppt-skill
AI Agent 插件，讓 AI 根據描述生成 HTML 格式的幻燈片。
快速安裝與使用
運行 npx skills add 即可安裝為 AgentSkill，然後在 AI Agent 中描述需求；或直接 git clone 倉庫，用 scripts/new-deck.sh 創建新項目。
開源地址
GitHub 倉庫，包含源碼、文檔、模板展示。
項目定位：AI 原生、零構建、直接輸出 HTML
html-ppt-skill 嘅核心特點係 AI 原生同 零依賴。佢唔係一個傳統嘅 PPT 生成器，而係一個 AgentSkill——AI Agent 嘅插件。裝咗之後，你只要直接同 AI 講想整咩 slides，例如「做一份微服務架構嘅技術分享，10 頁，暗色主題，要有架構圖同代碼示例」，AI 就會自動揀模板、主題、佈局，然後生成一個完整嘅 HTML 文件。
AI 原生
零依賴
AgentSkill
內容資源：36 主題、31 佈局、15 套真人模板
項目內置咗 36 套主題，覆蓋極簡、暗色、漸變、科技、出版、柔和、商務、效果等風格。由 minimal-white、editorial-serif 呢啲適合學術彙報嘅極簡風，到 cyberpunk-neon、terminal-green 呢啲適合技術分享嘅賽博風，再到 xiaohongshu-white、soft-pastel 呢啲適合小紅書圖文嘅柔和風，基本覆蓋常見場景。按 T 鍵可以實時切換主題，方便快速對比。
36 套主題
T 鍵
除咗主題，仲有 15 套完整模板，係從真實項目提煉出嚟。例如 tech-sharing 係 GitHub 暗底風格，專畀技術分享用；pitch-deck 係 YC 風格嘅融資路演模板；xhs-post 係 3:4 豎版嘅小紅書圖文模板；仲有一套 presenter-mode-reveal，每頁帶 150-300 字嘅示例逐字稿，配合演講者模式。
15 套完整模板
- 佈局有 31 種：封面、目錄、章節分隔、文字排版、數據圖表、代碼展示、時間線、架構圖、流程圖，每種帶真實示例數據。
- 動效有 47 個：27 個 CSS 動畫（輕量入場）同 20 個 Canvas FX（粒子爆發、星空飛行、神經網絡脈衝等電影級效果）。
31 種佈局
47 個動效
演講者模式：像素級精確、無閃爍同步
呢個項目喺演講者模式落咗好多功夫。按 S 鍵會彈出一個獨立窗口，裏面有四個可拖拽、可縮放嘅磁吸卡片：當前頁預覽、下一頁預覽、逐字稿、計時器。每個預覽卡片其實係一個 iframe，加載同一份 HTML 文件，只係 URL 多咗 ?preview=N 參數，確保預覽同觀眾睇到嘅 CSS、主題、字體、viewport 完全一致——像素級精確。
S 鍵
iframe
像素級精確
翻頁時，演講者窗口透過 BroadcastChannel同主窗口同步，用 postMessage通知 iframe 切換頁面，整個過程唔重新加載、唔白屏、唔閃爍。
BroadcastChannel
postMessage
使用方式同目前限制
最低門檻嘅用法係先執行 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 創建新項目。
npx skills add https://github.com/lewislulu/html-ppt-skill
./scripts/new-deck.sh my-talk
目前有兩個限制：第一，只能匯出 PNG，要先執行 ./scripts/render.sh 你的PPT文件.html，藉助無頭 Chrome 逐頁渲染成 PNG，再手動貼入 PPT 或用其他工具批量轉 PPTX。第二，修改內容需直接編輯 HTML，對唔識前端嘅人門檻較高。
只能匯出 PNG
修改內容需直接編輯 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呢類適合技術分享嘅Cyber風格。
再到xiaohongshu-white、soft-pastel呢類適合小紅書圖文嘅柔和風，基本上覆蓋咗常見場景。
撳T掣可以實時切換主題，方便快啲對比效果。。
除咗主題，佢仲提供咗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？
點解係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 鍵，佢會喺當前頁循環演示各種入場動畫，揀一個鍾意嘅記低，返轉頭改HTML加上去就得。
如果你只想感受嚇佢嘅效果，可以直接打開倉庫裏面嘅 templates/theme-showcase.html。
呢個係36套主題嘅展示頁面，每一頁用獨立嘅iframe渲染，避免樣式互相干擾。
或者打開 templates/full-decks-index.html，瀏覽全部15套完整模板。
呢啲都係現成嘅HTML檔案，雙擊就可以睇。
想匯出PDF就用瀏覽器嘅功能，用打印功能，揀另存做PDF就得。
幫你潤色得更流暢、口語自然、邏輯通順，直接用得：
不過最後仲有兩個小問題想同大家提一提。
目前它只能匯出PNG圖片格式，冇辦法直接生成PPTX。 要先執行
./scripts/render.sh 你的PPT文件.html，藉助無頭Chrome將每一頁單獨渲染成PNG，之後再手動貼入PPT度，或者用其他工具批量轉成PPTX。另外修改內容需要直接編輯HTML原始碼，對唔識前端、唔識HTML嘅人嚟講，上手門檻會偏高。
寫在最後
以前做技術分享，單係排版、調樣式就要用一兩個鐘。而家簡單同AI講清楚需求，幾分鐘就生成好，慳返啲時間專心打磨內容就得。
就好似揸車由手動波轉成自動波咁，雖然冇咗手動操控嘅感覺，但係真係省事、省心好多。
項目係基於MIT協議開放，有興趣嘅朋友可以去GitHub倉庫睇下原始碼同文檔。
開源地址：https://github.com/lewislulu/html-ppt-skill
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 套從真實項目裏提煉出來的完整模板。
比如 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？
為什麼是 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 鍵，它會在當前頁循環演示各種入場動畫，挑一個喜歡的記下來，回頭改 HTML 加上就行。
如果你只是想先感受一下它的效果，可以直接打開倉庫裏的 templates/theme-showcase.html。
這是 36 套主題的展示頁面，每一頁用獨立的 iframe 渲染，避免樣式互相污染。
或者打開 templates/full-decks-index.html，瀏覽全部 15 套完整模板。
這些都是現成的 HTML 文件，雙擊就能看。
想導出PDF就用瀏覽器的功能，用打印功能，選擇另存為 PDF就行。
給你潤色得更流暢、口語自然、邏輯通順，直接可用：
不過最後還有兩個小問題想跟大家提一下。
目前它只能導出 PNG 圖片格式，沒法直接生成 PPTX。 只能先執行
./scripts/render.sh 你的PPT文件.html，藉助無頭 Chrome 把每一頁單獨渲染成 PNG，之後再手動粘貼到 PPT 裏，或者用別的工具批量轉成 PPTX。另外修改內容需要直接編輯 HTML 源碼，對不懂前端、不會 HTML 的人來說，上手門檻會偏高。
寫在最後
以前做技術分享，光是排版、調樣式就得耗一兩個小時。現在簡單跟AI說清楚需求，幾分鐘就生成好，省下的時間專心打磨內容就行。
就跟開車從手動擋換成自動擋一樣，雖說少了點手動操控的感覺，但是真的省事、省心太多了。
項目基於 MIT 協議開放，感興趣的同學可以去 GitHub 倉庫看看源碼和文檔。
開源地址：https://github.com/lewislulu/html-ppt-skill