Claude HTML 輸出：一句提示詞把長回應變成可交付的版面

在提示詞的最後加一句「請用 HTML 格式輸出、可以用 inline CSS 美化」，你拿到的就不再是一段要自己重排的文字，而是一個排好版、可以直接讀的頁面。這一句話改變的是交付形態：原本要花二三十分鐘搬進簡報或文件的內容，現在打開就是成品。Claude HTML 輸出最適合提案、研究整理、教學手冊這類「要給別人看」的文件，純文字訊息反而不適合。

這篇會把那句提示詞的完整寫法、五個適用情境、進階的品牌色指令，以及 2026 年 9 月 Claude 改版後要調整的那一步，一次說完。

## 先定義：HTML 輸出、Artifact、範本各指什麼

HTML 輸出指的是你在提示詞裡指定回應的格式，要求 Claude 用網頁的標記語言來組織內容，而不是用聊天視窗預設的 Markdown。差別在於 Markdown 要靠閱讀器去渲染，HTML 自己就帶著版面資訊。 inline CSS 指把樣式直接寫在每個元素上，而不是獨立成一份樣式表。這樣整份內容就是一個檔案，複製到哪裡都不會掉樣式。 Artifact 是 Claude 把比較長、你可能會回頭修改的內容，獨立開在對話旁邊的視窗。官方的說明是：當內容通常超過 15 行、而且是你會編輯、重用或回頭參考的東西時，Claude 就會把它做成 Artifact；可以做成 Artifact 的內容包括文件、程式碼片段、單頁網站、圖像、圖表與流程圖、儀表板，以及小型互動工具（Anthropic 官方說明）。 範本（Docs／Slides／Design） 是 2026 年 9 月之後新增的一層。官方說明寫的是：Docs 可以匯出成 Word、PDF、Markdown 與 Google Docs；Slides 可以匯出成 PowerPoint 與 PDF，或直接進 Google Slides 成為可編輯檔；Design 則可以匯出成 .zip、PDF、PowerPoint 或獨立的 HTML 檔。這三個範本在所有方案上都可用，而且預設開啟。

## Claude HTML 輸出為什麼讓同一個答案差這麼多

同樣一段內容，Markdown 和 HTML 的差別不在資訊量，在你還要做幾件事才能用。

Markdown 的路徑是：複製 → 貼到編輯器 → 跨平台格式跑掉 → 手動修表格 → 重新標重點。中間每一步都可能掉格式，而且表格在多數編輯器裡都會變醜。

HTML 的路徑是：貼到瀏覽器或直接在旁邊的視窗看 → 已經是最終版面 → 可以截圖分享、可以一鍵存成 PDF。

差別會在一個地方被放大：當內容裡有結構的時候。三欄以上的對照、有層級的清單、要分區塊的報告，Markdown 在聊天視窗裡看起來還行，一搬家就散掉。HTML 不會，因為樣式跟著內容走。

## 2026 年 9 月之後，這招要改一個地方

這是目前中文教學文章談 Claude HTML 輸出時最常漏掉的一段。

搜尋「Claude HTML 輸出」會看到不少教學在講「怎麼把 code artifact 下載成 HTML 檔」。這套流程描述的是舊版的 artifact。Anthropic 官方說明寫得很清楚：「Legacy artifacts 是 2026 年 9 月 16 日之前在對話中產生的 artifact。它們仍然可以運作，你也還可以發布與分享它們，但你不能再建立新的。」

也就是說，照舊文章去找「下載程式碼」那顆按鈕，流程對不上。現在的做法更短：

1. 在提示詞裡指定 HTML 輸出與版面需求。

2. 內容開在旁邊的視窗，直接看最終版面。

3. 要給別人的檔案，走範本的匯出功能——Docs 出 Word 或 PDF，Slides 出 PowerPoint 或 PDF，Design 出獨立 HTML 或 PDF。

少掉的那一步是「自己開瀏覽器、自己列印成 PDF」。原本靠手動補的環節，現在變成內建的匯出選項。

