Anthropic 工程師發了篇「格式帖」，350 萬人圍觀
整理版優先睇
用 HTML 代替 Markdown 做 AI 輸出，大幅提升協作效率——Anthropic 工程師 Thariq 實戰分享
呢篇文章係由 Anthropic Claude Code 團隊工程師 Thariq 喺 X 上分享嘅一篇長文，講佢點樣利用 HTML 做 AI 輸出格式，令到人機協作變得更有效。佢發現當模型上下文窗口夠大嘅時候，輸出格式嘅選擇會直接影響資訊傳遞嘅效率。傳統 Markdown 假設人類會從頭讀到尾，但現實係冇人會仔細睇 Markdown 文檔。Thariq 提出用 HTML 嚟做「用完即棄嘅編輯器」，將閲讀變成互動，例如讓 Claude 生成可拖拽嘅任務排序板、動畫曲線調整滑塊等，呢啲 HTML 頁面唔會保存超過 10 分鐘，但可以大幅提升人類嘅操作效率。
文章仲配套咗 20 個完整嘅 HTML 模板，覆蓋咗 9 個場景，包括方案對比、代碼評審、設計系統、原型、圖表、PPT、研究報告、狀態報告同自定義編輯器。Thariq 指出，呢啲 HTML 文件唔單止令人類更願意睇，仲可以做 multi-agent 協作嘅共享內存，開新 session 時成個 HTML 當 context 喂返落去。
當然，HTML 都有代價：生成速度慢 2-4 倍，diff 難睇，版本控制唔友好。但係 Thariq 認為當上下文窗口唔再係瓶頸，資訊傳遞效率就係新目標。社區有唔同聲音，有人擔心人類會同想法斷連，有人建議文檔配對，但整體嚟講，呢篇文章提供咗一個顛覆性嘅思路——格式唔係審美問題，而係協作問題。
- 核心概念：用 HTML 做「用完即棄嘅編輯器」，將閲讀變成互動，大幅提升人機協作效率。
- 方法：喺 prompt 尾加一句「output as a single HTML file with inline styles」，等 AI 生成可操作嘅頁面。
- 差異：Markdown 假設人會從頭讀到尾，HTML 假設人只想掃重點同動手改。
- 啟發：HTML spec 可以作為 multi-agent 嘅共享內存，開新 session 時直接 feed 返落去。
- 可行動點：下次要 AI 解釋複雜邏輯時，叫佢輸出單一 HTML 檔案，瀏覽器打開即用。
20 個 HTML 模板示例
Thariq 提供嘅配套 HTML 文件，涵蓋 9 個場景，可以直接喺瀏覽器打開使用。
折中方案：外置 CSS 模板
將 CSS 外置到模板文件，用 <link rel="stylesheet"> 引入，可令 token 節省 44%（12000 token 降到 6700）。
一推引發熱議：HTML 係新嘅 Markdown？
Anthropic Claude Code 團隊工程師 Thariq 喺 X 上發咗條推，話《Using Claude Code: The Unreasonable Effectiveness of HTML》，24 小時內有 3.8M 閲讀、7.5K Like。佢講嘅唔係 HTML 靚啲，而係一套全新嘅 AI 協作工作流——當模型上下文窗口夠大，你叫 AI 輸出嘅格式會決定你同 AI 之間資訊傳遞嘅帶寬。
Markdown 嘅隱含假設係「人會從頭讀到尾」，HTML 嘅隱含假設係「人只想掃重點同動手改」。
有中文博主精煉咁總結咗呢句，但 Thariq 原文仲有個生動例子：Claude Code 想喺終端顯示顏色，Markdown 唔支援，要用 unicode 字符硬畫色卡——呢個就係問題所在。
HTML 唔係文檔，係用完即棄嘅編輯器
Thariq 舉咗個例子：你有 30 個任務要重排優先級。傳統做法係叫 Claude 生成 Markdown 列表，然後人工改。但 Thariq 嘅做法係叫 Claude 生成一個 HTML 頁面，30 個任務做成可拖拽卡片，分 Now / Next / Later / Cut 四列，仲加個「Copy as Markdown」按鈕。呢個 HTML 頁面唔會保存超過 10 分鐘，就係一個用完即棄嘅編輯器。
- 調動畫緩動曲線：滑塊拖動，實時預覽，比描述「ease-in-out 300ms」直觀一百倍
- 調 cron 表達式：可視化時間選擇器，唔使數星號
- 調正則表達式：實時匹配高亮，唔使腦內執行
- 調顏色：色板直接睇，唔使猜 hex 值
呢啲 HTML 頁面唔會被提交、唔會被版本控制、甚至唔會被保存超過 10 分鐘。
20 個 HTML 文件，覆蓋 9 個協作場景
Thariq 配套咗 20 個完整嘅 HTML 文件，按用途分咗 9 類。呢啲模板全部獨立可開，唔使任何後端。
- 1 探索與規劃（3 個）：不同方案橫向對比，表格加優劣標註，一眼揀到最適合嘅。
- 2 代碼評審（3 個）：PR diff 做帶邊注嘅渲染視圖，嚴重程度用顏色標籤，關鍵行加跳轉錨點。
- 3 設計系統（2 個）：從代碼倉提取 design token，渲染成色板同字體階梯，唔使開 Figma。
- 4 原型（2 個）：四屏交互流程做成可點擊 HTML，唔使 Framer 或 Figma Prototype。
- 5 圖表與流程圖（2 個）：token bucket 限流邏輯畫成 SVG 流程圖，關鍵代碼內聯註釋，加 gotchas。
- 6 PPT（1 個）：用 標籤加 20 行 JS 做成箭頭鍵翻頁嘅 slide deck。
- 7 研究報告（2 個）：有摺疊段落、標籤頁切換、側邊欄術語表，睇起嚟似 Notion 頁面。
- 8 狀態報告（2 個）：帶小圖表同彩色時間線嘅週報，令人真係會睇。
呢 20 個文件都喺 GitHub 上，每個係獨立 .html 檔，瀏覽器直接打開就用得。
Spec 唔再係俾人睇嘅過渡產物
Thariq 透露佢嘅實際工作流：先叫 Claude 生成 6 個方向嘅方案，平鋪喺一個 HTML 度橫向對比。揀一個深入做 mockup 同數據流圖，最後寫實施計劃。關鍵係：開新 session 嘅時候，成個 HTML 文件當 context 喂返落去，verification agent 都讀呢堆 HTML。
Spec 唔再係俾人睇嘅過渡產物——佢係 multi-agent 協作嘅共享內存。
代價、折衷同社區爭議
Thariq 冇迴避 HTML 嘅缺點：生成速度慢 2-4 倍、Diff 好難 review、版本控制唔友好。但佢嘅取捨邏輯係：隨住上下文窗口愈嚟愈大，多咗嘅 token 開銷喺 context 度逐漸變得唔可見，而資訊傳遞效率就成為新優化目標。
當窗口唔再係瓶頸，資訊傳遞效率就係新目標。
社區有人提咗折中方案：將 CSS 外置到模板文件，用 <link rel="stylesheet"> 引入，實測一個 12000 token 嘅 HTML 文件降到 6700 token，節省 44%。
最大爭議來自安全研究者 Daniel Miessler，佢擔心人類如果唔親手寫 Markdown，而係靠 AI 吐出 HTML，會令想法同人之間斷連。Thariq 回應話：「核心問題係：人們根本不讀 Markdown 文件，我生成嘅 Markdown spec 冇人睇。換成 HTML 之後，至少有人點開咗。」Django 核心開發者 Simon Willison 實測後發現 HTML 版 POC 可讀性同操作性遠超 Markdown。Chrome 團隊 Addy Osmani 支持話 HTML 俾咗 AI 更豐富嘅畫布。Obsidian 創始人 kepano 就提醒 Markdown 本來就支援嵌入 HTML，唔係二選一。
Thariq 自己嘅回答好剋制：HTML 唔係替代 Markdown，係喺特定場景下俾 AI 一個更合適嘅輸出格式。
值得一試：下次 prompt 加一句「output as HTML」
如果你用緊 Claude Code 或類似工具，不妨試下：下次要 AI 解釋複雜邏輯嘅時候，喺 prompt 尾加一句「output as a single HTML file with inline styles」。瀏覽器打開之後，你大概率唔會再想返去 Markdown。
所有模板喺呢度：thariqs.github.io/html-effectiveness
尋日（5月8號），Anthropic嘅Claude Code團隊工程師Thariq喺X度發咗條推文：
HTML is the new markdown.
仲配咗篇長文，標題係《Using Claude Code: The Unreasonable Effectiveness of HTML》。
24個鐘之內，3.8M 閲讀，7.5K 讚好。
留言區吵到拆天。
如果你剩係睇個標題就話「又有人吹捧HTML喇」，咁你就蝕底曬。
Thariq講嘅唔係「HTML靚過Markdown」。佢講嘅係一套全新嘅AI協作工作流程——當模型嘅上下文視窗已經夠大，你叫AI輸出嘅格式，就決定咗你同AI之間資訊傳遞嘅頻寬。
有華文圈博主將佢提煉成一句話：
Markdown嘅隱含假設係「人會由頭讀到尾」。HTML嘅隱含假設係「人只想睇重點同埋自己動手改」。後者先符合AI時代人機協作嘅真實形態。
呢句話好精準。但係有個前提值得先打個問號——「啲人唔睇Markdown檔案」呢件事，到底係因為Markdown唔夠好，定係因為大多數AI生成嘅spec根本冇必要睇？
Thariq喺原文入面放咗個好生動嘅例子：Claude Code想喺終端機度顯示顏色，但係Markdown唔支援，焗住要用unicode字符硬「畫」咗個色卡——
先帶住呢個問題繼續睇落去。
HTML唔係文件，係用完即棄嘅編輯器
呢個係全文最有技術含量、亦都最反直覺嘅一個概念。
Thariq舉咗個例子：你有30個任務要重新排優先次序。以前嘅做法係叫Claude生成一段Markdown列表，你再人手重新排。
Thariq嘅做法係：叫Claude生成一個 HTML頁面，30個任務整成可以拖曳嘅卡片，分Now / Next / Later / Cut四列。最後加個「Copy as Markdown」按鈕，將最終排序匯出嚟貼返落Claude Code。
呢個HTML頁面唔會被提交、唔會被版本控制、甚至唔會被保存超過10分鐘。佢係一個用完即棄嘅編輯器。
呢個模式可以套用到所有「用文字好難描述」嘅情況：
• 調校動畫緩動曲線——拉掣拖動，即時預覽，比起描述「ease-in-out 300ms」直觀一百倍 • 校cron表達式——可視化時間揀選器，唔使數星號 • 校正則表達式——即時匹配高亮，唔使喺個腦度執行 • 調顏色——色板直接睇，唔使估hex值
本質上係將「人睇AI輸出」變咗做「人操作AI輸出」。由閲讀變成互動。
20個HTML檔案，覆蓋咗日常協作嘅9個場景
Thariq喺配套嘅examples頁面放咗20個完整嘅HTML檔案，按用途分成9類：
探索同規劃（3個）
三個唔同代碼方案嘅橫向對比，用表格加優劣標註平鋪喺一個頁面入面。你唔使喺三段Markdown之間來回跳，一眼就睇出應該揀邊個。
代碼評審（3個）
PR嘅diff整成帶邊注嘅渲染視圖，嚴重程度用顏色標籤標註，關鍵行加咗跳轉錨點。reviewer唔使喺終端機度碌diff。
設計系統（2個）
由代碼庫提取design token，渲染成色板同字體階梯。唔使開Figma。
原型（2個）
四屏嘅互動流程整成可以點擊嘅HTML。唔需要Framer，唔需要Figma Prototype，Claude直接生成。
圖表同流程圖（2個）
token bucket限流邏輯畫成SVG流程圖，關鍵代碼片段加咗內聯註釋，仲加一個gotchas段落。一張圖比起200行Markdown解釋清楚一個數量級。
PPT（1個）
幾個 <section> 標籤加20行JS=用箭嘴鍵翻頁嘅slide deck。唔需要Keynote，唔需要Google Slides。
研究報告（2個）
有摺疊段落、標籤頁切換嘅代碼範例、側邊欄術語表。睇落似係睇緊Notion頁面，而唔係一個 .md 文件。
狀態報告（2個）
帶細圖表同彩色時間線嘅週報。由「啲人會 skim」變成「啲人真係會睇」。
自定義編輯器（3個）
除咗頭先講嘅任務排序板，仲有Feature Flag編輯器（帶依賴檢查）同Prompt調參器（左邊模板、右邊即時預覽）。
呢20個檔案都喺GitHub上面，每個都係獨立嘅 .html HTML檔案，瀏覽器直接打開就用得。
Spec唔再係俾人睇嘅過渡產物
呢個係第二層深意。
Thariq透露咗佢實際嘅工作流程：先叫Claude生成6個唔同方向嘅方案，平鋪喺一個HTML入面橫向對比。揀一個深入做mockup同數據流圖。最後寫實施計劃。
關鍵嚟喇：開新session嘅時候，成個HTML檔案當context餵返俾佢。
verification agent都會讀呢堆HTML。
呢個意味住spec唔再係俾人睇嘅過渡產物——佢係 multi-agent協作嘅共享記憶體。
當多個agent需要理解同一個設計決策嘅時候，一個帶圖、帶互動、帶代碼片段嘅HTML頁面，比起一段純文字Markdown能夠傳遞嘅資訊密度高出一個數量級。
代價係咩
Thariq冇迴避HTML嘅缺點：
生成速度慢2-4倍。 HTML嘅token開銷的確比Markdown大，Claude生成一個HTML檔案嘅時間明顯更長。
Diff更難review。 兩個HTML檔案嘅diff基本上唔睇得，唔似Markdown diff咁直觀。
版本控制唔友好。 HTML檔案體積大、結構複雜，git diff嘅噪音多。
但佢嘅取捨邏輯係：隨住上下文視窗越來越大，多出嚟嘅token開銷喺context入面逐漸變得唔覺眼。當視窗唔再係瓶頸，資訊傳遞嘅效率就變成咗新嘅最佳化目標。
社區入面都有人畀咗折衷方案：將CSS外置到模板檔案，用 <link rel="stylesheet"> <link>引入。實測一個12000 token嘅HTML檔案降到6700 token，節省44%。模型只輸出語義結構，唔重複輸出樣式。
社區嘈啲咩？
最大嘅爭議來自安全研究員Daniel Miessler（@DanielMiessler），佢寫咗篇長文反駁：
Markdown易寫難讀，HTML易讀難寫。但解決方案唔應該係將人類進一步排除在創作過程之外。
佢認為如果人類唔親自寫Markdown、唔親手編輯，而係叫AI吐出HTML，人同想法之間就會斷連——「想法由vibes變咗做別人嘅HTML」。
佢提出咗一個替代方案：文件配對一個純文字嘅「思想文件」（人類可編輯）加一個或多個「展示文件」（AI生成）。兩者關聯但唔合併。
Thariq本人後來都有回應：
我唔否認HTML會膨脹AI嘅寫作量。但核心問題係：啲人根本唔睇Markdown檔案。 我生成嘅嗰啲Markdown spec，冇人睇。換成HTML之後，至少有人㩒咗入去睇。
Django核心開發者Simon Willison（@simonw）直接落手實測——用HTML格式叫AI輸出Linux漏洞POC，結果可讀性同可操作性遠超Markdown版本，仲專門做咗在線演示頁面。
Chrome團隊嘅Addy Osmani（@addyosmani）持支持態度，認為HTML俾咗AI更豐富嘅畫布，令人類可以真正參與落嚟。
Obsidian創辦人kepano就指出咗一個容易俾人忽略嘅事實：Markdown本身就支援嵌入HTML呢個唔係二揀一嘅問題。
值得一試
返去開頭嗰個問題：HTML可唔可以取代Markdown？
Thariq自己嘅回答其實好剋制——唔係取代，係喺特定場景下俾AI一個更合適嘅輸出格式。20個HTML模板已經證明咗，喺方案對比、代碼評審、原型演示呢啲需要「睇到先判斷」嘅工作中，HTML的確比Markdown有效得多。
如果你係用緊Claude Code或者類似工具，不妨試嚇：下次叫AI解釋一段複雜邏輯嘅時候，喺prompt尾加一句「output as a single HTML file with inline styles」。瀏覽器打開之後，你好大機會唔會再想返轉頭。
20個模板喺度：thariqs.github.io/html-effectiveness
Macaron 🧁 | 格式唔係審美問題，係協作問題
昨天（5 月 8 日），Anthropic 的 Claude Code 團隊工程師 Thariq 在 X 上發了一條推：
HTML is the new markdown.
配了一篇長文，標題叫《Using Claude Code: The Unreasonable Effectiveness of HTML》。
24 小時內，3.8M 閲讀，7.5K 贊。
評論區吵翻了。
如果你只看到標題就下結論說「又有人吹 HTML 了」，那就虧大了。
Thariq 講的不是「HTML 比 Markdown 好看」。他講的是一套全新的 AI 協作工作流——當模型的上下文窗口已經足夠大，你讓 AI 輸出的格式，決定了你和 AI 之間信息傳遞的帶寬。
有中文圈博主把它提煉成一句話：
Markdown 的隱含假設是「人會從頭讀到尾」。HTML 的隱含假設是「人只想掃重點和動手改」。後者才符合 AI 時代人機協作的真實形態。
這句話精煉到位。但有一個前提值得先打一個問號——「人們不讀 Markdown 文件」這件事，到底是因為 Markdown 不夠好，還是因為大多數 AI 生成的 spec 本來就沒必要讀？
Thariq 在原文裏放了一個很生動的例子：Claude Code 想在終端裏顯示顏色，因為 Markdown 不支持，只好用 unicode 字符硬「畫」了一個色卡——
先帶着這個問題往下看。
HTML 不是文檔，是 throwaway editor
這是全文最有技術含量、也最反直覺的一個概念。
Thariq 舉了一個例子：你有 30 個任務要重排優先級。過去的方式是讓 Claude 生成一段 Markdown 列表，你人工重排。
Thariq 的做法是：讓 Claude 生成一個 HTML 頁面，30 個任務做成可拖拽卡片，分 Now / Next / Later / Cut 四列。結尾加一個「Copy as Markdown」按鈕，把最終排序導出來貼回 Claude Code。
這個 HTML 頁面不會被提交、不會被版本控制、甚至不會被保存超過 10 分鐘。它是一個用完即棄的編輯器。
這個模式可以套到所有「用文字很難描述」的場景：
• 調動畫緩動曲線——滑塊拖動，實時預覽，比描述「ease-in-out 300ms」直觀一百倍 • 調 cron 表達式——可視化時間選擇器，不用數星號 • 調正則表達式——實時匹配高亮，不用腦內執行 • 調顏色——色板直接看，不用猜 hex 值
本質上是把「人讀 AI 輸出」變成了「人操作 AI 輸出」。從閲讀變成交互。
20 個 HTML 文件，覆蓋了日常協作的 9 個場景
Thariq 在配套的 examples 頁面放了 20 個完整的 HTML 文件，按用途分了 9 類：
探索與規劃（3 個）
三個不同代碼方案的橫向對比，用表格 + 優劣標註平鋪在一個頁面裏。你不用在三段 Markdown 之間來回跳，一眼看出該選哪個。
代碼評審（3 個）
PR 的 diff 做成帶邊注的渲染視圖，嚴重程度用顏色標籤標註，關鍵行加跳轉錨點。reviewer 不用在終端裏滾 diff。
設計系統（2 個）
從代碼倉庫裏提取 design token，渲染成色板和字體階梯。不用打開 Figma。
原型（2 個）
四屏交互流程做成可點擊的 HTML。不需要 Framer，不需要 Figma Prototype，Claude 直接生成。
圖表與流程圖（2 個）
token bucket 限流邏輯畫成 SVG 流程圖，關鍵代碼片段做內聯註釋，加一個 gotchas 段落。一張圖比 200 行 Markdown 解釋清楚一個數量級。
PPT（1 個）
幾個 <section> 標籤 + 20 行 JS = 箭頭鍵翻頁的 slide deck。不需要 Keynote，不需要 Google Slides。
研究報告（2 個）
有摺疊段落、標籤頁切換的代碼示例、側邊欄術語表。讀起來像是在看 Notion 頁面，而不是一個 .md 文件。
狀態報告（2 個）
帶小圖表和彩色時間線的週報。從「人們會 skim」變成「人們真的會看」。
自定義編輯器（3 個）
除了前面說的任務排序板，還有 Feature Flag 編輯器（帶依賴檢查）和 Prompt 調參器（左邊模板、右邊實時預覽）。
這 20 個文件都在 GitHub 上，每個都是獨立的 .html 文件，瀏覽器直接打開就能用。
Spec 不再是給人看的過渡產物
這是第二層深意。
Thariq 透露了他的實際工作流：先讓 Claude 生成 6 個不同方向的方案，平鋪在一個 HTML 裏橫向對比。挑一個深入做 mockup 和數據流圖。最後寫實施計劃。
關鍵來了：開新 session 的時候，把整個 HTML 文件當 context 喂回去。
verification agent 也讀這堆 HTML。
這意味着 spec 不再是給人看的過渡產物——它是 multi-agent 協作的共享內存。
當多個 agent 需要理解同一個設計決策時，一個帶圖、帶交互、帶代碼片段的 HTML 頁面，比一段純文本 Markdown 能傳遞的信息密度高出一個數量級。
代價是什麼
Thariq 沒有迴避 HTML 的缺點：
生成速度慢 2-4 倍。 HTML 的 token 開銷確實比 Markdown 大，Claude 生成一個 HTML 文件的時間明顯更長。
Diff 更難 review。 兩個 HTML 文件的 diff 基本不可讀，不像 Markdown diff 那樣直觀。
版本控制不友好。 HTML 文件體積大、結構複雜，git diff 的噪音多。
但他的取捨邏輯是：隨着上下文窗口越來越大，多出來的 token 開銷在 context 裏逐漸變得不可見。當窗口不再是瓶頸，信息傳遞的效率就成了新的優化目標。
社區裏也有人給出了折中方案：把 CSS 外置到模板文件，用 <link rel="stylesheet"> 引入。實測一個 12000 token 的 HTML 文件降到 6700 token，節省 44%。模型只輸出語義結構，不重複輸出樣式。
社區吵什麼？
最大的爭議來自安全研究者 Daniel Miessler（@DanielMiessler），長文反駁：
Markdown 易寫難讀，HTML 易讀難寫。但解決方案不應該是把人類進一步排除在創作過程之外。
他認為如果人類不親自寫 Markdown、不親手編輯，而是讓 AI 吐出 HTML，人和想法之間就會斷連——「想法從 vibes 變成了別人的 HTML」。
他提出了一個替代方案：文檔配對。一個純文本的「思想文件」（人類可編輯）+ 一個或多個「展示文件」（AI 生成）。兩者關聯但不合並。
Thariq 本人後來也回應了：
我不否認 HTML 會膨脹 AI 的寫作量。但核心問題是：人們根本不讀 Markdown 文件。 我生成的那些 Markdown spec，沒人看。換成 HTML 之後，至少有人點開了。
Django 核心開發者 Simon Willison（@simonw）直接上手實測——用 HTML 格式讓 AI 輸出 Linux 漏洞 POC，結果可讀性和可操作性遠超 Markdown 版本，還專門做了在線演示頁面。
Chrome 團隊的 Addy Osmani（@addyosmani）持支持態度，認為 HTML 給了 AI 更豐富的畫布，讓人類能真正參與進來。
Obsidian 創始人 kepano 則指出了一個容易被忽略的事實：Markdown 本來就支持嵌入 HTML。這不是二選一的問題。
值得一試
回到開頭那個問題：HTML 能不能替代 Markdown？
Thariq 自己的回答其實很剋制——不是替代，是在特定場景下給 AI 一個更合適的輸出格式。20 個 HTML 模板已經證明了，在方案對比、代碼評審、原型演示這類需要「看到才能判斷」的工作中，HTML 確實比 Markdown 有效得多。
如果你在用 Claude Code 或類似工具，不妨試一下：下次讓 AI 解釋一段複雜邏輯的時候，在 prompt 末尾加一句「output as a single HTML file with inline styles」。瀏覽器打開之後，你大概率不會再想回去了。
20 個模板在這裏：thariqs.github.io/html-effectiveness
Macaron 🧁 | 格式不是審美問題，是協作問題