Table of Contents
厭倦了 PPT 的排版地獄嗎？🤯 身為經常奔波於診間、會議室與講台的講者，我終於找到了終極解法：Everything as Code！結合 Gemini 與 Claude，把簡報當作「寫程式」，讓 AI 為你自動生成精美 HTML 簡報。來看看我的自動化工作流吧！👇 🚀👨⚕️💻 #AI #自動化 #簡報技巧 #RevealJS
Tired of PPT formatting hell? 🤯 I’ve fully transitioned to an “Everything as Code” presentation workflow! By combining Gemini’s logic & Claude’s coding skills, you can generate beautiful HTML presentations directly from Markdown. Check out my automated pipeline! 👇 🚀💻 #AI #Productivity #RevealJS
身為經常需要站在台上的講者，我的日常充滿了各種不同受眾的簡報需求。在醫學院裡，我要講授「醫學資訊管理」與「智慧科技與醫療實務」；在醫院裡，我需要主持品質管理會議、處理 RCA（根本原因分析）與 QCC（品管圈）的報告，甚至還要為了醫學中心評鑑準備大量資料；而在門診，我又需要製作淺顯易懂的腎臟病衛教素材。
面對如此龐雜且風格迥異的簡報需求，過去幾年我一直在尋找最有效率的生產工具。從傳統的 PowerPoint，到學術界愛用的 LaTeX，再到主打 AI 生成的 Gamma，我幾乎試過了一輪。而現在，我找到了一個終極解法：捨棄傳統簡報軟體，把簡報當作「寫程式」來處理，全面擁抱 Agent-assisted HTML 工作流。
這篇文章，我想和大家分享這場簡報工具的變革，以及我是如何透過 AI Agent 打造自動化的簡報產線。
工具大 PK：排版控制權與製作效率的取捨
簡報工具的演進，本質上是我們對「排版控制權」與「製作效率」之間取捨的過程。
PowerPoint 的普及率極高，但它是標準的「排版地獄」。內容與視覺深度綁定，為了對齊一個文字方塊或圖表，往往耗費大量無意義的時間。
LaTeX (Beamer) 堪稱學術界的活字印刷術。處理複雜的數學公式或追求極致嚴謹的格式無可挑剔。但語法相對生硬，要微調視覺設計（例如調整圖片位置）時極度缺乏彈性，在 AI 時代有種「殺雞用牛刀」的感觸。
Gamma 是令人驚豔的現代化工具，能夠一鍵生成極具設計感、排版精美的版面。它的生成速度極快，但在技術演講的情境下就顯得有些捉襟見肘。它難以深度客製化，無法輕易嵌入複雜的程式碼區塊、動態圖表或前端套件，且需要持續支付訂閱費用。
Agent-assisted HTML (例如 Reveal.js 等框架) 則是現代開發者的終極武器。透過程式碼生成簡報，意味著支援版本控制 (Git)，且能無縫接軌平日處理的 Markdown 筆記、Python 腳本或 n8n 工作流。它將內容與視覺徹底分離，是兼具彈性與效率的最佳解。
AI Agent 實戰比較：誰才是簡報生成的最佳助手？
在 Everything as Code 的工作流中，我們不需要自己手刻 HTML，而是交由 AI 代勞。目前市面上的主流 AI 工具各有千秋。
Google Gemini 是脈絡與資訊萃取的王者。它擁有強大的長文本上下文（Context Window）處理能力。當面對龐大的醫院評鑑條文、長篇的醫學文獻，或是複雜的品管專案紀錄時，把它們全部丟給 Gemini，請它「提取核心重點並轉化為 15 頁的簡報大綱」，它能精準吃下極大的資訊量而不遺漏關鍵細節。
Claude Code 則是前端視覺與排版的首選。在最終的 HTML 產出上，Claude 寫出的前端程式碼異常乾淨，且「預設美感」極佳。無論是指令它生成「適合長者閱讀的大字體、高對比腎臟病衛教樣板」，還是「充滿深色科技感的 AI 演講樣板」，產出的結果通常一次到位。
OpenAI (GPT-4o / Codex) 具備頂尖的穩紮穩打邏輯大腦與資料結構轉換能力。不過在純網頁 UI/UX 的預設美感上，有時顯得較為傳統，通常需要比 Claude 更多的提示詞來微調視覺細節。
實戰拆解：從發想到成品的自動化生產線
我目前的簡報產出流程，已經完全標準化為幾個核心階段。
一切的起點在於發想與素材收斂。我會將平時累積的靈感、專案規格或技術架構（例如從 NotebookLM 中匯出的筆記）全部整理為純文字的 Markdown 檔案。這是簡報的靈魂，也就是所謂的 Single Source of Truth，完全不參雜任何排版設定。
接著進入結構化大綱階段。我會將這些素材交給 Gemini，讓它扮演大腦的角色，梳理出每一頁 Slide 的標題與核心要點，確保整體的邏輯推演順暢。
大綱確立後，便是程式碼生成的重頭戲。我會在命令列環境中喚醒 Claude Code，讓它讀取準備好的 Markdown 大綱，並指定套用 Reveal.js 框架與預先寫好的 CSS 樣板，瞬間就能生成完整的 HTML 簡報檔案。
最後是測試與微調。我會直接在瀏覽器開啟預覽，發現需要修改的地方，只需用語音或打字對 Agent 下達自然語言指令。AI 會即時修改程式碼並呈現結果，實現快速迭代。
終極建議：把做簡報變成「寫程式」
想要將這套流程發揮到極致，我強烈建議建立您專屬的「簡報專案資料夾」，用管理軟體專案的思維來管理您的演講。您可以參考以下的目錄結構：
presentation_project/
│
├── assets/ # 存放所有圖片、Logo、圖表
│ ├── hospital_logo.png
│ └── architecture_diagram.jpg
│
├── styles/ # 針對不同場合的 CSS 樣板
│ ├── tech_dark.css # 醫學資訊課程用的深色科技風
│ └── patient_care.css # 腎臟病衛教用的大字體高對比風
│
├── content.md # 您的簡報純文字大綱與內容 (Single Source of Truth)
└── index.html # 由 Agent 自動生成的最終簡報檔案 (搭配 Reveal.js)
建立好專案環境後，在終端機中，您只需要進行類似以下的簡單對話，就能自動化產出簡報：
Bash
# 在您的專案資料夾底下喚醒 Agent
$ claude
Claude: Hello! I'm ready to help. What are we working on today in presentation_project?
> 請讀取 content.md 裡面的大綱，這是一份關於「智慧科技與醫療實務」的課程簡報。
> 請使用 Reveal.js 框架建立 index.html，並套用 styles/tech_dark.css。
> 投影片需要包含轉場動畫，遇到 content.md 裡面的 Python 或 n8n 程式碼區塊時，請幫我加上語法高亮套件。
Claude:
> 讀取 content.md 完成。
> 讀取 styles/tech_dark.css 完成。
> 正在為您建構 Reveal.js 簡報...
> 📝 Created index.html (14 slides generated).
> ✨ 已經為您引入 highlight.js 來處理 n8n 與 Python 程式碼區塊的語法高亮。
> 🎨 已套用深色科技風主題與平滑轉場動畫。
> 請問是否需要啟動本地伺服器讓您預覽？
> 好的，請啟動。另外，把第 5 頁的 RCA 分析流程圖表改成左右兩欄的排版。
Claude:
> 🚀 Server running at http://localhost:8000
> 🔄 已將第 5 頁 (RCA 分析流程) 修改為兩欄式網格排版 (CSS Grid)。
[插圖建議 3] > 圖片描述：擷取自深色終端機 (Terminal) 的精緻 Mockup 圖片，畫面中顯示使用者與 Claude Code CLI 的上述互動對話，旁邊可以微微透出 Reveal.js 簡報的精美網格排版預覽。
這套流程最大的價值在於資產累積與重用。一旦您透過 AI 建立好了「學校授課」、「臨床衛教」、「醫院彙報」等幾套專屬的 CSS 樣板，未來的簡報製作，您就只需要專注於 content.md 的知識產出。
真正的效率，不是用更快的軟體去排版，而是徹底消滅手動排版的需求。如果您也具備一定的技術底子，不妨試試退訂那些昂貴的排版軟體，讓 AI Agent 幫您寫出一份完美的 HTML 簡報吧！