還有兩個官方限制值得先知道，免得做到一半卡住：Artifact 需要在設定裡開啟「Cloud code execution and file creation」；每個 artifact 的儲存上限是 20 MB，而且只接受文字。

## 這句提示詞該怎麼寫才穩

Anthropic 的提示詞工程文件給過一條原則：「具體說明期望的輸出格式與限制條件。」同一份文件還提醒，描述格式時要說你要什麼，不要只說你不要什麼——寫「你的回應應由流暢連貫的散文段落組成」比寫「不要用 markdown」有效（官方提示詞工程說明）。

照這條原則，基礎版的指令是這樣：

> 請用 HTML 格式輸出，可以用 inline CSS 美化。

這句話的工作只有一件事：把輸出形態從「文字」換成「版面」。內容本身不會因此變好，該給的資訊還是要在前面的提示詞裡講清楚。

## 進階用法：把品牌色寫進提示詞

要讓輸出直接符合你公司的視覺規範，就把版面規則一起寫進去。原始的指令長這樣：

> 用 HTML 輸出。配色用 [你的品牌色]。字體用 sans-serif。每個重點用 card 框起來。最上面放標題、最下面放摘要。

這四句話各自負責一件事：配色決定色票、字體決定調性、card 決定資訊怎麼被切開、標題與摘要決定閱讀動線。寫完這四句，拿到的會是一份品牌一致的提報頁面，而不是一份預設樣式的網頁。

實務上值得再加一句的是輸出尺寸。如果這份東西最後要變成簡報，先講「以 16:9 的比例排版、每一區塊不要超過一個螢幕高度」，可以省掉後面調版的時間。

## 適合用 Claude HTML 輸出的五個情境

這五種情境的共同點是：內容有結構，而且要給別人看。

1. 寫提案、提報。 有章節、有重點、有數字，而且對方只會看一次。 2. 整理研究結果。 來源多、要分類、要標註哪些是結論哪些是佐證。 3. 做學習筆記。 自己之後要回頭查，階層清楚比好看重要。 4. 製作教學手冊。 步驟多、有順序、可能要印出來。 5. 客戶分析報告。 要有封面感、要能直接寄出去。 不適合的情境也很明確：純文字訊息，以及要再貼到其他工具去繼續編輯的內容。 前者用 HTML 是殺雞用牛刀；後者會遇到反效果——HTML 貼進 Notion 或 Word 之後，你要花時間把樣式清掉，比一開始就用 Markdown 還慢。

## 四種日常文件可以怎麼改

把上面的規則套到每天在做的事情上，長這樣：

週報。 用 HTML 排好，存成 PDF 寄給客戶。省掉「貼進 Word 再調行距」那一段。 提案。 直接在 HTML 裡做分頁與區塊，畫面通常比臨時拉的 PPT 乾淨，因為版面規則是一次講清楚的，不是一頁一頁拉出來的。 學習筆記。 讓它輸出階層清楚的結構，貼到 Notion 之後標題層級會對，不用重新縮排。 給團隊的 brief。 重點用 card 分開，不熟這個案子的人也讀得懂，因為資訊已經被切成一塊一塊。

PolyTask 在自家流程上觀察到的節省大約是每天三十分鐘的排版時間。這個數字跟你本來的排版習慣高度相關——原本就用模板的人省得少，原本每次都從頭排的人省得多，所以它適合當作一個方向感，不適合當作可以直接套用的基準。

## 什麼時候不適用

內容本身還沒定案。 HTML 輸出讓東西看起來像成品，而成品感會讓人懶得改。草稿階段用純文字比較誠實。 要交付給不收 HTML 的系統。 有些 CMS 與電子報工具對貼進來的 HTML 會重新清洗，結果比純文字還亂。先確認對方吃什麼格式。 需要協作編輯的文件。 多人要同時改的東西，走 Docs 範本再匯出 Google Docs 比較順，因為 HTML 檔案本身沒有協作機制。 資訊量很小的回答。 三行能講完的事情不需要版面。官方說明提到 Artifact 的判斷門檻大約在 15 行以上，低於這個量級，開一個視窗反而是干擾。 有嚴格視覺規範的對外物件。 正式對外的品牌物件還是要過設計。Claude HTML 輸出適合的是內部提報與一次性交付，不是取代設計流程。

