Claude團(tuán)隊(duì)暴論: 去Markdown,HTM才是AI Agent最佳交互格式

日前， Anthropic Claude Code 團(tuán)隊(duì)成員 Thariq Shihipar在 X 發(fā)了個(gè)小作文《Using Claude Code: The Unreasonable Effectiveness of HTML》，瞬間被 900 萬 人圍觀。

當(dāng)下，Markdown是AI Agent 與人溝通的主流格式，但Thariq 指出，AI能力變強(qiáng)后，Markdown已成束縛，應(yīng)改用HTML作為AI輸出的格式。

他直言：“我漸漸覺得，Markdown 已經(jīng)成了一種受限的格式”，超過百行的Markdown“可讀性極差、分享不便、缺少交互”，且如今多由AI編輯，其易用優(yōu)勢(shì)已失效。

Thariq還列出了HTML 的四大不可替代優(yōu)勢(shì)，如信息密度更高、視覺清晰易讀、分享便捷、支持雙向交互，可承載表格、SVG、交互控件、自定義編輯器等復(fù)雜內(nèi)容，還能讀取全量代碼、Git、項(xiàng)目工具上下文。

他直言：“幾乎沒有任何 Claude 能夠讀取的信息，是你無法用 HTML 相當(dāng)高效地呈現(xiàn)出來的”。

文中還給出了實(shí)操用法，可用于方案規(guī)劃、代碼評(píng)審、原型設(shè)計(jì)、自定義編輯界面等場(chǎng)景。

盡管HTML生成耗時(shí)是Markdown的2–4倍、版本對(duì)比困難，但他認(rèn)為，“和 Claude 協(xié)作時(shí)，我能更好地掌握整體情況、實(shí)時(shí)把控進(jìn)度”，值得切換。

Thariq說，他已經(jīng)幾乎停止為所有內(nèi)容編寫 Markdown 文件，轉(zhuǎn)而使用 Claude Code生成 HTML，“HTML 是新的 Markdown”。

對(duì)此，很多人表示認(rèn)同。比如，有網(wǎng)友說，“HTML 很重要，因?yàn)槿祟愂且曈X動(dòng)物”。

有網(wǎng)友說，“現(xiàn)在我明白為什么 Claude Design 使用 HTML 作為默認(rèn)格式了”。

但也有不同看法。比如，有行業(yè)人士只“部分同意”，認(rèn)為 HTML非常適合用于原型、模型、測(cè)試和預(yù)覽，但 Markdown 在文本導(dǎo)向的內(nèi)容方面更勝一籌，如代碼、計(jì)劃，“當(dāng)插圖多于文本時(shí)，就使用 HTML”。

以下為博文全文——

《Markdown轉(zhuǎn)HTML:AI 交互的更好載體》

Markdown 已成為智能代理與我們溝通時(shí)最主流的文件格式。它簡(jiǎn)潔、可移植，具備一定富文本能力，也方便人工編輯。

令人驚喜的是，Claude 甚至十分擅長(zhǎng)在 Markdown 文件中用 ASCII 字符繪制圖表。

但隨著智能代理的能力越來越強(qiáng)，我漸漸覺得 Markdown 成了一種束縛。超過百行的 Markdown 文件，我讀起來就十分吃力。

我想要更豐富的可視化效果、色彩與圖表，還希望能便捷地分享這些內(nèi)容。

同時(shí)，我越來越少親自編輯這類文件，而是將它們用作技術(shù)規(guī)范、參考文檔、頭腦風(fēng)暴產(chǎn)出物等。

即便需要修改，大多也是通過指令讓 Claude 代勞，這就讓 Markdown 最大的優(yōu)勢(shì)之一失去了意義。

于是，我開始更傾向于用 HTML 替代 Markdown 作為輸出格式，而且我發(fā)現(xiàn) Claude Code 團(tuán)隊(duì)里越來越多人也在這么做，背后原因如下。

