Sign in Subscribe
ClaudeCode

告別 Markdown！Anthropic 工程師親自示範：HTML 才是 Claude Code 的終極輸出格式

Thariq Shihipar 在 ACM Conference on AI and Agentic Systems 發表演講，指出 HTML 才是 Claude Code 真正發揮潛力的輸出格式，相比 Markdown 在資訊密度、視覺表達力與互動性上具有明顯優勢。

Philo

Philo

— 9 min read
Share
告別 Markdown！Anthropic 工程師親自示範：HTML 才是 Claude Code 的終極輸出格式

Thariq Shihipar 是 Anthropic Claude Code 團隊的 Member of Technical Staff，長期負責 Claude Code 的功能架構與生態系設計。他不只是理論提倡者，而是每天實際使用 Claude Code 開發產品的第一線工程師。

這篇文章在 X（前 Twitter）平台上引起爆炸性迴響，兩則相關推文超過 15,000 個讚，並在 Hacker News、Threads 與 LinkedIn 引發熱烈討論。技術部落客 Simon Willison 也第一時間整理重點，表示自己「重新被說服了 Markdown 的預設地位」。

Markdown 是否稱霸 AI 輸出格式？

要理解為何這篇文章引起震動，得先回頭看 Markdown 是如何成為 AI 輸出標準的。

答案其實非常務實：省 token。

早期大型語言模型（如 GPT-4）的 context window 只有 8,192 個 token，在這個嚴格限制下，開發者必須折衷考量每個字元。Markdown 語法簡潔、人類易讀，token 效率高，自然勝出。HTML 標籤繁複，在小 context 時根本不划算。

然而，時代已經改變。Claude 的 context window 已達 200K 至 1M token（Opus 4.7），當 token 成本不再是瓶頸，Markdown 的最大優勢就消失，而它的缺點才開始真正顯現。

⚡️ Flash Lesson 01 | AI互動式工作流教學

​這不是一堂冗長的課程，而是一場 60 分鐘的技術空投。我們將示範如何將影片製作從「手動調整」轉向「前端工程化」

​現正開放早鳥優惠 NTD.300（僅限 5/11 12:00 前）。週一中午過後將恢復標準價格NTD.500。名額有限，額滿將提早關閉報名入口。
Flash Lesson 01｜AI 互動式影片工作流：用 Codex + HyperFrames 實現「可編程」影片自動化 · Luma
「在技術普及前先行攔截。丟掉傳統剪輯軌，用程式碼思維讓影片從 Prompt 直接產出 MP4。」 ⚡️ 本次 Flash Lesson 重點 這不是一堂冗長的課程，而是一場 60…
AI郵報

HTML 勝出的 5 大核心理由

1. 視覺豐富度：Markdown 表達不了顏色

當 Shihipar 要求 Claude 在 Markdown 中「顯示顏色」時，Claude 只能用 Unicode 字元勉強模擬——這是 Markdown 的本質限制，而非 Claude 的問題。

HTML 輸出則截然不同：

  • SVG 圖表：直接內嵌向量圖形，不需截圖或外部連結
  • 顏色編碼：嚴重等級用紅黃綠直觀呈現
  • 有樣式的 Callout：警告框、資訊框一目了然
  • 並排比較表：CSS Grid 排版，讓對照關係清晰可見

以 Linux 安全漏洞分析為例，同樣的技術資訊——Markdown 版是純文字加縮排，HTML 版是深色主題技術文件，含顏色編碼的嚴重等級標示與警告區塊，閱讀效率天差地別。

2. 沒人真的會讀 100 行以上的 Markdown

Shihipar 承認了一個所有工程師心照不宣的事實：超過 100 行的 Markdown 文件，包括他自己都讀不下去。

這在 1M context 時代成了嚴重問題。Claude 現在可以輕鬆輸出包含數百行的實作計畫、技術規格（spec）或程式碼審查報告。純文字的 Markdown 結構根本「撐不住」這個長度。

HTML 的解方：

  • 可摺疊章節（collapsible sections）：讓長文件不再一眼望不到邊
  • 頁內錨點（in-page navigation）：讓讀者快速跳轉到感興趣的段落
  • 視覺層級：CSS 讓重要資訊自然跳出，次要內容退至背景

同樣的資訊量，HTML 版本的實際閱讀率顯著高於 Markdown，這對需要帶領分散式團隊的工程主管而言，是不可忽視的論點。

3. 互動性：文件可以「雙向溝通」

這是 HTML 最獨特、最顛覆性的優勢——文件可以回話。

Shihipar 稱之為 Two-way Interaction。HTML 結合 JavaScript，讓 Claude Code 產生的文件不再是靜態輸出，而是互動工具：

  • Slider / Knob：直接在文件內調整動畫參數、設計選項，即時預覽效果
  • 複製成 Prompt 按鈕：把在 UI 上調整好的參數，一鍵轉成可貼回 Claude Code 的 Prompt
  • 表單式編輯器：針對特定資料（如 feature flag、系統提示詞）生成專屬 UI

這個模式的核心邏輯是：當你難以用文字精確描述你想要什麼時，讓 Claude 先幫你建一個互動工具來探索答案，再把結果導回 Claude Code 繼續迭代。

