突然間，你的常識今天會崩潰。老實說，99% 的人還在用 Markdown 搭配 Claude Code。Anthropic 的 Claude Code 團隊內部人士說：「別再這樣了。」他說：「用 HTML 輸出，效果遠勝 Markdown。」
因為隨著 Claude Code 的輸出越來越進階，Markdown 變得難以閱讀、無法有效傳達，也無法分享。
另一方面，使用 HTML：
- 你可以畫圖
- 你可以用顏色標示
- 你可以用分頁整理
- 你甚至可以做出滑桿和按鈕
- 你可以直接在瀏覽器中分享
換句話說，要發揮 Claude Code 的真正價值，不只是「你輸出什麼」，連「你用什麼格式輸出」都變得極其重要。
我敢這麼說。
Claude Code 時代的最佳解不是只有 Markdown，而是 HTML 優先。
事實上，在這篇文章出來之前，ClaudeCodeStudio 就已經在用這個方法，確保投影片素材一次就能產出這種品質 👇
如果你把這篇文章讀到最後，我想你就會明白為什麼辦得到，所以請務必讀完！
順帶一提，你有過這種經驗嗎？
- 讓 Claude Code 寫了一份計畫，但超過 100 行之後就失去興趣了。
- 把 Markdown 規格分享給團隊，但沒有人讀完。
- 看著 ASCII 藝術圖，心想：「……這是什麼？」
- 想用顏色或版面來整理資訊，但 Markdown 做不到。
- 把計畫貼到 Slack，結果變成附件被淹沒。
這些全都是「輸出格式的問題」。
一篇由 Claude Code 開發團隊成員 Thariq（@trq212）所寫的文章《Using Claude Code: The Unreasonable Effectiveness of HTML》，目前在 X 上爆紅，瀏覽量超過 1100 萬 😳
Thariq 是 Anthropic 的 Claude Code 團隊成員，也是 YC W20 的工程師。換句話說，這是一位每天在第一線使用 Claude Code 的人宣告：「我不用 Markdown 了。」
這次我會用簡單易懂的方式說明內容，包含具體的提示範例 👇
原始文章在這裡：https://x.com/trq212/status/2052809885763747935
■ Markdown 的問題是什麼？
Markdown 多年來一直被用作 AI Agent 與人類之間的通訊工具。它簡單、隨處可用，也能寫出某種程度的豐富文字。Claude Code 當然也預設用 Markdown 輸出。
但老實說，這聽起來是不是很熟悉？
隨著 Claude Code 能夠處理更複雜的任務，它輸出的計畫和規格也越來越長。你真的會把超過 100 行的 Markdown 檔案讀完嗎？
Thariq 在文章中寫道：
「我覺得讀超過一百行的 Markdown 檔案很困難。」
而且，現在我們甚至越來越少自己編輯檔案。我們把它們當作規格的參考，或是腦力激盪的輸出。即使要編輯，也是叫 Claude「改一下這個」。換句話說，Markdown 最大的優點——「人類容易手動編輯」——已經不再有意義。
這完美地說出了許多 Claude Code 使用者一直以來隱約感受到的問題。
■ 為什麼 HTML 選項「不合理地有效」
Thariq 提出的做法是將 Claude Code 的輸出格式從 Markdown 改為 HTML。
你可能會想：「HTML 不是用來做網頁的嗎？」但 HTML 的表現力是 Markdown 無法比擬的。
來看看用 HTML 具體能表達什麼：
- 用表格呈現結構化資料
- 用 CSS 設計和上色
- 用 SVG 畫插圖和圖表
- 用 script 標籤嵌入程式碼片段
- 用 JavaScript 和 CSS 實現互動
- 結合 SVG 和 HTML 製作流程圖
- 用絕對定位或 canvas 處理空間資料
- 用圖片標籤嵌入圖片
Thariq 斷言：
「我敢說，幾乎沒有任何 Claude 能讀取的資訊集合，是你無法用 HTML 相當有效率地呈現的。」
任何曾經讓 Claude 畫 ASCII 圖表或用 Unicode 字元表示顏色的人，都會明白這句話的重量。你將從那種「開法拉利去便利商店」的沒效率中解放出來。
■ 資訊密度天差地遠
HTML 最大的優勢是「資訊密度」。
同樣的內容用 Markdown 和 HTML 寫，HTML 可以用更易讀的方式傳達更多資訊。你可以用分頁切換、用顏色標示、嵌入圖表。
即使你不想讀 100 行的 Markdown，同樣的資訊用分頁和顏色整理成 HTML，就會直接印入腦中。
這不只是「外觀問題」。沒被讀的規格就跟不存在一樣。用會被讀的格式輸出，直接連結到工作本身的品質。
■ 分享的便利性
當你想把 Markdown 檔案分享給別人時，通常會這樣：
- 在 Slack 上附加檔案 → 沒人打開
- 附加在 email 裡 → 沒人打開
- 放到 GitHub 上 → 非工程師無法存取
用 HTML 的話，只要上傳到 S3 然後傳連結就行了。任何有瀏覽器的人都能讀。你甚至可以做成響應式設計，讓手機也能讀。
Thariq 的原話：
「如果你的規格、報告或 PR 說明是用 HTML 寫的，別人實際去讀的機率會高非常多。」
這在實務上是個微妙但極其重要的關鍵。
■ 雙向互動的革命
這裡才是 HTML 真正發光的地方。
HTML 不只是拿來「讀」的。它可以操作。
例如，微調設計。如果你叫 Claude Code「做一個有滑桿的 HTML 檔案」，它就會輸出一個可以即時調整動畫速度、緩動曲線和顏色的檔案。一旦找到喜歡的參數，只要按「複製」按鈕，再貼回 Claude Code 就行了。
這種雙向互動，讓調整的精準度達到純文字提示永遠無法企及的程度。
你不再需要為了「再右邊一點」、「再快一點」、「不是這個顏色」而用文字溝通。你只要移動滑桿。
■ 具體使用案例（附提示範例）
文章中，Thariq 用具體的提示範例介紹了 HTML 的使用模式。這些非常實用，我就直接介紹了。
𝟭. 設計、規劃與探索
在 Claude Code 中處理複雜任務時，與其用一份 Markdown 計畫，不如用多個 HTML 檔案來撒下「探索之網」。
提示範例：
「我無法決定入門畫面的方向。產生 6 種完全不同的方法，在版面、語氣和密度上變化，並把它們排列在一個 HTML 檔案中，方便我比較。在每個標籤上寫下各自的取捨。」
「在一個 HTML 檔案中建立詳細的實作計畫。包含模擬圖、資料流程和重要的程式碼片段以供審查。讓它易讀且容易吸收。」
𝟮. 程式碼審查與理解
你可以建立比 GitHub 的 diff 畫面更容易閱讀的程式碼審查。
提示範例：
「建立一個 HTML 成品來審查這個 PR。我不熟悉串流/背壓邏輯，所以請專注在那部分。呈現實際的 diff，加上行內邊距註解，並根據重要性用顏色標示。」
Thariq 寫道：「現在，我每個 PR 都會附上 HTML 格式的程式碼說明。」
𝟯. 設計與原型製作
就像 Claude Design 的基礎是 HTML 一樣，HTML 在設計表達上也非常擅長。即使最終實作是用 React 或 Swift，先以 HTML 畫草稿再重寫的工作流程也很有效。
提示範例：
「我想做一個新的結帳按鈕原型。點擊時它應該會動畫變成紫色。建立一個 HTML 檔案，讓我可以透過滑桿和選項嘗試每個動畫參數。包含一個按鈕來複製效果好的參數。」
𝟰. 報告、研究與學習
Claude Code 擅長整合多個資料來源的資訊，並總結成易讀的報告。你可以讓它搜尋 Slack、程式碼庫、git 歷史和網路，來建立領導報告或事件報告。
提示範例：
「我不懂速率限制器是怎麼運作的。讀取相關程式碼，建立一個 HTML 說明頁面。包含 token bucket 流程圖、3-4 個附註解的重要程式碼片段，最後加上一個『常見陷阱』章節。最佳化到讓我看一次就能理解。」
𝟱. 自訂編輯介面
這是我個人覺得最衝擊的使用案例。用一次性的 HTML 編輯器，實現難以在文字框中傳達的操作。
提示範例：
「我想重新排列 30 張 Linear 票的優先順序。建立一個 HTML 檔案，每張票是一個可拖曳的卡片，並放在四個欄位中：現在 / 下一個 / 之後 / 捨棄。根據你的猜測先排列好。包含一個『複製為 Markdown』按鈕，用來匯出最終順序，每個區塊附上一行理由。」
「我正在調整這個系統提示。建立一個並排編輯器。左邊是可編輯的提示（標示變數插槽），右邊是三個範例輸入，讓範本即時反映。包含字元/Token 計數器和複製按鈕。」
這個點子不是很棒嗎？當場產生所需的 UI，只為了那個任務。不需要重複使用。不需要完美。但比起只用文字處理，效率高出 100 倍。
■ 常見問題解答
文章中，Thariq 也回答了關於 HTML 的常見問題。
「這樣不是比較耗 Token 嗎？」
→ 確實比 Markdown 用更多 Token。但考慮到表現力和「實際被讀的機率」，整體來說是有效率的。以 Opus 4.7 的 100 萬 Token 上下文來說，增加的量根本不算什麼。
「產生時間不是會變長嗎？」
→ 比 Markdown 多花 2-4 倍時間。但 Thariq 本人覺得結果值得。
「版本控制怎麼辦？」
→ 這確實是缺點。HTML 的 diff 雜訊比 Markdown 多，更難審查。目前這是 HTML 最大的弱點之一。
「設計出來會不會很俗氣？」
→ 如果你使用 Claude Code 的前端設計外掛，就會改善。此外，讓 Claude Code 讀取你公司的程式碼庫來建立「設計系統 HTML 檔案」，之後以此為參考，就能統一成公司風格。
■ 為什麼是「現在」用 HTML？
這篇文章之所以引起共鳴，是因為時機。
現在 Claude Code 能處理複雜任務，輸出又長又密集。繼續用 Markdown——一種只是「帶點花樣的文字」的格式——來接收，已經成為瓶頸。
Thariq 的結論是：
「使用 HTML 時，我比以往任何時候都更有參與感。」
不是把所有事情交給 Claude Code，而是透過將輸出做成 HTML，形成「人類理解、判斷、回饋」的循環。這才是與 AI 協作的本質。
■ 實踐重點總結
- 不需要困難的技巧或設定。只要告訴 Claude Code「做一個 HTML 檔案」。
- 不要一開始就嘗試製作技能檔案。先用原始提示試試。
- 從「你想讓別人讀的東西」開始，例如計畫、審查、報告、原型。
- 當你意識到「互動性」（如滑桿和複製按鈕）時，效果會加倍。
- 在瀏覽器中開啟產生的 HTML，或上傳到 S3 分享。
Markdown 並不差。但既然 Claude Code 的輸出已經這麼先進，是時候也升級接收端的格式了。
下次你讓 Claude Code 建立計畫時，試著加一句：「用 HTML 做。」你會驚訝於其中的差異。
給覺得這篇文章有點幫助的人：
𝗖𝗹𝗮𝘂𝗱𝗲 𝗖𝗼𝗱𝗲 𝗦𝘁𝘂𝗱𝗶𝗼 @ 𝗝𝗮𝗽𝗮𝗻（@ClaudeCode_love）
是由三位 Claude Code 愛好者經營的帳號。
我們每天發佈關於 CLI 實戰運用和自動化的內容。
目前正與一家上市公司共同開發 AI Agent。
我們平時的貼文 👇
- 使用 Claude Code 和 Claude 的實際產品開發案例
- 整理 Claude Code 運用 / Vibe Coding / 開發趨勢
- 來自海外的 Claude Code 最新資訊
從開發理念到設計、實作、改善，
我們不只是「完成建置」，而是將海外和第一手資訊總結到能實際推出產品的程度。
如果你有興趣，請追蹤並看看 👀 我想你會有所收穫！