（想先看示例的話，可以訪問這里：https://thariqs.github.io/html-effectiveness，看完記得回來了解背后邏輯）

為什么選擇 HTML？

信息密度

相較于 Markdown，HTML 能承載豐富得多的信息。它當(dāng)然可以實(shí)現(xiàn)標(biāo)題、格式排版這類基礎(chǔ)文檔結(jié)構(gòu)，還能呈現(xiàn)各類其他信息，例如：

? 用表格展示結(jié)構(gòu)化數(shù)據(jù)

? 用 CSS 呈現(xiàn)設(shè)計(jì)樣式

? 用 SVG 繪制插圖

? 用 script 標(biāo)簽插入代碼片段

? 結(jié)合 HTML 元素、JavaScript 與 CSS 實(shí)現(xiàn)交互效果

? 用 SVG 和 HTML 梳理工作流程

? 通過絕對(duì)定位與畫布呈現(xiàn)空間數(shù)據(jù)

? 用圖片標(biāo)簽插入圖像

我甚至可以說，只要是 Claude 能讀取的信息，幾乎都能用 HTML 高效呈現(xiàn)。這讓模型能高效地向你傳遞深度信息，你也能便捷審閱。

我發(fā)現(xiàn)，受限于 Markdown 的表達(dá)能力，模型常會(huì)采用低效的呈現(xiàn)方式，比如 ASCII 字符繪圖，或是我見過最特別的——像 Claude Code 的截圖里那樣，用 Unicode 字符模擬色彩。

（Claude Code 嘗試在 Markdown 中展示色彩）

視覺清晰度與易讀性

隨著 Claude 能處理更復(fù)雜的工作，它產(chǎn)出的技術(shù)規(guī)范、方案規(guī)劃文檔也越來越長(zhǎng)。實(shí)際使用中我發(fā)現(xiàn)，百行以上的 Markdown 文檔我基本不會(huì)完整閱讀，團(tuán)隊(duì)里其他人更是如此。

但 HTML 文檔可讀性要好得多。Claude 可以通過標(biāo)簽頁、插圖、超鏈接等方式，對(duì)文檔結(jié)構(gòu)進(jìn)行可視化排版，優(yōu)化瀏覽體驗(yàn)；還能適配移動(dòng)端，在不同設(shè)備上調(diào)整展示效果。

便捷分享

Markdown 文件很難分享，大多數(shù)瀏覽器無法原生良好渲染，往往只能作為附件發(fā)送郵件或消息。

而 HTML 文件只需上傳（例如上傳至對(duì)象存儲(chǔ) S3），就能直接分享鏈接。同事可在任意設(shè)備打開查閱，引用內(nèi)容。

如果技術(shù)規(guī)范、報(bào)告或代碼合并申請(qǐng)文檔采用 HTML 格式，他人完整閱讀的概率會(huì)大幅提升。

雙向交互

HTML 支持文檔交互功能。比如你可以讓它添加滑塊、旋鈕，用來調(diào)整設(shè)計(jì)參數(shù)，或是修改算法的各項(xiàng)配置，實(shí)時(shí)查看效果；還能將調(diào)整后的配置一鍵復(fù)制成指令，直接粘貼回 Claude Code。

想查看這類雙向交互的示例，可以閱讀我的演示項(xiàng)目文章：https://x.com/trq212/status/2017024445244924492

數(shù)據(jù)讀取能力

為什么用 Claude Code 生成 HTML 文件，而非 ClaudeAI 或 Claude Design？

核心原因是， Claude Code 可讀取海量上下文信息。

舉個(gè)例子，撰寫本文時(shí)，我讓 Claude Code 遍歷我的代碼文件夾，找出所有我生成的 HTML 文件，進(jìn)行分類整理，再制作一份包含各類示意圖的 HTML 文檔。

本文中的所有配圖，都是這樣生成的。