4. 設計原型比寫規格更快

HTML 本身就是設計語言。即使你的最終產品是 React、Swift 或其他框架，用 HTML 打原型仍然是最快的方式。

Shihipar 分享了他的實際工作流程：

  • 不確定 Onboarding 頁面方向？ 請 Claude 生成一個 6 種截然不同風格並排的 HTML 文件，每種標示其設計取捨，一眼比較
  • 想確認動畫效果？ 要求 HTML 含 Slider，直接調整 easing curve 與時間參數，再複製給開發者
  • 審查 PR？ 在 PR 旁附上一份 HTML 解釋文件，含顏色編碼的 diff 標注與嚴重等級，取代預設的 GitHub Diff 視圖

5. 充分利用 Claude Code 龐大的上下文能力

Claude Code 能讀取的資訊來源非常廣泛：檔案系統、MCP 伺服器（Slack、Linear 等）、Git 歷史、瀏覽器（透過 Chrome 版 Claude）。

把這些豐富的 context 轉化成 HTML 成品，幾乎永遠比輸出成 Markdown 摘要更具表達力。這是 Shihipar 對 Agent 時代輸出格式最根本的重新思考。

實戰 Prompt 模板：直接抄作業

Shihipar 在文中提供了多個立即可用的 Prompt 模板：

程式碼審查（Code Review）

Help me review this PR by creating an HTML artifact that describes it. 
I'm not very familiar with the streaming/backpressure logic so focus on that. 
Render the actual diff with inline margin annotations, color-code findings by severity 
and whatever else might be needed to convey the concept well.

實作計畫（Implementation Plan）

Create a thorough implementation plan in a HTML file, be sure to make some 
mockups, show data flow and add important code snippets I might want to 
review. Make it easy to read and digest.

UI 設計探索

I'm not sure what direction to take the onboarding screen. Generate 6 
distinctly different approaches — vary layout, tone, and density — and lay them 
out as a single HTML file in a grid so I can compare them side by side. Label 
each with the tradeoff it's making.

互動原型（動畫調整器）

I want to prototype a new checkout button, when clicked it does a play 
animation and then turns purple quickly. Create a HTML file with several 
sliders and options for me to try different options on this animation, give me 
a copy button to copy the parameters that worked well.

通用原則

Shihipar 建議在 Prompt 結尾加上：

Output HTML, using the full capabilities of HTML, CSS and JavaScript to make 
the explanation rich, interactive, and clear.

什麼時候 HTML 不適合？

Shihipar 並非主張「全面取代 Markdown」，他也明確說明 HTML 不適合的情況：

情境 建議格式
純粹的程式碼檔案 原始碼格式（.py、.ts 等）
結構化資料 JSON、CSV
機器需要解析的輸出 Markdown 或 JSON
簡短的問答交流 純文字即可
Headless 伺服器環境 Markdown（HTML 難以開啟）

HTML 的核心優勢在於「給人看的解釋」——當輸出的受眾是人類讀者，且內容複雜到需要視覺層級與導航時，HTML 的投資報酬率最高。

社群反應：褒多於貶，但爭議真實存在

這篇文章並非沒有批評聲音。社群的主要質疑包括：

Token 成本問題
HTML 比 Markdown 需要消耗 2–4 倍的生成時間與 token。對於按 token 計費的 API 使用者，這是真實的財務成本。Shihipar 的回應是：在 Opus 4.7 的 1M context 架構下，這點額外成本感受不明顯——但批評者認為，並非所有人都用 Opus 4.7。

生態系鎖定疑慮
部分評論者指出，強調 HTML 輸出可能將使用者推向 Anthropic 自家工具（如 Claude Artifacts）。

Headless 環境不友善
GitHub 上已有 Issue 反映，在無圖形介面的伺服器上執行 /insights 等指令時，HTML 輸出極難開啟，建議保留 Markdown 選項。

儘管如此，Simon Willison 等資深開發者的轉向態度，仍顯示這場格式辯論的天平正在傾斜。

這對你意味著什麼？

Thariq Shihipar 的文章，本質上是一份 AI 輸出格式的時代宣言：

當 context window 從 8K 成長到 1M，當 Claude 從「文字生成器」演化為「Agent」，沿用 GPT-4 時代的格式慣例，正在讓你損失 HTML 帶來的視覺表達力與互動能力。

Anthropic 已在內部採用 HTML 作為計畫、程式碼審查、設計系統與報告的標準格式。現在，這個標準正式向所有 Claude Code 使用者開放。

下次請 Claude Code 輸出文件時，試著在 Prompt 末尾加一句：

Output as a well-styled HTML file with full CSS and JavaScript capabilities.

你可能會對結果感到驚訝。

參考資源

  1. Anthropic 工程師：HTML 才是Claude Code 最佳輸出格式 - Thariq Shihipar 5/8 發表
  2. Using Claude Code: The Unreasonable Effectiveness of HTML
  3. Lessons from Building Claude Code: How We Use Skills - LinkedIn
  4. Thariq (@trq212) on X - Using Claude Code
  5. HTML vs Markdown in Claude Code - Anthropic Engineering Lead

Read more