還在手動排 PowerPoint?我用 frontend-slides 把一篇技術文章直接做成可分享的 HTML 簡報
如果你有在接觸 AI 工具或簡報製作,這兩年來應該被很多 AI 製作簡報的工具疲勞轟炸。
從去年八月起至今,由於 Google 的 Nano Banana 圖像生成模型的誕生,很多人開始大量利用 NotebookLM、Gemini,或其他 AI 工具快速把內容整理出來,再搭配生圖,把一份簡報很快地做出一個「看起來很漂亮」的版本。
這條路當然有它的優點。
快,真的快。
畫面有時候也真的蠻好看。
可是你真的開始用,就會發現另外一個問題。
圖片也許漂亮,氣氛也許有了,但文字內容不一定那麼好改,很多時候會是內嵌圖片。
如果你後面想微調段落、重寫某一頁的標題、補一段說明,常常就沒有想像中那麼順,可能還要換平台轉檔或圖片OCR轉字或用遮罩覆蓋上字等方式。
更不用說,如果你希望它不是只有一張一張靜態頁面,而是比較像互動式、可部署、可公開分享的簡報頁,那條路又更繞。
另外,傳統 PowerPoint 也有一個很現實的問題。
如果你的簡報圖很多、檔案很大,事後不管是寄 Email、丟雲端,還是拿隨身碟複製,其實都沒有那麼輕鬆。
你做完是一回事,分享出去又是另一回事。可能還需要壓制轉換成沒有動畫效果的PDF檔才方便傳送。
但如果把簡報變成 HTML,就完全是另外一種感覺。
檔案通常小很多。
如果是公開頁面,甚至只要給一個超連結,大家就能直接看。
你不用擔心對方有沒有安裝 PowerPoint,也不用擔心版本跑掉。
對分享這件事來說,這其實方便很多。
我最近注意到的一個工具,剛好就是走這條路。
它叫做 frontend-slides。
這個工具最有意思的地方,不是 AI 幫你先寫一份投影片講稿。
而是 AI 直接把內容做成一份可以在瀏覽器裡播放的 HTML 簡報。
講白話一點,這不是「AI 幫你列 bullet points」。
比較像是「AI 幫你把內容做成一個簡報型前端頁面」。
frontend-slides 是什麼
zarazhangrui/frontend-slides 本身是一個以 Claude Code 為主要使用場景設計的 skill / 專案工具。
它的核心能力簡單來說包含:
- 把一份主題內容轉成動畫感比較強的 web slide
- 輸出成單一 HTML 檔
- CSS / JS 都能內嵌,不用另外拉一堆 build tool
- 可從零生成,也可以把既有的 PPT / PPTX 轉成 web slide
repo README 裡面講得很清楚,它要做的不是一套傳統簡報軟體。
它比較像是一個專門給 AI agent 用的簡報生成工作流。
我自己覺得這個點很重要。
因為它不是單純給你一個模板,然後叫你自己慢慢填字。
它其實是把一整套「做 slide 的前端方法」包成一個可以重複調用的流程。
像 repo 裡面,你會看到它不只是一個 SKILL.md。
它還拆出了:
STYLE_PRESETS.mdviewport-base.csshtml-template.mdanimation-patterns.md
這種拆法其實很聰明。
OpenAI 前陣子有一篇 Harness Engineering 提到一句我很有感的話,大意是:
給 agent 一張地圖,不要給它一本一千頁的手冊。
frontend-slides 某種程度上就是這種思路。
主 skill 先當地圖,其他檔案再當細部規格。
這樣 AI 比較不會一開始就被大坨規則壓死,也比較知道該去哪裡找真正需要的東西。
它跟一般 AI 做簡報,有什麼不一樣
這個工具真正的差異,可以分為三個部分:
1. 它不是只幫你寫內容
很多 AI 做簡報,最後交付的其實還是文字。
也就是大綱、頁面標題、幾個 bullet points。
你還是得把那些內容搬去 PowerPoint、Canva 或 Google Slides。
但 frontend-slides 不一樣。
它生成的不只是文字,而是連結構、畫面節奏、轉場、導覽、版面密度一起處理。
換句話說,它交付的是一份「可以直接播放」的東西。
這個差別其實很大。
2. 它是 web 原生,不是文件思維
傳統簡報再怎麼好看,本質上還是文件。
但 HTML slide 本質上比較接近前端頁面。
這代表什麼?
- 可以放上公開頁面
- 可以直接給超連結分享
- 可以跨裝置閱讀
- 可以保留互動感
- 後續還能再加一些比較輕量的前端效果
你會發現,這種東西慢慢不像我們熟悉的 PPT。
它比較像是一種介於簡報、網頁、展示頁之間的東西。
3. 它不是隨便把畫面做漂亮而已
這也是我覺得 frontend-slides 比較不一樣的地方。
它很明確地在 skill 裡面寫規則。
像每一頁必須 fit 100vh、內容密度有限制、字級與間距要用 clamp() 做 responsive、不能亂塞內容、不要做 generic AI slop 美學。
這代表它不是只想讓 AI 生出「看起來有做事」的畫面。
它是真的在逼 AI 做一份比較像樣、比較能分享、比較能維護的 web deck。
為什麼 HTML 簡報在分享上真的比較方便
這一點我反而覺得很多人一開始會低估。
我們平常做 PPT,常常會把心力都放在「做出來」。
但真的做完之後,下一步其實是「怎麼分享」。
這時 HTML 模式的優勢就很明顯。
第一,檔案通常比較小。
第二,不一定要傳檔案,很多時候只要傳連結。
第三,讀者不用再打開 PowerPoint 或 Google Slides,就能直接在瀏覽器看。
如果今天你做的是:
- 工具介紹
- 課程簡報
- 教學導覽
- 專案展示
- Pitch deck
這種分享性其實很重要。
你不是只是做給自己看。
你是要讓別人方便打開、方便回看、方便轉傳。
從這個角度來看,frontend-slides 其實不是只在解決「排版痛苦」。
它也在解決「簡報完成之後,怎麼更好分享」這件事。
frontend-slides 雖然是為 Claude Code 設計,但不代表只有 Claude Code 能用
這點我覺得很值得補充解釋一下。
frontend-slides 的原生使用情境,的確是 Claude Code。
這一點從 repo README 也看得很清楚。
但如果你把它看成一套「給 AI agent 使用的工作流規格」,事情就不一樣了。
因為它本質上不是只有一個神祕指令。
它其實是一整套可讀的規則與支援文件。
所以只要你手上的 AI agent 有能力:
- 讀 skill 檔
- 理解支援文件
- 依照規則輸出單檔 HTML
那理論上它就能用這套方法。
也就是說,不只是 Claude Code。
像 Codex、Antigravity、OpenClaw 這類 AI agent,其實都可以吃這套思路。
差別只在於:
- Claude Code 可能比較接近原生使用情境
- 其他 agent 則比較像是把這個 repo 當成一套可參考的生產規格
這也是我覺得這個專案不只是「某個特定平台的 plugin」而已。
它比較像是一個已經整理好的 AI-native slide workflow。
而我本身實際使用 Codex 呼叫這個工具來使用也完全沒有問題。
如果你想快速試一次,簡易部屬操作方式如下
如果你只是想先試,不一定要把它想得太複雜。
最前面其實可以先在終端機輸入:
git clone https://github.com/zarazhangrui/frontend-slides.git
cd frontend-slides如果你本來就是 Claude Code 使用者,README 裡建議的方式是:
/plugin marketplace add zarazhangrui/frontend-slides
/plugin install frontend-slides@frontend-slides如果不是,也沒關係。
你還是可以先把整個 repo clone 備份下來,讀它的 SKILL.md 與那些支援文件和腳本。
只要你手上的 AI agent 夠會讀規格,還是可以照這個 workflow 來做。
接著真正重要的,不是安裝指令本身。
真正重要的是你怎麼下需求。
例如你可以直接給它這種任務:(當然參考素材給的原完整,指令給的越清楚,產出一定會越到位)
請用 frontend-slides 幫我把這篇工具教學文章做成可分享的 HTML 簡報。講白話就是,先讓它知道:
- 這份內容是什麼
- 這份簡報是給誰看
- 你想要什麼風格
- 你最後要的是一份可分享的 HTML deck
這樣它產出的結果,通常會比你只隨興丟一句「幫我做簡報」好很多。
我實際怎麼用它:拿 OpenClaw 那篇文章做一份 HTML 簡報
通常我不會只看 repo 說明,然後就說某某工具多厲害。
我都是直接拿自己實際操作測試過的具體經驗來講。
原始素材是這兩個:
- 部落格文章:從零開始部署龍蝦 OpenClaw:Windows + WSL + Telegram + 多供應商入口,搭配免費與高 CP 值模型來源無痛暢用
- 對應 GitHub repo:taoyutsun/openclaw-windows-wsl-guide: Public guide for deploying OpenClaw on Windows 11 with WSL2, Telegram, and a multi-provider launcher.
接著我把需求講清楚:
- 要用
frontend-slides這個 skill 的思路來做 - 內容來源是文章與 repo,不是憑空幻想
- 要做成單檔 HTML 簡報
- 要考慮後續可以公開分享
最後的成果頁在這裡:
這次實際操作下來,AI agent 從無到有把這份 deck 生出來,再部署到 GitHub Pages,全自動處理前後還不到半小時。
這也是我覺得它最有說服力的地方。
因為這不是 repo 裡原本就附好的官方展示。
這是拿一篇真實文章與真實專案,實際跑出來的成果。
你點進去之後,就明白了。
你會看到:
- 它不是靜態長文頁
- 它有簡報節奏
- 有明確的視覺語言
- 有導覽感
- 而且可以直接用公開連結分享
這種感覺,其實已經不是「我把文章貼到投影片」而已。
它比較像是「我把一篇文章重新整理成一個可以展示的介面」。
而且,這也還只是沒有經過任何修改的初稿版本而已。
我覺得 frontend-slides 最適合的幾種情境
如果你問我,這東西最適合什麼情境?
我會說,它特別適合這幾種:
1. 把文章轉成分享型簡報
像這次 OpenClaw 這種案例就很典型。
原本是文章,但轉成 HTML deck 後,分享體驗就完全不同。
2. 把技術文件變成比較容易吸收的展示內容
有些技術文件不是內容不夠好。
只是一般人不太會想直接啃長篇 Markdown。
這時用 web slide 重組,很容易變得更好吸收。
3. 做工具介紹、workflow 導覽、課程講義
這種內容本來就很適合頁面化、節奏化。
HTML deck 在這裡很自然。
4. 想做一份可公開分享的簡報頁
如果你後面本來就想部署、想給別人連結、想用手機也能看,那 frontend-slides 這種路線就特別合理。
如果你的需求是多人一起協作、多人同時註解、來回批改,那傳統簡報平台還是有它的優勢。
但如果你的需求是「快速做出一份漂亮、能直接分享、視覺有感的 web slide」,這個工具真的很值得試。
它的限制也要先講清楚
這篇如果只講優點,其實也不公平。
frontend-slides 的限制我覺得至少有幾個。
1. 它不是零學習成本
你還是要稍微懂一點基本 terminal 操作,不然至少要會駕馭 AI agent。
如果你完全沒有碰過 Claude Code、AI agent、skill 這類工作流,一開始還是會有一點門檻。
2. 它不是內容判斷全自動
AI 可以幫你生成 deck。
但哪些段落該保留、哪些該拆頁、哪些該濃縮,這些還是需要人做判斷。
所以它不是神奇自動機器。
它比較像是把你的製作效率往前推一大截。
3. 原始素材如果太亂,結果也會受影響
如果你丟進去的內容本來就很散、很沒結構,AI 不會自動把它變成神作。
Garbage in, Garbage out.
它能幫你做得更快。 但不是無中生有。
4. 它適合 web slide,不等於完全取代所有簡報工具
有些正式企業場景,PPTX、Keynote、Google Slides 還是有它們的現實位置。
所以我不會說 frontend-slides 會全面取代傳統簡報工具。
比較精準的說法是:
它開出了一條很有意思的新路。
特別適合已經在用 AI 工作流的人。
Frontend-slides 把「內容」變成「介面」
這大概是我對 frontend-slides 最深的一個感受。
它真正有價值的地方,不只是做簡報比較快。
真正有意思的是,它正在把內容直接推向介面。
過去我們比較習慣這樣分:
- 文章是文章
- 簡報是簡報
- 網頁是網頁
但像 frontend-slides 這種工具,正在讓這三件事的邊界慢慢打薄。
一篇文章,不一定只能用文章方式被讀。
一份教學內容,不一定只能躺在 Markdown 或 Google Docs 裡。
如果 AI 已經可以幫你把內容轉成一個可展示、可分享、可部署的前端形式,那知識輸出的型態其實會自由很多。
所以我後來會覺得,這不是在講「怎麼更快做一份簡報」而已。
它其實是在提醒我們:
AI 已經不只是幫你補文字,它開始幫你處理展示形式本身。
結語
frontend-slides 或許不是每個人的場域都需要用到的工具。
但如果你本來就在用 AI agent、Claude Code、Codex、Antigravity、OpenClaw 這類工作流,
或者你真的已經受夠了每次做簡報都把時間花在調字級、喬留白、對齊物件,
那這個工具很值得你親手試一次。
因為它的重點不是 AI 幫你把字寫上投影片。
重點是,AI 已經協助你把簡報內容直接變成一個可展示、可分享、可部署的介面。
而 frontend-slides,就是目前很具體、也很容易讓人直接感受到這件事的一個例子。
覺得有趣的話,趕快部署來試用看看,體驗一下視覺的衝擊!
📌 延伸閱讀與實際成果連結:
- zarazhangrui/frontend-slides: Create beautiful slides on the web using Claude's frontend skills
- 從零開始部署龍蝦 OpenClaw:Windows + WSL + Telegram + 多供應商入口,搭配免費與高 CP 值模型來源無痛暢用
- taoyutsun/openclaw-windows-wsl-guide: Public guide for deploying OpenClaw on Windows 11 with WSL2, Telegram, and a multi-provider launcher.
- 從零開始部署龍蝦 OpenClaw | HTML 簡報
留言
張貼留言