這個Claude Code輸出HTML的技巧絕了，我願稱之為年度最香
整理版優先睇
用Claude Code直接輸出HTML，比Markdown更強大、更實用——呢個技巧值得開發者即時採用。
呢篇文章係由Anthropic Claude Code團隊工程師Thariq Shihipar嘅觀點引發，佢認為開發者應該放棄用Markdown輸出，改為直接用HTML。佢仲起咗個展示網站，收錄20個AI生成HTML嘅demo，效果令人眼前一亮。
文章解釋咗點解HTML比Markdown好用：Markdown只能做粗體、列表呢啲基本格式，但HTML可以做到SVG內聯圖、可摺疊章節、Tab切換、實時搜索、交互式數據可視化等，資訊量同實用性差一個檔次。而且而家AI嘅context window已經好大，HTML標籤嘅token成本再唔係問題。
整體結論係：開發者只要喺Prompt度加一句「請用HTML輸出」，就可以將AI從「回答問題」升級做「構建工具」，喺代碼審查、架構設計、技術文檔呢啲場景下效果提升好明顯。
- AI輸出HTML比Markdown更有效，因為可以生成可交互嘅工具而唔係平面文字。
- 方法好簡單：只要喺Prompt加一句「請用HTML格式輸出」就得，唔使裝任何插件。
- Markdown係「文本加粗」，HTML係「直接俾你一個工具」，兩者資訊量同實用性差好遠。
- 呢個技巧嘅本質係將AI從回答問題升級到構建工具，令你得到一個即時可用嘅交互頁面。
- 開發者應該即刻喺代碼審查、流程圖、文檔呢啲任務上用HTML輸出，效果會令你驚喜。
Thariq嘅HTML效果展示站
收錄20個AI生成HTML嘅demo，涵蓋代碼審查、流程圖、幻燈片等場景，瀏覽器直接打開就用到。
萬用Prompt：用HTML輸出
When relevant, prefer HTML output over Markdown. 加呢句就可以令Claude Code默認用HTML輸出。
點解HTML比Markdown更勁？
Anthropic工程師Thariq Shihipar寫咗篇長文，核心觀點係：讓AI直接輸出HTML，效果會好到令你想刪曬之前啲筆記。佢仲整咗個展示站，有20個AI生成HTML嘅demo，全部係瀏覽器開到即用。
Markdown只做到粗體、列表、代碼塊呢啲基本格式，但HTML可以做到SVG內聯圖、可摺疊章節、Tab切換、實時搜索、交互式數據可視化。Simon Willison（Django之父）都話：以前token上限細所以用Markdown，而家context window咁大，個邏輯早就應該翻篇。
- 1 Markdown能做的：粗體、斜體、標題、代碼塊、列表、表格、連結、圖片。
- 2 HTML能做的：以上全部 + SVG內聯圖、可摺疊章節、Tab切換、實時搜索/過濾、下拉菜單、按鈕、表單、帶交互的數據可視化。
點樣用？改一句Prompt就得
你唔使裝任何插件或配置參數，只需要喺Prompt度加一句：「請用HTML格式輸出，直接生成一個.html文件。」或者更具體啲：「把呢個架構圖用HTML輸出，帶SVG，內嵌樣式，瀏覽器打開即可查看。」
# Markdown版
cat mydata.json | claude -p "用 Markdown 總結這份 JSON 的關鍵數據"
# HTML版
cat mydata.json | claude -p "分析呢個 JSON，輸出為 HTML 頁面，帶可視化圖表和交互"一個細節：默認情況下Claude會將HTML當作普通文本輸出，你可能需要加一句「只輸出純HTML代碼，不需要markdown代碼塊標記」，防止佢包多層```html。
Thariq自己已經開始喺prompt默認加句：When relevant, prefer HTML output over Markdown.
效果對比：Markdown vs HTML差幾遠？
用代碼審查呢個場景最能夠說明差距。Markdown版本只係列出修改內容同問題列表，但HTML版本做到：文件變更一目瞭然（綠色/紅色diff直接內嵌），每個問題旁邊有severity標籤（Critical/Warning/Info），點擊問題可展開詳細說明，頂部有目錄導航，底部有總結卡片。
- Markdown版本：平面文字，要逐字睇，冇任何交互。
- HTML版本：綠色/紅色diff、severity標籤、展開詳情、導航目錄、總結卡片，操作性強好多。
- Simon Willison評價：Markdown嘅信息係平嘅，HTML嘅信息係有結構嘅。
點解呢個技巧而家先流行？
以前有三個障礙：token成本高（HTML係Markdown嘅2-3倍）、渲染預期高（以為要Full CSS+JS）、使用場景未到（Markdown夠用就唔想搞咁多）。而家呢三個障礙都消失咗。
- 1 Context window已經突破十萬token，HTML嘅額外成本可以忽略不計。
- 2 HTML輸出唔需要完美——代碼審查報告、信息圖、流程圖呢啲場景對渲染容錯率好高。
- 3 Claude Code呢類工具將AI編碼帶入日常工作流，喺terminal生成HTML成本極低。
Thariq嘅文章喺2026年5月初發佈，唔係巧合，係時間到了。
真正價值：將AI變成工具生成器
HTML輸出呢個玩法嘅本質，唔係「令AI輸出更好睇嘅格式」，而係令AI從「回答問題」升級到「構建工具」。一篇Markdown係一份答案，一個HTML頁面係一個可交互嘅工具。
- 代碼審查 → HTML diff工具
- 學習新框架 → HTML文檔站
- 研究競品 → HTML對比報告
- 做架構設計 → HTML流程圖+交互原型
【引言】Anthropic工程師寫咗篇長文，勸開發者放棄Markdown，改用HTML輸出——理由講出嚟你可能唔信：HTML而家反而更划算，而且效果遠超你想像。
用Claude Code寫代碼，你一定習慣咗呢個流程：
俾佢一個問題 → 佢輸出Markdown → 你複製貼上到文檔/筆記/聊天視窗 → 搞掂。
呢個流程冇問題。但佢有個隱藏嘅天花板——Markdown表達到嘅嘢，上限太低喇。
SVG圖？做唔到。
交互組件？做唔到。
可摺疊導航？做唔到。
帶樣式嘅信息圖？Markdown硬要渲染，最多俾你加個代碼高亮。
01 呢個玩法，係Anthropic工程師先捅破嘅
講呢句話嘅人叫 Thariq Shihipar，Anthropic Claude Code團隊嘅工程師。
前幾日佢喺個人博客發咗篇長文，標題就係 The Unreasonable Effectiveness of HTML。核心觀點一句話：
令AI直接輸出HTML，而唔係Markdown，效果會好到令你想將之前嘅筆記全部刪曬重新做過。
佢整咗個配套網站 thariqs.github.io/html-effectiveness，收錄咗20個AI生成HTML嘅demo——全部都係令AI直接輸出一個 .html 文件，瀏覽器打開就可以用。
呢啲demo覆蓋嘅場景，Markdown根本玩唔掂：
· 代碼審查**：帶顏色標註嘅diff，hover顯示上下文，可摺疊嘅問題分級
· 流程圖**：SVG內聯，滑鼠懸停高亮節點，導出後直接放入文檔
· 幻燈片**：幾個
· 研究報告**：左邊可摺疊目錄，右邊正文內嵌圖表，帶時間軸嘅里程碑視圖
· 定製化編輯器**：你想調整某個參數？AI俾你生成一個微型網頁，撳掣就可以實時預覽
Simon Willison（就係嗰個Django之父、GitHub大神）讀完即刻出post：
"我由GPT-4時代就默認用Markdown，因為嗰時token上限得8192個，HTML太貴啦。而家context window大咗咁多，呢個邏輯早就應該改啦。"
然後佢身體力行——用GPT-5.5試咗一次，叫佢解釋一個Linux安全漏洞嘅exp，直接輸出HTML，效果好到佢專登寫咗篇文章記錄。
02 點解HTML比Markdown更好用
你可能會話：Markdown幾好呀，我用咗咁多年。
冇錯。但問題係——Markdown係俾人類寫俾人類睇嘅，HTML係俾瀏覽器渲染俾人類睇嘅。
呢兩件事睇落差唔多，實際差咗一個量級。
Markdown做到嘅：
· 粗體、斜體、標題
· 代碼塊（帶語法高亮）
· 列表、表格
· 連結、圖片
HTML做到嘅：
· 以上全部加
· SVG內聯圖、流程圖、架構圖
· 可摺疊章節、Tab切換
· 實時搜尋/過濾
· 下拉菜單、按鈕、表單
· 帶交互嘅數據可視化
· 一鍵導出到其他工具
講白咗：Markdown係「文字加粗」，HTML係「直接俾你一個工具」.
Thariq嘅prompt樣本入面有一個特別典型嘅場景：
"Review呢個PR，重點關注流控邏輯。用HTML渲染diff，喺右邊margin標註評論，顏色區分嚴重程度，再加埋必要嘅圖示說明。"
換成Markdown你點表達？截圖？文字描述？代碼塊入面套emoji區分？
呢啲就係差距。
03 點樣用？就係改個prompt
重點嚟喇：唔需要裝任何插件，唔需要配置咩參數。
你只需要喺prompt入面加一句話：
請用HTML格式輸出，直接生成一個.html檔案。
或者更具體啲：
將呢個架構圖用HTML輸出，帶SVG，內嵌樣式，瀏覽器打開就可以睇到。
如果你用嘅係Claude Code嘅 -p 管道模式，命令係咁樣：
cat mydata.json | claude -p "用Markdown總結呢份JSON嘅關鍵數據" cat mydata.json | claude -p "分析呢個JSON，輸出為HTML頁面，帶可視化圖表同交互"
生成嘅HTML會直接輸出喺終端——你複製到本地保存做 .html 檔案，瀏覽器打開就得。
一個細節： 預設情況下Claude會將HTML當作普通文字輸出，你可能需要加一句「只輸出純HTML代碼，唔需要markdown代碼塊標記」，防止佢俾你套多一層 `html 包裹。
04 效果對比：同樣嘅內容，Markdown vs HTML差幾多？
我用代碼審查呢個場景舉個例子——呢個場景最能說明差距。
Markdown版本嘅PR描述：
## 修改內容 - 優化咗 `stream_handler.py` 嘅流控邏輯 - 新增 `backpressure` 參數，預設係1024 - 修復咗併發場景下記憶體泄漏問題 ## 問題 1. 某啲邊界條件處理唔夠嚴謹 2. 錯誤信息唔夠清晰
HTML版本嘅PR描述：
· 檔案變更一目瞭然，綠色/紅色diff直接內嵌
· 每個問題旁邊有severity標籤（Critical/Warning/Info）
· 點擊問題可以展開詳細說明同修復建議
· 頂部有目錄導航，想睇邊個檔案點邊個
· 底部有總結卡片：今次改咗3個檔案，新增2個函數，刪除1個
兩個版本信息量一樣，但可讀性同操作性差咗至少三個檔次。
Simon Willison試完之後俾咗個好到位的評價：
"Markdown嘅信息係平嘅，HTML嘅信息係有結構嘅。"
讀一篇Markdown，你係做閲讀理解。讀一個HTML，你係做查閲。
對於工作場景，查閲效率高咗唔止一倍。
05 點解呢個技巧而家先俾人發現？
呢個問題好有趣。
HTML輸出質量更好，呢件事程式設計師圈子入面其實一路都知道——畢竟HTML本身就係web嘅語言，邊個唔熟悉？
但點解之前冇人認真推廣？
原因一：token成本
GPT-3/4時代，context window細，HTML因為標籤冗長，token消耗係Markdown嘅2-3倍。喺token限量嘅情況下，冇人願意「浪費」喺格式上面。
原因二：渲染預期
之前AI輸出HTML，大家默認係「網頁開發」場景——需要完整嘅CSS、響應式佈局、各種JS交互。AI生成嘅代碼往往有bug，渲染效果不如預期。
原因三：使用場景未到
Markdown夠用嘅時候，冇人想搞HTML。
但而家，三個障礙全部消失咗。
context window早就突破十萬token啦；HTML輸出唔需要完美——代碼審查報告、信息圖、流程圖，呢啲場景對渲染容錯率好高；Claude Code呢類工具將AI編碼帶入咗日常工作流，你本來就喺terminal入面，生成HTML成本極低。
Thariq嘅文章發佈時間係2026年5月初——呢個唔係巧合，係時間到咗。
06 呢個技巧嘅真正價值：將AI變成你嘅工具生成器
講到底，HTML輸出呢個玩法嘅本質，唔係「令AI輸出更好睇嘅格式」.
佢嘅本質係：令AI由「回答問題」，升級到「構建工具」.
一篇Markdown係一份答案。
一個HTML頁面係一個可交互嘅工具。
代碼審查 → HTML diff工具
學習新框架 → HTML文檔站
研究競品 → HTML對比報告
做架構設計 → HTML流程圖+交互原型
你令AI生成嘅唔係一個「文檔」，而係一個你接下來可以直接用嘅嘢。
Thariq喺博客入面提到一個細節，佢話自己已經開始喺prompt入面默認加上呢句話：
When relevant, prefer HTML output over Markdown.
就係呢一句。從今以後，Claude Code嘅默認行為就變咗。
07 呢個玩法適合你嗎？
講真話：如果你每日用Claude Code處理嘅係純文字任務——寫文案、聊天、翻譯——呢個技巧對你嘅價值不大。
Markdown對呢啲場景完全夠用，加上HTML反而增加你嘅複製成本。
但如果你係開發者，或者你嘅工作涉及：
· 代碼審查
· 架構設計
· 技術文檔
· 流程梳理
· 數據分析報告
咁呢個技巧值得你而家就去試一次。
試完你會發現：同樣嘅AI，同樣嘅問題，唔一樣嘅輸出格式，體驗差距好似兩個產品。
歡迎喺評論區傾下你嘅想法~
如果呢篇文章令你有收穫，唔好唔記得讚好、分享、推薦～
亦都歡迎關注我嘅公眾號，每日有AI最新資訊分享🦐
【導讀】 Anthropic工程師寫了篇長文，勸開發者放棄Markdown，改用HTML輸出——理由說出來你可能不信：HTML現在反而更划算，而且效果遠超你的想象。
用 Claude Code 寫代碼，你一定習慣了這樣的流程：
丟給它一個問題 → 它輸出 Markdown → 你複製粘貼到文檔/筆記/聊天窗口 → 完事。
這個流程沒問題。但它有個隱藏的天花板——Markdown 能表達的東西，上限太低了。
SVG 圖？做不了。
交互組件？做不了。
可摺疊導航？做不了。
帶樣式的信息圖？Markdown 硬要渲染，最多給你加個代碼高亮。
01 這個玩法，是 Anthropic 工程師先捅破的
說這話的人叫 Thariq Shihipar，Anthropic Claude Code 團隊的工程師。
前幾天他在個人博客發了篇長文，標題就叫 The Unreasonable Effectiveness of HTML。核心觀點一句話：
讓 AI 直接輸出 HTML，而不是 Markdown，效果會好到讓你想把之前的筆記全刪了重做。
他建了個配套網站 thariqs.github.io/html-effectiveness，收錄了 20 個 AI 生成 HTML 的 demo——全都是讓 AI 直接輸出一個 .html 文件，瀏覽器打開就能用。
這些 demo 覆蓋的場景，Markdown 根本玩不轉：
· 代碼審查**：帶顏色標註的 diff，hover 顯示上下文，可摺疊的問題分級
· 流程圖**：SVG 內聯，鼠標懸停高亮節點，導出後直接丟進文檔
· 幻燈片**：幾個
· 研究報告**：左側可摺疊目錄，右側正文內嵌圖表，帶時間軸的里程碑視圖
· 定製化編輯器**：你想調整某個參數？AI 給你生成一個微型網頁，點按鈕就能實時預覽
Simon Willison（就是那個 Django 之父、GitHub 大神）讀完立刻發推：
"我自 GPT-4 時代就默認用 Markdown，因為那時候 token 上限只有 8192 個，HTML 太貴了。現在 context window 大了這麼多，這個邏輯早該翻篇了。"
然後他身體力行——用 GPT-5.5 試了一把，讓它解釋一個 Linux 安全漏洞的 exp，直接輸出 HTML，效果好得他專門寫了篇文章記錄。
02 為什麼 HTML 比 Markdown 更好用
你可能會說：Markdown 挺好的啊，我用了這麼多年。
沒錯。但問題是——Markdown 是給人類寫給人類看的，HTML 是給瀏覽器渲染給人類看的。
這兩件事看起來差不多，實際差了一個量級。
Markdown 能做的：
· 粗體、斜體、標題
· 代碼塊（帶語法高亮）
· 列表、表格
· 連結、圖片
HTML 能做的：
· 以上全部 +
· SVG 內聯圖、流程圖、架構圖
· 可摺疊章節、Tab 切換
· 實時搜索/過濾
· 下拉菜單、按鈕、表單
· 帶交互的數據可視化
· 一鍵導出到其他工具
說白了：Markdown 是「文本加粗」，HTML 是「直接給你一個工具」。
Thariq 的 prompt 樣本里有一個特別典型的場景：
"Review 這個 PR，重點關注流控邏輯。用 HTML 渲染 diff，在右側 margin 標註評論，顏色區分嚴重程度，再加上必要的圖示說明。"
換成 Markdown 你怎麼表達？截圖？文字描述？代碼塊裏套 emoji 區分？
這就是差距。
03 怎麼用？就是改個 prompt
重點來了：不需要裝任何插件，不需要配置什麼參數。
你只需要在 prompt 里加一句話：
請用 HTML 格式輸出，直接生成一個 .html 文件。
或者更具體一點：
把這個架構圖用 HTML 輸出，帶 SVG，內嵌樣式，瀏覽器打開即可查看。
如果你用的是 Claude Code 的 -p 管道模式，命令是這樣的：
cat mydata.json | claude -p "用 Markdown 總結這份 JSON 的關鍵數據" cat mydata.json | claude -p "分析這個 JSON，輸出為 HTML 頁面，帶可視化圖表和交互"
生成的 HTML 會直接輸出在終端——你複製到本地保存成 .html 文件，瀏覽器打開就行。
一個細節： 默認情況下 Claude 會把 HTML 當作普通文本輸出，你可能需要加一句「只輸出純 HTML 代碼，不需要 markdown 代碼塊標記」，防止它給你套一層 `html 包裹。
04 效果對比：同樣的內容，Markdown vs HTML 差多少？
我拿代碼審查這個場景舉個例子——這個場景最能說明差距。
Markdown 版本的 PR 描述：
## 修改內容 - 優化了 `stream_handler.py` 的流控邏輯 - 新增 `backpressure` 參數，默認為 1024 - 修復了併發場景下內存泄漏問題 ## 問題 1. 某些邊界條件處理不夠嚴謹 2. 錯誤信息不夠清晰
HTML 版本的 PR 描述：
· 文件變更一目瞭然，綠色/紅色 diff 直接內嵌
· 每個問題旁邊有 severity 標籤（Critical/Warning/Info）
· 點擊問題可展開詳細說明和修復建議
· 頂部有目錄導航，想看哪個文件點哪個
· 底部有總結卡片：這次改了 3 個文件，新增 2 個函數，刪除 1 個
兩個版本信息量一樣，但可讀性和操作性差了至少三個檔次。
Simon Willison 試完之後給了個很到位的評價：
"Markdown 的信息是平的，HTML 的信息是有結構的。"
讀一篇 Markdown，你在做閲讀理解。讀一個 HTML，你在做查閲。
對於工作場景，查閲效率高了不止一倍。
05 為什麼這個技巧現在才被發現？
這個問題有意思。
HTML 輸出質量更好，這件事程序員圈子裏其實一直知道——畢竟 HTML 本身就是 web 的語言，誰不熟悉？
但為什麼之前沒有人認真推廣？
原因一：token 成本
GPT-3/4 時代，context window 小，HTML 因為標籤冗長，token 消耗是 Markdown 的 2-3 倍。在 token 限量的情況下，沒人願意「浪費」在格式上。
原因二：渲染預期
之前 AI 輸出 HTML，大家默認是「網頁開發」場景——需要完整的 CSS、響應式佈局、各種 JS 交互。AI 生成的代碼往往有 bug，渲染效果不如預期。
原因三：使用場景沒到
Markdown 夠用的時候，沒人想去折騰 HTML。
但現在，三個障礙全消失了。
context window 早就突破十萬 token 了；HTML 輸出不需要完美——代碼審查報告、信息圖、流程圖，這些場景對渲染容錯率很高；Claude Code 這類工具把 AI 編碼帶進了日常工作流，你本來就在 terminal 裏，生成 HTML 成本極低。
Thariq 的文章發佈時間是 2026 年 5 月初——這不是巧合，是時間到了。
06 這個技巧的真正價值：把 AI 變成你的工具生成器
說到底，HTML 輸出這個玩法的本質，不是「讓 AI 輸出更好看的格式」。
它的本質是：讓 AI 從「回答問題」，升級到「構建工具」。
一篇 Markdown 是一份答案。
一個 HTML 頁面是一個可交互的工具。
代碼審查 → HTML diff 工具
學習新框架 → HTML 文檔站
研究競品 → HTML 對比報告
做架構設計 → HTML 流程圖+交互原型
你讓 AI 生成的不是一個「文檔」，而是一個你接下來可以直接用的東西。
Thariq 在博客裏提到了一個細節，他說自己已經開始在 prompt 裏默認加上這句話：
When relevant, prefer HTML output over Markdown.
就這一句。從今往後，Claude Code 的默認行為就變了。
07 這個玩法適合你嗎？
說實話：如果你每天用 Claude Code 處理的是純文本任務——寫文案、聊天、翻譯——這個技巧對你的價值不大。
Markdown 對這些場景完全夠用，加上 HTML 反而增加你的複製成本。
但如果你是開發者，或者你的工作涉及：
· 代碼審查
· 架構設計
· 技術文檔
· 流程梳理
· 數據分析報告
那這個技巧值得你現在就去試一次。
試完你會發現：同樣的 AI，同樣的問題，不一樣的輸出格式，體驗差距像是兩個產品。
歡迎在評論區聊聊你的想法~
如果這篇文章讓你有收穫，別忘了點贊、分享、推薦～
也歡迎關注我的公眾號，每天有AI最新資訊分享🦐