## 今天可以做的三件事

1. 把 Claude HTML 輸出的基礎指令存成常用片語。 「請用 HTML 格式輸出，可以用 inline CSS 美化」這句話，放進輸入法的快捷鍵或筆記軟體的範本。 2. 把公司的色票與字體寫成一段固定的版面指令。 四句話，一次寫好，之後每次貼上。 3. 挑一份這週本來就要交的文件試跑。 週報或 brief 都可以，比較一次「自己排」跟「HTML 輸出再微調」的實際耗時。

## TL;DR

Claude HTML 輸出的開關只有一句話：在提示詞最後加上「請用 HTML 格式輸出、可以用 inline CSS 美化」，給你的就從文字變成版面。進階版再補上配色、字體、card 與標題摘要的規則，拿到的會是品牌一致的提報頁面。適合提案、研究整理、學習筆記、教學手冊、客戶分析報告這五種情境；純文字訊息與要再貼到其他工具的內容不適合。2026 年 9 月 16 日之後不能再建立舊版 artifact，要交付檔案時改走 Docs、Slides、Design 範本的匯出功能——Docs 出 Word 與 PDF，Slides 出 PowerPoint 與 PDF，Design 出獨立 HTML 與 PDF。

記住這個順序：先講內容 → 再指定格式 → 最後補版面規則。

## 常見問題

「請用 HTML 格式輸出」這句話要加在哪裡？

加在提示詞的最後面。前面先把內容需求講完——要寫什麼、給誰看、涵蓋哪些重點——最後一行再指定格式。順序反過來也會動作，但把格式指令放最後比較不會稀釋前面的內容要求。

Claude HTML 輸出跟直接叫它「做一份簡報」有什麼不同？

兩者的產出形態不同。要求 HTML 輸出拿到的是一個可以直接看、可以截圖、可以存 PDF 的頁面；走 Slides 範本拿到的是可以匯出成 PowerPoint 或 PDF、也能進 Google Slides 編輯的檔案。要給別人繼續改的場合用範本，要自己一次交付完的場合用 HTML。

為什麼我照舊教學找不到下載 HTML 的按鈕？

因為那些教學描述的是舊版 artifact 的流程。官方說明寫明，2026 年 9 月 16 日之前產生的 artifact 仍可使用與分享，但不能再建立新的。現在要拿檔案走的是範本的匯出功能，Design 範本可以匯出獨立的 HTML 檔。

可以指定品牌色嗎？要怎麼寫？

可以，而且建議連字體與版面結構一起指定。完整寫法是：「用 HTML 輸出。配色用 [你的品牌色]。字體用 sans-serif。每個重點用 card 框起來。最上面放標題、最下面放摘要。」色票給十六進位色碼會比給色彩名稱穩定。

HTML 輸出貼進 Notion 會怎麼樣？

會變成一段原始碼或一堆清不掉的樣式，兩種都不好處理。要貼進 Notion 的內容，請 Claude 直接輸出 Markdown；要單獨交付、不再編輯的內容，才用 HTML。這是前面說「要再貼到其他工具的內容不適合」的實際情況。

用這招需要付費方案嗎？

Artifact 在 Free、Pro、Max、Team、Enterprise 方案上都可用，Docs、Slides、Design 三個範本在所有方案上也都可用且預設開啟。需要注意的是設定裡的「Cloud code execution and file creation」必須開著，另外每個 artifact 的儲存上限是 20 MB 且只接受文字。

---

把這套輸出格式接進每週固定要交的東西，才會真的省到時間。如果你正在整理一套可重複的內容交付流程，可以把現在的產出清單整理給我們看一次。PolyTask 做的是全鏈路的行銷增壓，會從「哪幾份文件值得先標準化」開始看。