用 Claude 製作 HTML 投影片—再免費簡報

請 Claude 提供完整 HTML 檔案,儲存後即可透過 Tiny Design Shop 簡報,不用訂閱簡報服務。

在一般對話中要求 HTML

開始 Claude 對話時提供聽眾、時間、大綱與素材,明確要求獨立 HTML 簡報。Claude Slides 範本與獨立 HTML 是不同輸出:簡報工具需要檔案,而非 Claude 分享連結。

Anthropic 說明 Free 和付費方案均可在聊天建立成品,但 Slides 範本屬於付費測試功能。本流程不需要 Slides 範本或 Claude Code。最新支援範圍請查閱 Claude 成品說明。

告訴 Claude 檔案要求

貼上這段提示詞與資料。先從小型簡報開始,檢查結果後再增加投影片。

為 [audience] 製作關於 [topic] 的獨立 HTML 投影片。
演講時間:[minutes] 分鐘。只使用下方資料中的事實。
使用清晰的 16:9 版面、易讀文字、行內 CSS/JavaScript 與內嵌素材。
每張使用 section.slide,任何時候只有一張具有 .active。
加入上一張/下一張按鈕,以及 ArrowLeft/ArrowRight 和 Home 導覽。
在每張內加入 script type="application/json" class="slide-notes",
包含 title、script(講稿)、notes(簡短重點字串陣列)。
在投影片隱藏備註,完整檔案保持小於 2 MB。
不要使用框架、外部字型、遠端圖片、API 呼叫或建置步驟。
提供完整 deck.html 檔案,不只是大綱。
資料:[貼上內容]

若要在相容工具重複使用,可取得 HTML Slide Presenter skill。一般聊天只需提示詞,不一定要安裝技能。

修改特定投影片

檢查內容,提出範圍明確的修改。指出投影片及應保留不變的部分,例如:

在第 2 張,把段落改成三個簡短重點。保留版面、其他投影片、導覽和既有備註。只更新第 2 張的講稿以符合內容,並回傳完整修改後的 HTML 檔案。

修改後再次檢查數字、出處與可讀性。請 Claude 說明改了什麼;精美的預覽不等於事實或檔案正確。

儲存 HTML,而不是預覽頁

Claude desktop showing a generated HTML slide artifact and its Download button
Max 訂閱的 Claude 桌面版產生附 Download 操作的 HTML 成品。這是實測流程的畫面,並非 Free 帳號。

請 Claude 將完成的簡報提供為可下載的 .html 檔。如果有檔案,下載並檢查副檔名。不要儲存 Claude 對話網頁或上傳成品分享 URL。

若介面沒有 HTML 下載,請求在單一程式碼區塊提供完整原始碼。只把程式碼複製到純文字編輯器,以 UTF-8 儲存為 deck.html,確認不是 deck.html.txt。請避免使用富文字文件編輯器。

匯出為 PowerPoint 或 PDF 的範本不能在此上傳。請改為獨立 HTML 版本,再於本機檢查版面和導覽。

簡報已儲存的檔案

  1. 用瀏覽器開啟儲存的檔案,逐張確認投影片與重要圖片。
  2. 保持小於 2 MB;若要在手機閱讀備註,請確認已內嵌演講者備註。
  3. 上傳至 HTML Slide Presenter,選擇期限並完成機器人驗證。
  4. 在顯示裝置開啟簡報,掃描手機 QR,確認切換投影片時備註也更新。
HTML Slide Presenter accepts the saved deck file
上傳儲存好的 HTML;AI 預覽連結不是簡報檔。

手機遙控教學介紹設定;演講者備註教學說明匯入格式。

哪些功能免費?

Tiny Design Shop 的簡報步驟免費,不需帳號或安裝應用程式。Claude 帳號、功能和額度另計。生成因額度停止時,可等待重設或稍後繼續修改;播放已儲存的簡報不需要再次呼叫 Claude。

2026 年 9 月 29 日,使用 Max 訂閱的 Claude 桌面一般 Chat 實測:三張 HTML 成品可在 Preview/Code 開啟,Download 能儲存完整 HTML。未測試 Free 方案的製作與下載。匯出操作可能因介面與帳號而異,也可採用完整原始碼的備用方式。