拋棄Markdown！Claude Code 內部成員：使用HTML和Agent交流效果好到離譜
整理版優先睇
用 HTML 取代 Markdown：提升 AI 協作效率與閲讀體驗
呢篇文章係 Claude Code 團隊成員 Thariq 嘅分享。佢發現 Markdown 作為 AI agent 輸出格式開始拖後腿：超過一百行嘅 Markdown 文件根本讀唔落，而且佢越來越少自己編輯，多數都交畀 Claude 改，搞到 Markdown 嘅優勢消失曬。佢嘅結論係 HTML 先係 AI 時代更啱嘅格式，因為信息密度高、視覺清晰、易分享、支持交互，而且生成過程充滿樂趣。
Thariq 解釋咗 HTML 點樣解決 Markdown 嘅限制：可以用表格、CSS、SVG、腳本等呈現複雜數據，閲讀體驗好過 ASCII 碼或者 Unicode 字符模擬。HTML 文件可以直接雙擊打開，傳上 S3 就變成一條連結，任何人都可以睇，唔使煩惱渲染問題。佢仲提到，Claude Code 嘅大上下文可以一次過處理大量文件，生成包含圖表嘅總覽 HTML，甚至整合 Slack、Linear 等工具嘅資料。
最後佢提供咗五個實戰場景（產品說明、代碼審查、設計原型、深度報告、一次性編輯器），並回應咗常見嘅疑問：Token 消耗、生成速度、版本控制同設計系統。Thariq 強調，用 HTML 可以令你重新投入創作循環，唔再因為 Markdown 太難讀而 skip 審查 AI 計劃。
- Markdown 超過一百行就難以閲讀，且人類編輯優勢下降，HTML 係更好嘅輸出格式
- HTML 信息密度高，可以完美呈現表格、CSS、SVG、交互等，視覺清晰度遠超 Markdown
- HTML 文件易於分享（直開連結），支援雙向交互（滑塊、按鈕），提升閲讀意願
- 實戰場景包括產品規劃、代碼審查、設計原型、深度報告同一次性編輯器，每個都可以用簡單提示生成
- 常見問題有共識：Token 增加微不足道，生成速度慢 2-4 倍但效果值得，版本控制可透過設計系統解決
HTML 效果案例彙總
Thariq 展示嘅各種使用 HTML 輸出嘅案例，包括對比網格、代碼審查頁面、交互原型等
點解要轉用 HTML？
Anthropic 內部有人開始放棄 Markdown 喇。呢個人係 Claude Code 團隊嘅 Thariq，佢認為 Markdown 已經成為 AI agent 時代嘅限制。
超過一百行嘅 Markdown 文件根本讀唔落
Thariq 發現自己越來越少手動編輯呢啲文件，多數都係叫 Claude 改，所以 Markdown 最大嘅優勢（方便人編輯）冇咗。而且佢想要更豐富嘅視覺效果：顏色、圖表、可交互內容同直接分享嘅連結。
HTML 嘅五大優勢
相比 Markdown，HTML 嘅信息密度呈指數級提升。除咗基本標題排版，仲可以完美呈現各類複雜數據：
- 利用表格呈現製表數據
- 利用 CSS 呈現設計數據
- 利用 SVG 呈現插畫
- 利用腳本標籤嵌入代碼片段
- 利用 HTML 元素結合 JS 同 CSS 實現交互
- 利用絕對定位同畫布呈現空間數據
- 利用圖片標籤展示圖像
如果冇 HTML，模型喺 Markdown 只能用低效嘅 ASCII 碼畫圖
另外，HTML 文件嘅視覺清晰度極高。Claude 可以透過標籤頁、插圖同連結令結構更清晰，甚至做到響應式設計，電話都睇得。分享零門檻：傳上 S3 就係一條連結，任何人點開就睇到，方案被閲讀嘅機率大增。
HTML 文件唔單止睇得，仲可以玩
你可以叫 Claude 喺頁面加入滑塊或者旋鈕調整設計細節，甚至加個按鈕一鍵複製調整好嘅參數貼返落 Claude Code。而且 Claude Code 嘅龐大上下文可以一次過遍歷文件夾、整合 Slack 同 Linear 等工具資料，生成一個包含各類圖表嘅 HTML 總覽頁面。最後，用 HTML 創作嘅過程充滿樂趣，令你更有參與感。
五個實戰場景
新手只需要喺提示詞裏面明確要求生成 HTML 文件就得，唔使配置複雜插件。核心技巧係清楚自己想用呢個文件做乜。以下係具體場景：
- 1 產品說明規劃：叫 Claude 生成包含探索選項嘅 HTML 網格對比圖，再生成交互原型同代碼，最後整份精美實施計劃
- 2 代碼審查理解：用 HTML 渲染帶有差異對比、邊距註釋同流程圖嘅模塊，比 GitHub 默認視圖好得多
- 3 設計原型製作：用 HTML 畫設計草圖，再根據草圖寫出 React 或 Swift 最終代碼，加滑塊微調參數
- 4 深度報告研究：叫 Claude 搜尋 Slack、代碼庫同互聯網，濃縮成一份可讀性高嘅 HTML 報告，適合週報或事故報告
- 5 一次性定製編輯器：為特定數據生成可拖拽卡片嘅 HTML 編輯器，帶導出按鈕轉成 JSON 貼返 Claude Code
HTML 係 Claude 深入探索問題嘅絕佳畫布
每個場景都有對應嘅提示模板，原文提供咗詳細例子。例如代碼審查可以提示：「幫我審查呢個 PR，創建 HTML 格式說明文檔，重點解釋流處理同背壓邏輯」。
常見問題同總結
關於轉用 HTML，大家通常有幾個疑問。
Token 消耗雖然比 Markdown 多，但收益遠超付出
喺 Opus 4.7 百萬級上下文面前，嗰啲 Token 增量完全可以忽略。生成速度雖然慢 2-4 倍，但最終效果絕對值得。版本控制係最大短板，HTML 差異對比好雜亂，不過可以叫 Claude 讀取代碼庫生成設計系統 HTML 作為參考基準，令輸出符合公司審美。
作者本人已經徹底停用 Markdown，係完全嘅 HTML 極簡主義者。佢建議由零開始多試幾次，體會 HTML 喺唔同場景下嘅妙用。
Anthropic 內部有人開始放棄用 Markdown 喇。
呢個人係 Claude Code 團隊嘅 Thariq，佢啱啱寫咗篇文章，講佢點解將 HTML 當成 AI 時代默認嘅輸出格式。
觀點：Markdown 已經變成限制。
Markdown 嘅問題喺邊度
以前，Markdown 係 AI 智能體同人類溝通嘅主流格式。簡單、可移植、有基本富文本能力，亦方便人手動編輯。
但隨住智能體越來越強，Thariq 覺得呢個格式開始拖後腿喇。
超過一百行嘅 Markdown 文件佢根本睇唔落去。佢亦越來越少自己編輯呢啲文件，大多數時候都係畀 Claude 去改，咁樣 Markdown 最大嘅優勢（方便人編輯）就冇咗。
更加關鍵嘅係，佢想要更豐富嘅視覺呈現：顏色、圖表、可以互動嘅內容，仲有可以直接分享嘅連結。
如果你想睇嚇實際效果，可以訪問呢個連結睇案例總匯：
https://thariqs.github.io/html-effectiveness
睇曬全文你會更加明點解要咁做。
點解選擇HTML
資訊密度呈指數級提升
比起Markdown，HTML可以傳達豐富好多嘅資訊。除咗基本嘅標題同排版，佢仲可以完美呈現各類複雜數據：
• 利用表格呈現製表數據 • 利用CSS呈現設計數據 • 利用SVG呈現插畫 • 利用script標籤嵌入程式碼片段 • 利用HTML元素結合JS同CSS實現互動 • 利用絕對定位同canvas呈現空間數據 • 利用img標籤展示圖像
可以話，幾乎所有Claude可以讀取嘅資訊，都可以用HTML高效咁展現出嚟。呢個就係為模型向你傳達深度資訊提供咗一條極之高效嘅通道。如果冇HTML，模型喺Markdown裏面只用低效嘅ASCII碼畫圖，或者極之費力咁用Unicode字符嚟模擬顏色。
視覺清晰，閲讀體驗拉到最滿
隨住Claude處理複雜任務嘅能力提升，佢寫出嘅規劃同說明書越來越長。喺實際工作中，幾乎冇人會耐心睇完一份超過一百行嘅Markdown文件，更加唔好提畀團隊入面嘅其他人去睇喇。
HTML文件嘅閲讀體驗就完全唔同。Claude可以透過視覺排版，利用tab、插圖同連結令文件結構更加清晰。佢甚至可以做成交互式設計（響應式設計），令你喺手機上都輕鬆閲讀。
分享零門檻
Markdown文件分享起嚟相當麻煩，大多數瀏覽器並唔能夠原生完美渲染，通常只可以作為附件傳送。而對於HTML，只要將文件傳到雲端例如S3，你就可以直接掟一個連結畀同事。任何人在任何裝置上㩒開就睇到，你嘅方案、報告或程式碼審查說明被真正閲讀嘅概率會大幅提升。
支援雙向互動
HTML文件唔只可以睇，仲可以玩。你可以叫Claude喺頁面入面加返滑塊或旋鈕，用嚟調整設計細節，或者微調演算法選項睇即時效果。你甚至可以要求佢加一個按鈕，一鍵將呢啲調整好嘅參數複製成提示詞，直接貼返落Claude Code度繼續對話。
超級數據吞吐同整合
點解用Claude Code嚟生成HTML，而唔係普通嘅Claude網頁版？最大嘅原因在於Claude Code龐大嘅上下文吞吐能力。
喺寫呢篇文章嗰時，作者直接叫Claude Code遍歷程式碼文件夾，揾出所有生成過嘅HTML文件進行分組歸類，最後生成一個包含各類圖表嘅HTML總覽頁面。文章入面嘅圖表就係咁自動生成嘅。
除咗本地文件系統，Claude Code仲可以透過MCP集成工具獲取Slack同Linear等平台嘅上下文，或者透過Chrome瀏覽器、Git歷史記錄等渠道收集資訊，最後匯聚成一個HTML展現出嚟。
充滿創造嘅樂趣
用Claude生成HTML文件嘅過程本身就充滿樂趣，佢可以令你喺創作中更加有參與感同投入感。
新手點樣入門
睇到呢度你可能會覺得需要配置複雜嘅插件。完全唔需要。你只需要喺提示詞裏面明確要求佢生成一個HTML文件或HTML製品就得。
核心技巧在於你要清楚自己想用呢個文件做啲乜。建議由零開始試多幾次，體會嚇佢喺唔同場景下嘅妙用。以下係具體嘅實操場景，所有案例都可以參考：
https://thariqs.github.io/html-effectiveness/
場景一：產品說明、規劃同探索
HTML係Claude深入探索問題嘅絕佳畫布。喺解決複雜問題時，唔好淨係要一份Markdown計劃，而係叫佢生成一張包含探索選項嘅HTML網格對比圖，然後再生成互動原型同程式碼片段。確認冇錯之後，再叫佢生成一份排版精美嘅HTML實施計劃。當你將呢啲文件交畀程式碼審查智能體時，佢都會擁有更廣闊嘅上下文視野。
你可以咁樣提示：我對新手引導界面嘅方向仲未確定。請生成6種截然不同嘅方案，喺佈局、基調同資訊密度上做出差異，並將佢哋排列喺一個HTML文件嘅網格中，方便我並排對比，同時標註出每個方案嘅取捨。
場景二：程式碼審查同理解
喺Markdown裏面睇程式碼非常枯燥。但喺HTML裏面，你可以叫Claude渲染出帶有差異對比、邊距註釋同流程圖嘅模塊。呢個對理解陌生程式碼或者向人解釋程式碼修改邏輯極之有效，體驗往往比GitHub默認嘅對比視圖好得多。
你可以咁樣提示：幫我審查呢個PR，建立一個HTML格式嘅說明文件。我對呢度嘅流處理同背壓邏輯唔係好熟，請重點解釋。喺頁面中渲染出實際嘅程式碼差異，喺旁邊加上邊距註釋，根據嚴重程度對發現嘅問題進行顏色編碼。
場景三：設計同原型製作
Claude唔單止可以用HTML畫出設計草圖，仲可以根據呢啲草圖用React或Swift等語言寫出最終程式碼。你可以用佢嚟製作包含動畫同操作反饋嘅互動原型，甚至加上滑塊畀你微調參數。
你可以咁樣提示：我想為結賬按鈕做一個原型，㩒嗰時播放一段動畫並迅速變成紫色。製作一個HTML文件，提供幾個滑塊畀我嘗試呢個動畫嘅唔同參數選項，並加一個複製按鈕令我可以一鍵拷貝好用嘅參數。
場景四：深度報告同研究學習
你可以叫Claude搜索你嘅Slack記錄、程式碼庫同互聯網，將海量資訊濃縮成一份可讀性極強嘅HTML報告。呢種形式非常適合用嚟畀老細寫週報、出具事故報告，或者自己學習新概念。
你可以咁樣提示：我唔明我哋嘅限流器係點樣運作嘅。請閲讀相關程式碼並生成一個單頁HTML解釋文件，裏面要包含令牌桶流程圖、三四個關鍵程式碼片段嘅註釋說明，以及底部嘅避坑指南。請針對初次閲讀者進行排版優化。
場景五：生成一次性訂製編輯界面
有時好難用文字描述清楚你想點樣調整數據。呢個時候你可以叫Claude為你正在處理嘅數據專門生成一個一次過嘅HTML可視化編輯器。重點係，呢個編輯器必須要帶有一個導出按鈕，可以將你喺界面裏面嘅操作轉化成JSON或提示詞，令你方便咁貼返落Claude Code。
你可以咁樣提示：我需要重新排定呢30個Linear任務嘅優先級。做一個HTML文件，將每個任務做成可拖拽嘅卡片，分為現在、下一步、稍後、砍掉四列。請根據你嘅判斷預先排序，並添加一個複製按鈕，一鍵導出最終排序結果以及每個類別嘅簡短理由。
常見問題
關於轉用HTML格式，大家通常有幾個核心疑問。
咁樣會唔會好嘥Token？
雖然Markdown確實消耗更少Token，但考慮到HTML帶嚟嘅極佳展現效果同超高嘅閲讀意願，整體收益遠超付出。喺Opus 4.7模型百萬級嘅上下文窗口面前，呢啲Token消耗嘅增加完全感覺唔到。
而家仲要喺咩場景下用Markdown？
作者本人已經徹底停用Markdown，可以話係完全嘅HTML極簡主義者。
生成出嚟嘅HTML文件點樣睇？
直接喺本地瀏覽器雙擊打開就得，亦可以要求Claude幫你自動打開。如果需要分享，傳到S3生成連結就得。
生成HTML係咪比Markdown慢好多？
的確會慢啲。生成HTML耗費嘅時間可能係Markdown嘅兩到四倍，但最終嘅驚豔效果絕對對得起呢份等待。
點樣解決版本控制嘅問題？
呢個的確係HTML目前最大嘅短板，HTML嘅程式碼差異對比比Markdown要雜亂得多，審查起嚟有一定難度。
點樣令Claude生成嘅HTML符合公司審美而且唔難睇？
前端設計插件可以幫到大忙。如果想完全匹配公司嘅UI風格，你可以叫Claude讀取你嘅程式碼庫，先生成一個專屬嘅設計系統HTML文件，以後生成其他HTML文件時，叫佢將呢個系統文件作為參考基準就得。
最重要嘅係，使用HTML可以令你喺AI輔助開發中重新揾返參與感。因為Markdown太難讀而放棄審查AI計劃嘅擔憂將會一掃而空，你會發現自己比以前任何時候都更加緊密咁融入咗成個創作循環入面。
--完--
最後記得⭐️我，每日都在更新：如果覺得文章仲唔錯嘅話可以點讚轉發推薦評論
/...@作者：你講得完全正確（YAR師）
Anthropic 內部有人開始放棄 Markdown 了。
這個人是 Claude Code 團隊的 Thariq，他剛剛寫了一篇文章，講自己為什麼把 HTML 當成 AI 時代默認的輸出格式。
觀點：Markdown 已經成了限制。
Markdown 的問題在哪
過去，Markdown 是 AI 智能體和人類溝通的主流格式。簡單、可移植、有基礎富文本能力，也方便人手動編輯。
但隨着智能體越來越強，Thariq 覺得這個格式開始拖後腿了。
超過一百行的 Markdown 文件他根本讀不下去。他也越來越少自己編輯這些文件，大多數時候都是讓 Claude 去改，這樣一來 Markdown 最大的優勢（方便人編輯）也沒了。
更關鍵的是，他想要更豐富的視覺呈現：顏色、圖表、可交互的內容，還有可以直接分享的連結。
如果你想先看點實際效果，可以訪問這個連結查看案例彙總：
https://thariqs.github.io/html-effectiveness
看完全文你會更懂為什麼該這麼做。
為什麼選擇HTML
信息密度呈指數級提升
相比Markdown，HTML能傳達豐富得多的信息。除了基礎的標題和排版，它還能完美呈現各類複雜數據：
• 利用表格呈現製表數據 • 利用CSS呈現設計數據 • 利用SVG呈現插畫 • 利用腳本標籤嵌入代碼片段 • 利用HTML元素結合JS和CSS實現交互 • 利用絕對定位和畫布呈現空間數據 • 利用圖片標籤展示圖像
可以說，幾乎所有Claude能讀取的信息，都可以用HTML高效地展現出來。這就為模型向你傳達深度信息提供了一條極其高效的通道。如果沒有HTML，模型在Markdown裏只能用低效的ASCII碼畫圖，或者極其費力地用Unicode字符來模擬顏色。
視覺清晰，閲讀體驗拉滿
隨着Claude處理複雜任務的能力提升，它寫出的規劃和說明書越來越長。在實際工作中，幾乎沒人會耐心看完一份超過一百行的Markdown文件，更別提讓團隊裏的其他人去讀了。
HTML文檔的閲讀體驗則完全不同。Claude可以通過視覺排版，利用標籤頁、插圖和連結讓文檔結構更加清晰。它甚至能做成響應式設計，讓你在手機上也能輕鬆閲讀。
分享零門檻
Markdown文件分享起來相當麻煩，大多數瀏覽器並不能原生完美渲染，通常只能作為附件發送。而對於HTML，只要把文件傳到雲端比如S3，你就能直接甩一個連結給同事。任何人在任何設備上點開就能看，你的方案、報告或代碼審查說明被真正閲讀的概率會大幅提升。
支持雙向交互
HTML文檔不僅能看，還能玩。你可以讓Claude在頁面里加上滑塊或旋鈕，用來調整設計細節，或者微調算法選項看實時效果。你甚至可以要求它加一個按鈕，一鍵把這些調整好的參數複製成提示詞，直接粘貼回Claude Code裏繼續對話。
超級數據吞吐與整合
為什麼用Claude Code來生成HTML，而不是普通的Claude網頁版？最大的原因在於Claude Code龐大的上下文吞吐能力。
在寫這篇文章時，作者直接讓Claude Code遍歷代碼文件夾，找出所有生成過的HTML文件進行分組歸類，最後生成一個包含各類圖表的HTML總覽頁面。文章中的圖表就是這麼自動生成的。
除了本地文件系統，Claude Code還能通過MCP集成工具獲取Slack和Linear等平台的上下文，或者通過Chrome瀏覽器、Git歷史記錄等渠道蒐集信息，最後匯聚成一個HTML展現出來。
充滿創造的樂趣
用Claude生成HTML文檔的過程本身就充滿樂趣，它能讓你在創作中更有參與感和投入感。
新手如何入門
看到這裏你可能會覺得需要配置複雜的插件。完全不需要。你只需要在提示詞裏明確要求它生成一個HTML文件或HTML製品即可。
核心技巧在於你要清楚自己想用這個文件做什麼。建議從零開始多試幾次，體會它在不同場景下的妙用。以下是具體的實操場景，所有案例都可以參考：
https://thariqs.github.io/html-effectiveness/
場景一：產品說明、規劃與探索
HTML是Claude深入探索問題的絕佳畫布。在解決複雜問題時，不要只要一份Markdown計劃，而是讓它生成一張包含探索選項的HTML網格對比圖，接着再生成交互原型和代碼片段。確認無誤後，再讓它生成一份排版精美的HTML實施計劃。當你把這些文件交給代碼審查智能體時，它也會擁有更廣闊的上下文視野。
你可以這樣提示：我對新手引導界面的方向還不確定。請生成6種截然不同的方案，在佈局、基調和信息密度上做出差異，並將它們排布在一個HTML文件的網格中，方便我並排對比，同時標註出每個方案的取捨。
場景二：代碼審查與理解
在Markdown裏看代碼非常枯燥。但在HTML裏，你可以讓Claude渲染出帶有差異對比、邊距註釋和流程圖的模塊。這對理解陌生代碼或向別人解釋代碼修改邏輯極其有效，體驗往往比GitHub默認的對比視圖好得多。
你可以這樣提示：幫我審查這個PR，創建一個HTML格式的說明文檔。我對這裏的流處理和背壓邏輯不太熟，請重點解釋。在頁面中渲染出實際的代碼差異，在旁邊加上邊距註釋，根據嚴重程度對發現的問題進行顏色編碼。
場景三：設計與原型製作
Claude不僅能用HTML畫出設計草圖，還能根據這些草圖用React或Swift等語言寫出最終代碼。你可以用它來製作包含動畫和操作反饋的交互原型，甚至加上滑塊供你微調參數。
你可以這樣提示：我想為結賬按鈕做一個原型，點擊時播放一段動畫並迅速變成紫色。製作一個HTML文件，提供幾個滑塊讓我嘗試這個動畫的不同參數選項，並加一個複製按鈕讓我能一鍵拷貝好用的參數。
場景四：深度報告與研究學習
你可以讓Claude搜索你的Slack記錄、代碼庫和互聯網，將海量信息濃縮成一份可讀性極強的HTML報告。這種形式非常適合用來給老闆寫週報、出具事故報告，或者自己學習新概念。
你可以這樣提示：我不懂我們的限流器是怎麼工作的。請閲讀相關代碼並生成一個單頁HTML解釋文檔，裏面要包含令牌桶流程圖、三四個關鍵代碼片段的註釋說明，以及底部的避坑指南。請針對初次閲讀者進行排版優化。
場景五：生成一次性定製編輯界面
有時候很難用文字描述清楚你想怎麼調整數據。這時你可以讓Claude為你正在處理的數據專門生成一個一次性的HTML可視化編輯器。重點是，這個編輯器必須要帶有一個導出按鈕，能把你在界面裏的操作轉化成JSON或提示詞，讓你方便地粘貼回Claude Code。
你可以這樣提示：我需要重新排定這30個Linear任務的優先級。做一個HTML文件，把每個任務做成可拖拽的卡片，分為現在、下一步、稍後、砍掉四列。請根據你的判斷預先排序，並添加一個複製按鈕，一鍵導出最終排序結果以及每個類別的簡短理由。
常見問題
關於切換到HTML格式，大家通常有幾個核心疑問。
這會不會很費Token？
雖然Markdown確實消耗更少的Token，但考慮到HTML帶來的極佳展現效果和超高的閲讀意願，整體收益遠超付出。在Opus 4.7模型百萬級的上下文窗口面前，這點Token消耗的增加完全感覺不到。
現在還要在什麼場景下用Markdown？
作者本人已經徹底停用Markdown，可以說是完全的HTML極簡主義者。
生成出來的HTML文件怎麼查看？
直接在本地瀏覽器雙擊打開即可，也可以要求Claude幫你自動打開。如果需要分享，傳到S3生成連結就行。
生成HTML是不是比Markdown慢很多？
確實會變慢。生成HTML耗費的時間可能是Markdown的兩到四倍，但最終的驚豔效果絕對對得起這份等待。
如何解決版本控制的問題？
這確實是HTML目前最大的短板，HTML的代碼差異對比比Markdown要雜亂得多，審查起來有一定難度。
怎麼讓Claude生成的HTML符合公司審美且不難看？
前端設計插件能幫上大忙。如果想完全匹配公司的UI風格，你可以讓Claude讀取你的代碼庫，先生成一個專屬的設計系統HTML文件，以後生成其他HTML文件時，讓它把這個系統文件作為參考基準即可。
最重要的是，使用HTML能讓你在AI輔助開發中重新找回參與感。因為Markdown太難讀而放棄審查AI計劃的擔憂將被一掃而空，你會發現自己比以往任何時候都更緊密地融入到了整個創作循環中。
--end--
最後記得⭐️我，每天都在更新：如果覺得文章還不錯的話可以點贊轉發推薦評論
/...@作者：你說的完全正確（YAR師）