除本地文件系統(tǒng)外，Claude Code 還能通過 MCP 工具（如 Slack、Linear 項(xiàng)目管理工具）、Chrome 瀏覽器插件、Git 提交記錄等獲取更多上下文。

使用體驗(yàn)更愉悅

用 Claude 制作 HTML 文檔本身就更有趣，能讓我深度參與創(chuàng)作、更有投入感，單憑這一點(diǎn)就足夠了。

如何上手

我有點(diǎn)擔(dān)心大家看完這篇文章后，會(huì)把它做成 /html 指令模板之類的功能。

雖說這類模板或許有用，但我想強(qiáng)調(diào)，讓 Claude 生成 HTML 并不復(fù)雜，你只需直接指令它“生成一個(gè) HTML 文件”或“制作 HTML 成果物”即可。

關(guān)鍵是，明確你想要這個(gè)成果物實(shí)現(xiàn)什么功能、如何使用。

你可以后續(xù)慢慢打磨專屬指令模板，但現(xiàn)階段建議從零開始直接發(fā)指令，熟悉不同場(chǎng)景下的用法。

適用場(chǎng)景

為了更具象地說明，我針對(duì)不同場(chǎng)景制作了大量 HTML 文件，可在此查看：https://thariqs.github.io/html-effectiveness/，以下是場(chǎng)景概覽：

技術(shù)規(guī)范、方案規(guī)劃與思路探索

HTML 為 Claude 深度分析問題提供了廣闊空間。我處理問題時(shí)，不再只用簡(jiǎn)單的 Markdown 方案，而是會(huì)搭建一系列 HTML 文檔。

比如，我會(huì)先讓 Claude Code 頭腦風(fēng)暴，生成多種方案思路；接著讓它深化某一方向，制作原型或代碼片段；方案成熟后，再生成落地執(zhí)行計(jì)劃。確認(rèn)計(jì)劃無誤后，新建對(duì)話會(huì)話，導(dǎo)入所有 HTML 文檔，讓模型按方案開發(fā)。

驗(yàn)證環(huán)節(jié)，我也會(huì)讓校驗(yàn)代理讀取全部文檔，全面掌握需求細(xì)節(jié)。

示例指令

1. 我不確定引導(dǎo)頁該采用哪種設(shè)計(jì)方向，請(qǐng)生成6種風(fēng)格迥異的方案，在布局、語氣、信息密度上做出區(qū)分，整合在一份網(wǎng)格布局的 HTML 文件中，方便我橫向?qū)Ρ龋瑯?biāo)注每種方案的優(yōu)缺點(diǎn)。

2. 用 HTML 文件生成一份詳盡的落地執(zhí)行方案，務(wù)必包含原型圖、數(shù)據(jù)流示意圖與我需要審閱的關(guān)鍵代碼片段，排版清晰易讀。

適用場(chǎng)景

? 探索代碼的多種實(shí)現(xiàn)方式

? 對(duì)比多款視覺設(shè)計(jì)方案

代碼審閱與理解

Markdown 格式下的代碼可讀性很差。但通過 HTML，我們可以展示代碼差異、添加批注、繪制流程圖、梳理模塊結(jié)構(gòu)等。

可用來理解模型編寫的代碼、開展代碼評(píng)審，或是向他人講解代碼合并申請(qǐng)內(nèi)容。

我發(fā)現(xiàn)這種方式比 GitHub 自帶的代碼差異視圖效果更好，現(xiàn)在我每次提交代碼合并申請(qǐng)，都會(huì)附上 HTML 格式的代碼解讀文檔。

示例指令

幫我審閱這份代碼合并申請(qǐng)，生成一份 HTML 解讀文檔。我不熟悉限流/背壓邏輯，請(qǐng)重點(diǎn)分析該部分；展示完整代碼差異，在側(cè)邊欄添加批注，按問題嚴(yán)重程度用顏色標(biāo)注風(fēng)險(xiǎn)點(diǎn)，確保內(nèi)容清晰易懂。

