以前用 AI 做簡報，最常見的流程是：先叫 AI 寫大綱，再把文字貼進 PowerPoint、Canva 或 Gamma，最後自己重新排版。
現在開始出現另一條路：直接讓 AI 生成一份可以播放的 HTML 簡報。
你提供主題、文章、逐字稿、提案或既有 PPTX，AI 直接建立投影片結構、版面、動畫與互動，最後交付一個瀏覽器可以打開的簡報。這就是目前常被稱為 AI HTML Presentation、HTML slides、web presentation 或 browser-native presentation 的做法。
它不是把網頁「做得像簡報」，而是把 HTML 當成簡報本身的交付格式。
AI HTML Presentation 是什麼？
最簡單的理解是：AI HTML Presentation 是由 AI 產生的網頁式簡報。
傳統 PowerPoint 會把文字、圖片、圖形放在 PPTX 檔案裡；HTML 簡報則把畫面與互動寫成網頁程式。常見做法會把每一張投影片做成固定 16:9 舞台，再用瀏覽器縮放整張投影片，而不是像一般手機網站那樣重新排列內容。
因此一份 HTML 簡報可以做到：
- 直接用 Chrome、Safari、Edge 等瀏覽器播放。
- 用方向鍵、滑鼠或觸控切換投影片。
- 加入 CSS 動畫與 JavaScript 互動。
- 放入圖表、時間軸、比較表、流程圖或程式碼。
- 依工具不同，加入講者備註、計時器或雙螢幕播放。
- 將 CSS 與 JavaScript 內嵌成單一 HTML，方便攜帶或版本管理。
但「單一 HTML」不一定代表所有圖片、字型與外部資料都已完全內嵌。是否能真正離線播放，還是要看簡報有沒有引用網路字型、圖片、影片或即時資料。
為什麼最近 AI HTML Presentation 開始變多？
關鍵不是 HTML 突然變得能做簡報。Reveal.js、網頁投影片與瀏覽器簡報早就存在。
真正的變化是：AI 程式代理現在已經能讀內容、寫檔案、修改程式、渲染畫面，再根據結果反覆修正。
過去要做一份好看的 HTML 簡報，你至少要懂 HTML、CSS、JavaScript，還要自己處理版面與響應。現在如果有一套成熟的簡報 Skill 或設計規則，使用者只需要講清楚內容、用途與風格，AI 就能完成大量施工。
這也讓 AI 簡報從「幫我寫投影片文字」往前走了一步，變成「直接幫我把簡報做出來」。
Frontend Slides：最具代表性的 AI HTML 簡報工作流之一
你網站原本這篇文章主要介紹 Frontend Slides，這個專案現在仍然很值得認識。
Frontend Slides 是 Zara Zhang 建立的 coding-agent Skill，目標是讓 AI 直接製作有動畫與設計感的 HTML 簡報，也支援把既有 PowerPoint 內容轉成網頁簡報。
它有幾個很重要的設計原則：
- 固定 16:9 舞台：以 1920×1080 建立投影片，再整張縮放到瀏覽器視窗。
- 先看再選：先產生視覺預覽，讓使用者看實際版本再選風格。
- 內容決定設計：不是每頁機械套同一種模板。
- 漸進式載入：先讀輕量樣式索引，真正選定風格後才讀完整設計規則。
- 可轉換 PPTX：先擷取既有 PowerPoint 的文字、圖片與備註，再重建成 HTML。
這也是 AI HTML Presentation 很值得學的一點：真正提高品質的通常不是「再多一個生成按鈕」，而是先把簡報設計與驗收規則寫清楚。
HTMLSlides：把 HTML 簡報延伸到實際播放與講者模式
2026 年另一個值得注意的專案是 HTMLSlides。它同樣走 AI 產生 HTML 簡報的路線，但進一步加入專門的播放 App。
目前官方網站主打的能力包括：
- AI 產生單一 HTML 簡報。
- 支援 Claude Code、Codex、Gemini CLI、GitHub Copilot 等 AI 程式代理。
- 講者備註與計時。
- 雙螢幕講者模式。
- 觀眾畫面同步。
- 互動元件、圖表、時間軸與程式碼區塊。
它的概念已經不是「做出 HTML」就結束，而是把產生簡報＋正式播放接成一套流程。
Modern PPT、SlideCraft 等工具也在做同一件事
現在 GitHub 上已經不只有一套 HTML 簡報 Skill。
例如 Modern PPT 主打固定的版面系統、圖表、動態效果與單檔 HTML；SlideCraft 則同時支援 HTML 與 PPTX，讓使用者可以依交付需求選擇瀏覽器版或可編輯 PowerPoint。
它們的共同方向很清楚：
讓 AI 不只是產生「投影片內容」，而是遵循一套設計系統，直接產生可播放的完整簡報。
所以如果你搜尋 AI HTML Presentation，不需要只找一個工具名稱。更重要的是比較各專案背後的工作流、視覺品質、可編輯性、播放方式與輸出格式。
AI HTML Presentation 和 PowerPoint、Gamma、Canva 有什麼差別？
| 方式 | 主要輸出 | 優勢 | 比較適合 |
|---|---|---|---|
| AI HTML Presentation | HTML | 互動、動畫、可程式化、瀏覽器直接播放 | 技術簡報、課程、產品展示、需要大量自動化的人 |
| PowerPoint | PPTX | 企業普及、拖拉修改容易、交接方便 | 企業提案、需要 PPTX 檔案的場合 |
| Gamma | 雲端簡報／頁面 | 生成速度快、操作門檻低 | 快速得到第一版內容與視覺 |
| Canva | 雲端設計／簡報 | 模板多、視覺資源完整、人工編輯直覺 | 品牌視覺、社群、非技術使用者 |
如果你主要想快速產出一般 AI 簡報，可以延伸看Gamma AI 簡報怎麼用？；如果你習慣用模板與拖拉編輯，也可以看Canva 簡報怎麼做？。
AI HTML Presentation 最大優點：版面可以被「程式化」
HTML 簡報真正有意思的地方，是每一個版面元素都可以用程式描述。
例如你可以要求：
- 所有投影片固定 16:9。
- 標題不得超過兩行。
- 每頁最小字級不得低於某個值。
- 資料型頁面固定使用統計卡或圖表。
- 動畫遵守同一套節奏。
- 品牌色、字型與間距從同一組變數控制。
- 每次產生後自動檢查 overflow、重疊與裁切。
對需要反覆製作課程、直播、提案或教學內容的人來說，這比每次重新拖拉版面更容易建立一致的製作流程。
真正決定品質的不是 HTML，而是渲染檢查
AI 很會寫出「看起來沒錯」的 HTML，但程式碼正確不代表畫面好看。
最常見的問題反而是：
- 中文標題換行後壓到圖片。
- 卡片高度超過投影片。
- 字體載入失敗後整個版面跑掉。
- 動畫初始狀態讓內容看不到。
- 小字在筆電看得見，投影到會議室卻完全看不清楚。
- 圖表或流程圖超出 16:9 舞台。
所以好的 AI HTML Presentation 工作流一定要包含渲染檢查（Render QA）。先產生 HTML，再把每一頁真的打開、截圖或渲染，找到問題後修正，才算完成。
這個觀念甚至比「使用哪一個 Skill」更重要。
AI HTML Presentation 適合講師、課程與直播嗎？
很適合，但要先把內容層和簡報層分開。
如果是課程或 Webinar，先決定教學順序、講者要說什麼、每一段要讓學員理解什麼，再交給簡報流程處理視覺。不要反過來為了漂亮版面改壞教學邏輯。
講者型簡報通常應該：
- 一頁只處理一個主要觀念。
- 畫面文字比閱讀型報告少。
- 把完整說明放進講者備註，而不是全部塞上投影片。
- 圖表與流程圖要能在投影環境快速看懂。
如果後續要錄成線上課程，也可以搭配OBS 錄課與螢幕錄製，直接播放瀏覽器簡報進行錄製。
Frontend Slides、HTMLSlides、Modern PPT、SlideCraft 怎麼選？
如果你只是第一次接觸 AI HTML Presentation，不需要把所有工具都裝一遍。先看你的交付需求，再選工作流會比較快。
| 工具 | 核心特色 | 比較適合 |
|---|---|---|
| Frontend Slides | 固定 16:9、先做視覺預覽、PPTX 轉換、強調設計流程 | 想建立完整 HTML 簡報製作規則的人 |
| HTMLSlides | HTML 生成加上專用播放 App、講者備註與雙螢幕模式 | 需要正式上台播放與講者模式的人 |
| Modern PPT | 固定版面系統、圖表與動態效果，快速產生單檔 HTML | 希望用明確版型快速完成商務或技術簡報 |
| SlideCraft | 同時支援 HTML 與 PPTX | 既想要網頁簡報，也要保留 PowerPoint 交付彈性的人 |
選擇時可以先問自己三個問題：
- 最終一定要交 PPTX 嗎？如果答案是要，就不要選只有 HTML 輸出的流程。
- 簡報主要是自己上台講，還是寄給別人閱讀？講者型簡報更重視播放、備註與投影；閱讀型簡報則更重視資訊密度。
- 你會不會反覆做同類型簡報？如果每個月都要做課程、直播或提案，能固定品牌色、字級、版面與檢查規則的工具，價值會比單次生成速度更高。
AI HTML Presentation 的提示詞要怎麼寫？
很多人第一次使用時只輸入「幫我做一份漂亮的 AI 簡報」，這種指令太模糊，模型只能自己猜內容密度、視覺風格與交付格式。
比較實用的提示方式，是把「內容、用途、觀眾、輸出與檢查」一次講清楚。例如：
請把這份文章整理成 12 張 16:9 的講者型 HTML 簡報。對象是第一次接觸這個主題的人，每頁只保留一個主要觀念。先規劃投影片順序，再做 3 個封面視覺方向讓我選。選定後完成整份簡報，支援方向鍵翻頁，並逐頁檢查文字溢出、重疊、字級與投影可讀性。
如果是課程或 Webinar，可以再補充「完整說明留在講者備註，不要把逐字稿塞進畫面」。如果是會後寄給主管閱讀，則要反過來要求資訊足夠完整。
提示詞真正要解決的，不是讓 AI 聽到更多形容詞，而是讓它知道這份簡報要拿來做什麼，以及什麼情況算完成。
HTML 簡報怎麼交付與保存？
HTML 簡報的交付方式比 PPTX 多一些，可以依使用情境選擇：
- 直接傳檔案：如果所有素材都內嵌，可以直接傳單一 HTML。
- HTML 加資產資料夾：圖片、影片較多時，讓素材獨立存放，檔案會比較好維護。
- 部署成網址：適合遠端分享、課程展示或產品 Demo，但要注意公開權限。
- 放進版本控制：HTML、CSS、JavaScript 都是文字檔，適合用 Git 追蹤修改紀錄。
如果簡報內容涉及未公開的課程、客戶資料、財務數字或內部提案，不要因為「部署成網址很方便」就直接公開。分享方式仍要依內容敏感度決定。
另外，交付前最好換一台電腦或至少換一個瀏覽器測試一次。能在製作者自己的環境播放，不代表到了會議室、教室或客戶電腦上一定完全相同。
AI HTML Presentation 最適合哪些內容？
不是所有簡報都需要 HTML。這類工作流特別適合以下情境：
- 技術與產品展示：需要程式碼、流程圖、互動元件或即時 Demo。
- 線上課程與直播：同一套簡報需要反覆更新，想維持固定設計規則。
- 創業提案：希望加入動畫、資料視覺化與更有辨識度的版面。
- 內部知識分享：內容本來就放在 Markdown、文件或程式專案裡，希望直接轉成簡報。
- 需要自動化大量產製：同一種簡報會依不同客戶、課程或資料持續生成。
反過來說，如果只是臨時做 5 張簡單會議投影片，而且同事最後一定要用 PowerPoint 手動改字，HTML 反而可能增加交接成本。工具應該跟工作情境配合，不是越新越好。
AI HTML Presentation 有哪些限制？
它不是所有情境都比 PPTX 好。
- 需要適合的 AI 執行環境：最好能讀寫檔案、執行程式並做瀏覽器檢查。
- 臨場手動修改門檻較高：不會 HTML 的人，臨時拖動一個物件仍然是 PowerPoint、Canva 比較直覺。
- 企業交付格式：如果客戶明確要求 PPTX，HTML 不能自行取代規格。
- 瀏覽器相容性：特殊動畫、字型或影音仍要實機檢查。
- 安全性：HTML 可以包含 JavaScript，不要直接開啟來源不明的檔案。
- 離線能力不是自動成立：只要仍依賴外部字型、圖片、影音或 API，就不算完全離線。
怎麼用 AI 做一份 HTML Presentation？
最實用的流程可以分成 7 步：
- 提供內容：文章、逐字稿、Markdown、提案、研究資料或既有 PPTX。
- 說明用途：課程、演講、直播、提案、產品展示或閱讀型報告。
- 決定資訊密度：講者型或閱讀型。
- 先看視覺方向：要求 AI 先做少量預覽，不要直接生成 30 頁。
- 建立完整簡報：套用選定的設計系統。
- 輸出 HTML：依需求做成單一檔案或 HTML 加資產資料夾。
- 做 Render QA：逐頁檢查溢出、重疊、字級、圖片、動畫與投影可讀性。
如果你使用支援 Skill 的 AI 程式代理，可以直接指定要使用 Frontend Slides、HTMLSlides、Modern PPT 或其他相容的簡報 Skill，再補上你的內容與限制。
AI HTML Presentation 常見問題
AI HTML Presentation 一定需要會寫程式嗎？
不一定。使用者可以只用自然語言下指令，但執行端最好是能讀寫檔案與程式碼的 AI 程式代理。完全不懂 HTML 也能使用，只是遇到特殊客製時，有基本網頁知識會更方便。
HTML 簡報可以完全離線播放嗎？
可以做到，但前提是所需 CSS、JavaScript、圖片、字型與其他素材都已包含在本機檔案中。只要仍引用外部網址，就可能需要網路。
AI HTML Presentation 可以轉成 PowerPoint 嗎？
要看使用的工具。部分專案只輸出 HTML，部分工作流同時支援 PPTX，或可以再透過轉換流程產生 PowerPoint。若最終一定要交 PPTX，應該在一開始就選擇支援該格式的工具。
HTML 簡報可以分享給別人嗎？
可以。最簡單是直接傳 HTML 與必要資產，也可以部署成網址讓對方用瀏覽器開啟。不過如果簡報含有未公開資料，要先確認部署與分享權限。
AI HTML Presentation 適合取代 PowerPoint 嗎？
比較適合把它看成另一種簡報工作流，而不是全面取代 PowerPoint。需要互動、動畫、程式化產生與瀏覽器播放時，HTML 很有優勢；需要大量人工拖拉修改、企業交接與 PPTX 標準格式時，PowerPoint 仍然更方便。
結論：AI HTML Presentation 的重點，是 AI 開始直接「做簡報」
AI HTML Presentation 最值得注意的，不是把副檔名從 .pptx 換成 .html。
真正的改變是製作流程：AI 可以從內容理解開始，接著規劃投影片、選視覺方向、套設計系統、寫版面與動畫，再實際檢查渲染結果。
Frontend Slides、HTMLSlides、Modern PPT、SlideCraft 這些專案走的路線不完全相同，但都指向同一個方向：AI 正從「幫你寫簡報內容」走向「直接交付可以播放的簡報」。
如果你經常製作課程、直播、提案或教學內容，AI HTML Presentation 很值得測試；但真正要建立的不是某一個工具依賴，而是一套可重複的內容、設計與 QA 流程。
參考資料
zarazhangrui/frontend-slides｜Frontend Slides｜2026年查閱
bluedusk/html-slides｜HTML Slides｜2026年查閱
HTMLSlides｜Generate HTML slides with AI｜2026年查閱
lainshao/modern-ppt｜Modern PPT｜2026年查閱
wellkilo/SlideCraft｜SlideCraft｜2026年查閱