簡報用寫的，不用拉的
open-slide × Claude Code 實戰工作流
2026 年 7 月，我用同一套流程做了三場講座的簡報，每份 60 頁上下，其中一份 63 頁從零到上場只花一天。 這篇把工具、流程、互動效果、踩過的坑全部攤開，文末還有一段專門寫給你的 AI 助手讀的規格。
open-slide 是一個「簡報就是程式碼」的開源框架：每一頁都是 AI 直接寫的網頁元件，你在瀏覽器點著看，對哪裡不滿意就在那個元素上留言，AI 一次套用全部修改。我的流程是：素材與目的釐清 → 自己擬大綱 → AI 出第一版 → 整份順過一次一起改 → 逐頁細修加動畫 → 配著動畫試跑 → 上線與 PDF 備援。文章開頭有複製就能用的一鍵啟動 prompt，文末有給 AI 助手讀的濃縮規格。
這篇寫給已經在用 Claude Code（或 Codex、Cursor 這類會動手做事的 AI 工具）的創作者。你不需要會寫程式，所有動手的部分都是 AI 做，你負責講內容跟給意見。 如果你連 Claude Code 都還沒碰過，建議先讀我在 2026 年 5 月寫的入門版簡報指南，那篇是零基礎向。 另外，這篇文章本身就設計成可以直接丟網址給你的 AI 助手讀，它讀完就知道怎麼幫你把整套流程跑起來。
不想看完整篇？複製這一段，貼進你的 Claude Code
這段話會把你的 AI 工具變成「open-slide 簡報引導助手」：它會先把環境架好，再一題一題問你，收齊素材後照我這套流程把簡報做出來，含驗收跟輸出。
📦 這段 prompt 裡面包了什麼
- 環境安裝：一行指令建好 open-slide 專案，附內建的 AI 引導文件
- 引導提問：場合時長、聽眾、素材、數字、視覺、語氣，一題一題問
- 大綱先確認：先給你大綱草稿，你點頭才動手做簡報，不會直接生一份出來
- 頁數換算：60 分鐘約 30 頁、90 分鐘約 50-65 頁的實戰公式
- 數字底稿：要上台的數字先建一份「數字｜來源｜日期」的檔，簡報只准引用這份
- 兩輪修改：初修整份順完一起改，細修才逐頁調呈現跟動畫
- 驗收流程：自動逐頁截圖檢查爆版與錯字，縮小 50% 模擬視訊畫質
複製貼上後，它會先幫你把環境架好，再從 Q1 開始問你
簡報做給 AI 改，比做給自己拉更快
2026 年 5 月我寫過一篇用單一 HTML 檔做簡報的方法，那套到現在還是好用。但當簡報變成 60 頁起跳、要改 60 多個地方的時候，我需要更工程化的做法。
先講結論：我現在所有講座簡報都用 open-slide 做。它是一個開源的簡報框架，核心概念一句話講完：每一頁簡報都是一段 AI 寫的程式碼，畫布固定 1920×1080，你在瀏覽器裡看結果。
裝起來只要一行，不用懂任何設定：
npx @open-slide/cli init my-deck # 建好之後進資料夾，啟動預覽 cd my-deck && npm run dev
對我來說，它贏過其他做法的地方有三個：
- 它幫 AI 準備好了說明書：初始化的專案內建三份給 AI 讀的文件，分別教 AI 怎麼起一份新簡報（create-slide）、排版規範是什麼（slide-authoring）、怎麼套用你的修改意見（apply-comments）。也就是說，你的 Claude Code 打開這個專案就知道規矩，不用你教。官方寫明支援 Claude Code、Codex、Cursor、Gemini CLI 等工具。
- Inspector 評論，這是殺手級功能：在瀏覽器裡點任何一個元素，直接留言「這行字大一點」「這頁太擠」，留言會存進程式碼裡，AI 一個指令全部套用。後面詳講。
- 輸出是純靜態網站：做完就是一個網站，丟上任何免費靜態空間就永久在線，觀眾用網址看，還能點裡面的互動元素。
| 傳統簡報軟體（PowerPoint / Canva） | 單檔 HTML 簡報 | open-slide | |
|---|---|---|---|
| AI 能不能直接改 | 難，要靠外掛或匯入匯出 | 能，但整份擠在一個檔，越長越難改 | 能，一頁一個元件，AI 改得又準又快 |
| 給修改意見的方式 | 口頭描述「第三頁那個標題」 | 口頭描述，AI 自己找位置 | 點著元素留言，AI 批次套用 |
| 版面自由度 | 模版內自由 | 完全自由 | 完全自由，畫布固定 1920×1080 不怕跑版 |
| 互動效果 | 內建動畫為主 | 要自己從零寫 | 任何網頁能做的都能做：燈箱、翻牌、進度條 |
| 適合規模 | 10-20 頁日常簡報 | 10-20 頁，單場用完即丟 | 40 頁以上，要反覆迭代的正式場 |
公平講一句：如果你的簡報是 10 頁的內部會議，傳統工具或單檔 HTML 做法就夠了。open-slide 的價值在長簡報、高標準、要改很多輪的場合。
十頁示範簡報，開來玩玩看
與其聽我描述互動效果，不如自己翻一次。
我做了一份十頁的示範簡報掛在網路上，這篇文章講的三種互動全部在裡面：章節進度條、翻牌卡、長截圖燈箱。內容就是這套流程本身，沒有任何講座內容，純粹讓你看版面跟互動長什麼樣子。
用鍵盤左右鍵換頁，按 F 進播放模式，互動元素才點得動。手機也開得起來，但版面會縮很小，建議用電腦看。
簡報變成程式碼之後，真正改變的不是「做」的速度，是「改」的速度：一輪幾十條修改意見，留言完喝杯水回來就改完了，這在傳統簡報軟體裡是一個下午的工。
從素材到上場的七步
工具只是下半場，上半場是內容工程。前兩步完全不碰工具，卻決定了簡報的品質上限；真正吃時間的是第四、第五步那兩輪修。
把手邊所有素材整理好：筆記、舊文章、貼文、會議記錄都算。同時把三件事講清楚：這場簡報的目的、聽眾是誰、他們的痛點在哪。這三件事沒想清楚，後面每一頁都會歪。素材交給 AI 整理時，每一條都要標出處，沒出處的就是它自己編的，直接刪。要上台的數字另外落一份「數字｜來源｜日期」的檔，之後簡報上的數字只准引用這份。
依照講課時間長度，自己先擬一份大綱。這步我不外包，直接叫 AI 出簡報，品質通常都不好，因為它不知道你想在哪裡停、哪裡要慢下來。頁數換算的實戰公式：60 分鐘約 30 頁、90 分鐘約 50-65 頁，章節頁跟總結頁幾秒就翻過去，可以比直覺多抓一點。版位順序：封面 → 開場掛鉤 → 目錄 → 各主題 → 踩坑 → QA → 一句話收尾。
大綱定了才讓 AI 動手，請它照著大綱一頁一頁做。加分技巧：把你自己的逐字稿或貼文丟給 AI，請它統計你的口頭禪跟句型，標題用你的語氣寫。我的簡報標題全是短判斷句，因為我講話就是這樣。
從頭到尾把簡報順一遍，邊看邊記下頁碼跟想改的地方。關鍵在全部順完再一次丟給 AI 改，不要看到一個改一個，一點一點改會跑很久。用瀏覽器裡的留言功能最順：看到不對就點那個元素留一條，留完整份再讓 AI 一次套用。
主結構穩了才進細節：這一頁的排版擠不擠、那一頁要不要加動畫。這階段就可以一頁一頁，或少量幾頁一起跟 AI 溝通。順手讓 AI 用 Playwright 逐頁截圖自己檢查一遍：爆版、對比度、錯字，再把截圖縮小 50% 看一次，模擬視訊會議裡觀眾看到的畫質。
搭配動畫從頭跑一次，一邊跑一邊想像自己正在講課。動畫不順的、多餘的，這時候最看得出來。這步很多人跳過，但它是「做完」跟「能上台」之間的那條線。
輸出 PDF 準備給主辦或學員；網頁上架到公開網址；另外私下再留一份。三重備援是為了兩種現場狀況：網路不好，或是電腦壞掉。PDF 的做法是用 Playwright 在播放模式逐頁截圖再合併，我習慣出兩版，一版高畫質自用，一版壓縮過的寄給觀眾（郵件附件有大小上限）。
四個讓觀眾「哇」一聲的版面，直接複製指令
以下四張圖都出自上面那份示範簡報，你可以開著它邊看邊翻。每張附一段自然語言指令，貼給你的 AI 工具，就能在你的簡報裡做出同款。
章節頁＋分段進度條 ｜ 長簡報的呼吸節奏
每個主題開始前插一頁只有編號跟標題的章節頁，配上頂部的分段進度條，右上角顯示目前章節與整場進度。觀眾隨時知道「現在講到哪、還剩多少」，60 頁的簡報才不會讓人迷路。
「白話說」圖解頁 ｜ 抽象概念的翻譯層
講抽象概念時，我固定加一頁「白話說」：左邊一個簡單的示意圖，右邊三張重點卡，最後一張用主色底強調結論，下面補一組打叉打勾的對錯對照，把「別人以為的做法」跟「實際該做的」擺在一起。概念頁講完接白話頁，是我看觀眾表情學到的事。
循環圖＋長截圖燈箱 ｜ 把證據帶上台
左邊是五個節點的循環圖，右邊放真實網站的截圖，寫上「點一下放大」。播放時點開，整個網站的長截圖蓋版出現，可以上下滾動給觀眾看完整頁面，比切出去開瀏覽器順太多，觀眾會覺得你有備而來。
🔧 背後的技術：換頁的點擊監聽掛在最外層的捕捉階段，元件內部攔不到，所以要在同一層掛守衛。有興趣再研究，沒興趣就直接把上面那段丟給 AI。
翻牌卡 ｜ 讓觀眾先猜、再揭曉
三張卡正面只放一句話，我先丟一個問題請觀眾在聊天室打 1、2、3，等大家答完再逐張點開翻面看答案。線上講座最缺參與感，翻牌是成本最低的互動。
所有互動元素在編輯畫面點不動（編輯器會吃掉點擊），要按 F 進播放模式才能點。給別人看線上版時記得先講這句，不然對方會以為壞掉了。
六個坑，我先踩過了
每一個都是實戰撞出來的，照做可以省掉重工。
圖片不壓縮，網站肥十倍
AI 會把原圖直接塞進簡報，我有一次上線前才發現整包 63MB，壓完只剩 6.5MB。規則交給 AI 執行：長截圖寬 1400 像素，其他圖最長邊 1500 左右，沒有透明需求的一律轉 jpg。
增刪頁面後，進度條沒跟上
章節進度條的分段是用頁碼區間定義的，加一頁刪一頁都要同步更新，漏了就會出現「明明講到第六章，進度條顯示第一章」的靈異現象。每次改頁數，固定提醒 AI 檢查這件事。
觀眾說內容怪怪的，其實是自動翻譯
有人回報簡報內容「被亂改」，查了半天一個字都沒變，原來是他的瀏覽器自動把頁面翻譯了。因為框架輸出的網頁預設標成英文，上線前請 AI 把語言標籤改成中文，再加上「不要翻譯」的標記。
PDF 不要用瀏覽器列印
滿版簡報用列印功能輸出幾乎必跑版。正解是請 AI 用 Playwright 在播放模式逐頁截高解析度圖，再合併成 PDF，有翻牌卡的頁面記得正反兩面各截一張。
數字沒有底稿，AI 會幫你「圓」出來
這是最危險的一個。AI 寫簡報時，缺數字它會生一個看起來很合理的，你上台講出去就回不來了。所以數字底稿要在建置之前先做，驗收時逐個數字回對來源。
評論要逐條處理，不要整批清掉
AI 套用完評論後會清理留言標記，要求它只刪已經處理完的那幾條。我習慣邊看邊留，AI 整批清理的話，會把我剛留的新評論一起洗掉。
簡報變成程式碼之後，改十輪的成本跟改一輪一樣低，而好簡報從來都是改出來的。
🤖 如果你是 AI 助手，讀這段就夠
這段是整篇文章的濃縮規格，寫給被丟了這個網址的 AI 工具。人類讀者可以跳過，或複製下來存進你自己的 AI 工具的知識庫。
看完記得這三件事就好
簡報的下一步不是更好的模版，是變成程式碼。程式碼 AI 才改得動，改得動才敢改十輪，敢改十輪品質才會跳級。
大綱一定要自己擬。目的、聽眾痛點、大綱這幾件事跟工具無關，卻決定你上台講的東西站不站得住。直接叫 AI 出簡報，品質通常都不好。
Inspector 評論是這套流程的靈魂。點著留言，批次套用，這個循環跑得越快，你的簡報離「能看」到「很強」就越近。
參考來源
- open-slide 官方網站：open-slide.dev
- open-slide GitHub（MIT 授權，6,100+ 顆星，2026 年 7 月底數字）：github.com/1weiho/open-slide
- 套件頁面：npmjs.com/package/@open-slide/core
- 本文的十頁示範簡報（文中四張版面截圖都出自這裡）：deck-openslide-demo.leadingmrk.com