適用場(chǎng)景

? 提交代碼合并申請(qǐng)

? 審閱他人代碼合并申請(qǐng)

? 理解代碼中的技術(shù)邏輯

設(shè)計(jì)與原型制作

Claude Design 本身就基于 HTML 開發(fā)，因?yàn)?HTML 的設(shè)計(jì)表現(xiàn)力極強(qiáng)，即便最終產(chǎn)品并非網(wǎng)頁端也適用。Claude 可先用 HTML 繪制設(shè)計(jì)草圖，再轉(zhuǎn)換成你需要的開發(fā)語言，如 React、Swift 等。

你還能制作交互原型，例如動(dòng)畫、點(diǎn)擊效果等。可以讓 Claude 添加滑塊、旋鈕，精準(zhǔn)調(diào)試各項(xiàng)效果參數(shù)。

示例指令

我需要制作一個(gè)新的結(jié)算按鈕原型，點(diǎn)擊后播放動(dòng)畫并快速變?yōu)樽仙Ｉ梢环?HTML 文件，內(nèi)置多個(gè)滑塊和參數(shù)選項(xiàng)，方便我調(diào)試動(dòng)畫效果，添加復(fù)制按鈕，導(dǎo)出最優(yōu)參數(shù)。

適用場(chǎng)景

? 制作設(shè)計(jì)系統(tǒng)文檔

? 調(diào)整組件樣式

? 可視化組件庫

? 制作趣味交互動(dòng)畫原型

報(bào)告撰寫、調(diào)研與知識(shí)學(xué)習(xí)

Claude Code 擅長(zhǎng)整合多源信息，生成可讀性極強(qiáng)的報(bào)告。你可以指令它讀取 Slack 聊天記錄、代碼庫、Git 記錄、網(wǎng)絡(luò)資料等，為自己、管理層、團(tuán)隊(duì)生成各類深度報(bào)告。

報(bào)告形式可以是長(zhǎng)篇 HTML 文檔、交互式解讀頁，甚至演示幻燈片，可要求 Claude 用 SVG 繪制示意圖輔助理解。

例如，我撰寫提示詞緩存相關(guān)文章時(shí)，讓 Claude 讀取 Git 記錄，整理出一份 HTML 深度調(diào)研文檔，梳理提示詞緩存的所有更新內(nèi)容。

示例指令

我不理解我們的限流器工作原理，請(qǐng)讀取相關(guān)代碼，生成單頁 HTML 解讀文檔：包含令牌桶流程圖、3–4 段帶批注的核心代碼片段，底部添加常見踩坑點(diǎn)說明，排版適配快速閱讀。

適用場(chǎng)景

? 梳理功能實(shí)現(xiàn)邏輯

? 講解專業(yè)技術(shù)概念

? 給上級(jí)提交每周工作匯報(bào)

? 向管理層提交故障復(fù)盤報(bào)告

? 制作 SVG 示意圖、流程圖、技術(shù)架構(gòu)圖等

自定義編輯界面

有些需求很難純用文字描述。這時(shí)我會(huì)讓 Claude 制作臨時(shí)專用編輯器，不是完整產(chǎn)品或通用工具，而是僅針對(duì)當(dāng)前數(shù)據(jù)的單份 HTML 文件。

核心技巧是增加導(dǎo)出功能：設(shè)置“復(fù)制為 JSON”或“復(fù)制為指令”按鈕，將界面上的所有操作，轉(zhuǎn)換成可粘貼回 Claude Code 的格式。

示例指令

我需要重新調(diào)整30條 Linear 工單的優(yōu)先級(jí)，生成一份 HTML 文件，將每個(gè)工單做成可拖拽卡片，分為「立即處理/后續(xù)處理/延后處理/剔除」四列；由模型初步排序，添加“導(dǎo)出為 Markdown”按鈕，導(dǎo)出最終排序結(jié)果，并為每類工單標(biāo)注一句優(yōu)先級(jí)理由。

這是我們的功能開關(guān)配置，請(qǐng)制作表單式編輯器：按業(yè)務(wù)模塊分組開關(guān)，展示開關(guān)間的依賴關(guān)系，若啟用前置條件未開啟的開關(guān)則給出警告；添加“復(fù)制變更內(nèi)容”按鈕，僅導(dǎo)出修改后的配置項(xiàng)。

我正在調(diào)試系統(tǒng)提示詞，請(qǐng)制作左右分欄編輯器：左側(cè)為可編輯提示詞，高亮變量占位符；右側(cè)為3個(gè)示例輸入，實(shí)時(shí)渲染填充后的模板；添加字符/令牌計(jì)數(shù)與復(fù)制按鈕。

適用場(chǎng)景

? 工單、測(cè)試用例、反饋信息的排序、分級(jí)、歸類

? 編輯結(jié)構(gòu)化配置（功能開關(guān)、環(huán)境變量、帶約束的 JSON/YAML）

? 實(shí)時(shí)調(diào)試提示詞、模板、文案

? 整理數(shù)據(jù)集，篩選、標(biāo)注樣本并導(dǎo)出

? 批注文檔、文稿、代碼差異并導(dǎo)出批注內(nèi)容

? 調(diào)試文字難以精準(zhǔn)表達(dá)的參數(shù)：顏色、緩動(dòng)曲線、裁剪區(qū)域、定時(shí)任務(wù)、正則表達(dá)式等

常見問題

我向很多人分享了改用 HTML 的經(jīng)驗(yàn)，收到了一些高頻問題，在此統(tǒng)一解答：

1. HTML 會(huì)不會(huì)更消耗 token？
雖然 Markdown 通常占用 token 更少，但 HTML 更強(qiáng)的表達(dá)能力，加上我完整閱讀文檔的概率大幅提升，整體產(chǎn)出效果反而更好。

Opus 4.7 支持百萬級(jí)上下文窗口，token 消耗的增加基本可以忽略。

2. 那你現(xiàn)在還會(huì)用 Markdown 嗎？
說實(shí)話，我?guī)缀跛袌?chǎng)景都不再使用 Markdown，不過我算是 HTML 的重度使用者。

3. 如何查看 HTML 文件？
我一般直接在本地瀏覽器打開（可讓 Claude 幫你打開），需要分享鏈接的話，上傳至對(duì)象存儲(chǔ) S3 即可。

4. 生成 HTML 會(huì)不會(huì)比 Markdown 更耗時(shí)？
確實(shí)會(huì)！HTML 的生成時(shí)長(zhǎng)是 Markdown 的 2–4 倍，但我認(rèn)為最終效果值得付出這份時(shí)間。

5. 版本控制怎么辦？
這確實(shí)是HTM最大的缺點(diǎn)：對(duì)比 Markdown，HTML 的代碼差異雜亂，很難審閱。

6. 如何讓 Claude 做出符合我審美/企業(yè)風(fēng)格的 HTML，避免樣式粗糙？
前端設(shè)計(jì)插件可以輔助 Claude 優(yōu)化 HTML 樣式。若要匹配企業(yè)風(fēng)格，可讓 Claude 讀取代碼庫，生成一份專屬設(shè)計(jì)系統(tǒng) HTML 文件，后續(xù)所有 HTML 文檔均以此為參考。

總而言之，我選擇 HTML 的核心原因，是能與 Claude 的協(xié)作更可控、信息同步更充分。

我曾擔(dān)心，因?yàn)椴辉偕疃乳喿x Claude 生成的方案，只能被動(dòng)接受它的決策。

但改用 HTML 后，我反而能比以往更全面地把控項(xiàng)目進(jìn)度與細(xì)節(jié)。希望你也能有同樣的體驗(yàn)。