Claude Code別再輸出Markdown了——9 類HTML玩法（附Prompt模板）
整理版優先睇
Claude Code輸出HTML比Markdown更強大，9類玩法配合Prompt模板提升協作效率
呢篇文章嚟自Thariq Shihipar——Anthropic Claude Code團隊嘅工程主管，佢喺X上發咗條長推文，講用Claude Code輸出HTML嘅極高效益，配套仲有20個demo嘅示例站。作者一開始都懷疑：「Markdown用得好地地，點解要轉？」但睇曬啲示例之後，佢服咗：呢個唔係審美問題，而係工程問題。隨住Claude Code嘅上下文窗口擴大到1M，Markdown嘅信息密度、可讀性同交互能力已經追唔上Agent時代嘅需求。文章嘅結論好清楚：對於「俾人睇但唔改」嘅場景——PR說明、實現計劃、覆盤報告、技術分享——HTML係更優解，可以令讀者願意睇嘅概率明顯提高，直接提升協作密度。
作者拆咗9類即時用得着嘅玩法，每類都配咗可直接複製嘅Prompt模板。重點包括：探索與規劃、Code Review、設計系統、原型製作、SVG插圖、研究學習、報告、幻燈片、一次性自定義編輯器。Thariq嘅示例站仲展示咗每類嘅具體demo，例如用HTML做帶標籤頁嘅長文檔、可拖拽嘅泳道圖、帶參數滑塊嘅動效sandbox。另外，作者強調咗5條單文件守則：所有CSS/JS內聯、圖片Base64、系統字體、零網絡請求，確保HTML十年後打開都仲睇到。
最後，文章提醒咗唔好無腦套用HTML：README、Slack片段、RAG文檔、Git blame檔案、自己嘅備忘錄、郵件簡訊等場景，繼續用Markdown。一條簡單判斷標準…
- Markdown喺Agent時代有天花板：信息密度低、超過100行冇人睇、冇交互、分享麻煩；HTML可以加標籤頁、摺疊區、滑塊、導出按鈕，大幅提升閲讀體驗。
- 核心範式改變：唔係叫Claude Code「寫代碼」，而係叫佢做「一次性工具」——帶交互嘅報告、用完即棄嘅編輯器、可拖拽嘅看板，輸出格式直接決定協作密度。
- 9類玩法涵蓋日常工程場景：探索規劃（並排對比方案）、Code Review（帶標註diff）、設計系統（可複製色板）、原型（動效sandbox）、SVG插圖、研究學習（帶TL;DR同摺疊）、報告（週報覆盤）、幻燈片、自定義編輯器。
- 5條單文件守則確保長期可用：CSS/JS內聯、Base64圖片、系統字體、零網絡請求，令HTML好似PDF咁自洽，十年後打開都冇問題。
- 適用場景有明確邊界：HTML適合「俾人睇但唔改」；Markdown適合「自己改或機器讀」；README、Slack、RAG、Git blame、郵件簡訊等繼續用Markdown。
配套示例站（20個demo）
Thariq Shihipar製作嘅HTML有效性示例站，展示9類玩法嘅具體實現
方案橫向對比 Prompt
生成6種明顯不同嘅方案，以HTML網格排列，並排對比，每個標註取捨。
PR帶標註Review Prompt
將PR渲染成HTML文件，顯示真實diff、邊欄批註、按嚴重程度上色，重點分析唔熟悉嘅部分。
代碼解釋 Prompt
生成HTML解釋頁，包含TL;DR、流程圖、關鍵代碼加行內註解、踩坑提醒，按「一次性讀懂」標準優化。
內容片段
幫我 review 這個 PR，做成一個 HTML 文件來描述它。我對 streaming / backpressure 那塊邏輯不熟，重點分析那裏。渲染真實的 diff，加上邊欄批註，按嚴重程度對發現的問題配色，其他能幫我快速理解的東西也都加上。Markdown嘅隱藏天花板：Agent時代唔夠用
Markdown當年贏係因為簡單、好讀、Token便宜，但Claude Code已經喺1M上下文裏面跑
Thariq總結咗5+1個理由：信息密度——HTML一個文件可以裝表格、SVG、CSS、JS、圖片、交互，Markdown只能裝基本元素。100行就係Markdown嘅邊界，超過咗冇人會讀完；HTML可以加標籤頁、摺疊區，長文檔依然好逛。
- 分享方便：一個HTML文件丟上CDN發連結，比起.md文件對方要裝編輯器，明顯更多人會開
- 雙向交互：HTML可以嵌滑塊、按鈕、調參面板，甚至加「導出到Prompt」按鈕，Markdown做唔到
- 閲讀體驗差一個量級：排版好嘅HTML vs 一堆方括號星號下劃線嘅Markdown
9類立即用得着嘅HTML玩法（附Prompt模板）
探索與規劃：將幾條方案並排畫出嚟，比文字描述高效十倍
玩法1：探索與規劃。把4-6種方案用HTML網格並列展示，標註每個嘅技術取捨。玩法2：Code Review。渲染真實diff、邊欄批註、按嚴重程度上色，再畫模塊關係圖。玩法3：設計系統。將Token渲染成可點擊複製嘅色板，組件變體一字排開。
- 1 玩法4：原型。將動效或交互做成一次性HTML，帶duration/easing滑塊直接感受
- 2 玩法5：SVG插圖。用inline SVG畫博客配圖或部署流水線，每張帶「複製SVG」按鈕
- 3 玩法6：研究與學習。帶TL;DR、可摺疊章節、Tab切換代碼片段、懸停術語表，閲讀路徑經過設計
- 4 玩法7：報告。週報、事故覆盤用HTML模板，頂部關鍵指標小圖、彩色時間線、跟進清單
- 5 玩法8：幻燈片。單文件HTML deck，左右方向鍵翻頁，發連結就開會
- 6 玩法9：一次性自定義編輯器。針對特定任務做臨時編輯器，最後一鍵導出到Markdown/JSON，餵返畀Agent
玩法9最驚豔：拖拽泳道、Feature flag編輯器、Prompt調參器，用完就扔
每類玩法都配咗可以直接複製嘅Prompt模板，例如「生成6種明顯不同嘅方案，以HTML網格排列，並排對比，每個標註取捨」、「幫我review呢個PR，做成HTML文件，渲染真實diff，加邊欄批註，按嚴重程度配色」。
5條單文件守則：防止半年後爛掉
直接叫Claude輸出HTML可能會寫出依賴CDN、引外部字體、調遠程API嘅文件
社區用咗幾個月之後，收斂出一份好硬嘅規矩。寫一次html-rules.md放入CLAUDE.md就得：
- 1 CSS內聯或放<style>標籤，唔引外部樣式表、唔引CDN
- 2 JS全部內聯寫喺<script>，唔從unpkg/jsDelivr引包
- 3 圖片用Base64內嵌到src，或者直接inline SVG，唔引外鏈圖
- 4 字體只用系統字體（system-ui / sans-serif / monospace），唔引Google Fonts
- 5 運行時零網絡請求，文件斷網狀態下都要完整打開
幾時唔好用HTML（別無腦套用）
太多人睇完一篇好文章就all in，結果踩入新坑
下面呢啲場景繼續用Markdown：倉庫README、Slack/Discord代碼片段、要被其他LLM消費嘅文檔、要長期Git追蹤做blame嘅文件、寫畀自己睇嘅備忘錄、郵件簡訊/RSS。
總結：HTML輸出可能會成為Agent時代嘅默認新形態
體感上最大變化唔係「美觀」，而係別人願意睇嘅概率明顯高咗一截
以前發一個.md入group，大概率冇人點開；而家發一個HTML連結，團隊成員會真係掃一眼，然後回一句「第3節嗰個方案我傾向B」。輸出格式直接決定了協作密度。Thariq呢條推文嘅真正價值，係用Anthropic內部團隊嘅真實做法證明：用Claude Code唔只係叫佢「寫代碼」，而係叫佢做「一次性工具」。工具便宜到一次性能用，呢件事本身先係Agent真正改變咗啲乜。
資料來源：Thariq Shihipar（Anthropic Claude Code 工程主管）喺 X 上面發嘅長推《Using Claude Code: The Unreasonable Effectiveness of HTML》+ 配套示例站（文末有連結）
我最近俾一條喺 X 上面嘅長推文按在地上摩擦。
發嗰個人係 Thariq Shihipar，Anthropic Claude Code 團隊嘅工程主管——唔係外部佈道者，係幫 Claude Code 寫 code 嗰個人。佢嘅觀點一句講曬：
唔好再畀 Claude 輸出 Markdown 畀你喇，轉用 HTML，成個工作流程會上一個層次。
呢條推文喺 X 上面閲讀突破 400 萬、收藏過萬，HN 推到過千分。我一開始都覺得係譁眾取寵——Markdown 用得好地地，做乜要換？
將佢嘅 20 個示例 demo 全部點開睇咗一次之後，我服咗。呢樣嘢唔係審美問題，係工程問題：你用 Claude Code 做嘅嘢越複雜、合作嘅人越多，Markdown 就越頂唔順。
下面我將佢呢套範式拆開講清楚，包括：
點解 HTML 真係比 Markdown 更適合 Agent 輸出 9 類即刻用得嘅玩法（每類配一個可以複製嘅 Prompt 模板） 5 條單文件守則（防止生成嘅嘢半年後爛咗） 幾時唔好用 HTML（避免無腦照用）
1、Markdown 嘅隱藏天花板：點解 Agent 時代佢唔夠用喇
Markdown 當年可以贏，係因為佢簡單、易讀、Token 平。GPT-4 時代上下文窗口得 8K，每個 Token 都要慳住用，Markdown 係當時嘅最佳選擇。
但今日嘅 Claude Code 已經喺 1M 上下文裏面運行。佢可以一口氣讀完一個倉庫，從 git 歷史、MCP 伺服器（例如 Slack、Linear）、檔案系統、瀏覽器多個地方拼湊出上下文，最後掉畀你一份輸出。
問題係呢份輸出嘅天花板，俾 Markdown 卡死咗。
Thariq 總結咗 5+1 個理由，我用白話文翻譯畀你：
1）資訊密度：HTML 一個檔案可以放表格、SVG、CSS、JS、圖片、互動；Markdown 只可以放段落、列表、連結、程式碼區塊、簡陋表格。叫 Claude 用 Markdown "表示顏色"，佢只能用 Unicode 字符亂咁湊。
2） 100 行就係 Markdown 嘅極限：超過 100 行嘅 Markdown 檔案，冇人真係會讀完。包括 Thariq 自己。但 Claude Code 畀你嘅實行計劃成日都幾百行。HTML 可以加分頁、目錄、摺疊區域，長文件依然可以慢慢睇。
3） 分享方便：一個 .md ：檔案掟到羣組，對方仲要裝個編輯器或者轉一轉；HTML 檔案掉去 S3 或者公司 CDN，發連結就得，邊個點開都睇到。其他人願意點開嚟睇嘅機會率，比 Markdown 高幾倍。 4）雙向互動：HTML 唔單止係"輸出"，仲可以係"輸入"。加幾行 JS 就可以喺文件入面嵌入滑塊、按鈕、調參數面板，甚至加個"匯出當前狀態到 Prompt"嘅按鈕，跟住再餵返畀 Agent。Markdown 冇呢個能力。
5）睇起上嚟開心：一份排好版嘅 HTML 同一堆方括號星號底線嘅 Markdown，閲讀體驗差一個級別。
6）（加分項）配合 Agent 嘅輸入廣度：Claude Code 而家可以從 filesystem / MCP / 瀏覽器 / git 多個來源吸收上下文。呢啲異構資訊撈埋一齊，用 HTML 表達比 Markdown 幾乎永遠更有表現力。
講到呢度你可能仲係冇感覺。直接睇 9 類玩法你就明。
2、9 類即刻用得嘅 HTML 玩法（每類配 Prompt 模板）
Thariq 配咗一個示例站 thariqs.github.io/html-effectiveness，20 個 demo 全部係 Claude Code 真實生成嘅單檔案 HTML，分成 9 類。
我按"日常用得到"嘅優先級重新排咗次序。每一類後面畀一個可以直接複製貼上到 Claude Code 嘅 Prompt 模板。
玩法 1：探索與規劃（Exploration & Planning）
用場景：你仲未諗好方案，叫 Agent 將幾條路並排畫畀你睇，比叫佢寫三段文字描述高效十倍。
示例：三套程式碼方案嘅橫向對比表 / 四種 UI 視覺方向並列展示 / 完整嘅實行計劃（帶時間線 + 數據流圖 + 風險表）
Prompt 模板：
玩法 2：Code Review 與程式碼理解
用場景：叫 Claude 將 PR 渲染成帶標註嘅 diff，按嚴重程度上色，再畫個模塊關係圖。比喺 GitHub 上滾 diff 友好好多。
Thariq 本人話佢而家每個 PR 都附一份 HTML 說明檔案，畀 reviewer 做導覽。
示例：帶側欄標註嘅 PR 評審頁 / PR 作者寫畀 reviewer 嘅導覽頁 / 唔熟悉嘅模塊畫成盒子箭頭圖
Prompt 模板：
玩法 3：設計系統（Design System）
用場景：HTML 本身就係設計系統嘅最終交付物，叫 Claude 直接產出單檔案設計系統再合理不過。色板可以點擊複製，組件狀態一字排開。呢份檔案可以反餵畀下一次 Prompt 做樣式參考，保證多次生成嘅視覺一致性。
示例：從倉庫入面抽出 Token 渲染成可複製色板 / 一個組件嘅所有 size × state × intent 並排展示
Prompt 模板：
玩法 4：原型（Prototyping）
用場景：動效同互動冇辦法用語言描述，一定要摸一下先知道啱唔啱。叫 Agent 做個一次性嘅 throwaway 頁面（用完即棄）跑畀你睇，五秒鐘就可以判斷"係咪呢個味道"。
示例：單獨將動效抽出來，配 duration / easing 滑塊做 sandbox / 四個頁面串成一個可點擊 flow
Prompt 模板：
玩法 5：SVG 插圖與流程圖
用場景：將 inline SVG 當成"畫筆"用。叫 Claude 幫一篇博客畫幾張配圖，或者畫一張可點擊嘅部署流水線，比 Mermaid 靈活，比外部畫圖工具慳事。
示例：博客配圖整張表（每張可以單獨複製出來）/ 部署流水線流程圖（點每一步睇運行內容、耗時、失敗路徑）
Prompt 模板：
玩法 6：研究與學習
用場景：叫 Claude 解釋一個新概念時，叫佢幫你做一份帶 TL;DR、可摺疊章節、Tab 切換程式碼片段、懸停術語表嘅解釋頁。同直接睇一堆段落嘅體驗，差嘅係閲讀路徑有冇被設計過。
示例：解釋呢個倉庫嘅限流係點樣運作（帶請求路徑摺疊步驟 + 配置 tab + FAQ）/ 一致性哈希實時可視化（拖節點觀察 ring 變化）
Prompt 模板：
玩法 7：報告（Status / 覆盤）
用場景：週報、事故覆盤、季度回顧呢啲重複出現嘅文件，用 HTML 做一次模板，以後每週改數據就得。一張小圖 + 一段彩色時間線，可以從"睇兩眼就熄咗"變成"願意由頭睇到尾"。
示例：週報（含 ship / slip / 一張小圖）/ 事故覆盤（帶分鐘級時間線、日誌片段、跟進清單）
Prompt 模板：
玩法 8：幻燈片（Decks）
用場景：內部技術分享唔好再開 Keynote 喇，直接叫 Claude 將一個 Slack 長討論或者一份設計文件轉成單檔案 HTML 幻燈片，左右方向鍵翻頁，發連結就可以開會。
示例：左右鍵翻頁嘅 HTML deck，一個檔案搞掂，無 build 步驟
Prompt 模板：
玩法 9：一次性自定義編輯器（Custom Editing Interfaces）
呢一類係我睇完最驚喜嘅——叫 Claude 幫你做個一次性嘅小工具。
用場景：有啲嘢用文字框描述太攰，叫 Claude 直接做一個針對呢個任務嘅臨時編輯器，做完就掉。重點係最後一定要有一個"導出"按鈕，將你喺 UI 入面做嘅操作轉返做 Prompt 或者 Markdown，餵返畀 Agent 繼續做。咁樣你始終喺循環入面，但循環變得更緊湊。
示例：30 條 ticket 拖入 Now / Next / Later / Cut 四個泳道，最後一鍵導出成 Markdown / Feature flag 編輯器（帶依賴檢查、一鍵複製 diff）/ Prompt 調參器（左邊模板、右邊三組樣例實時渲染）
Prompt 模板：
3、5 條單檔案守則：防止你今日生成嘅嘢半年後爛咗
直接叫 Claude 輸出 HTML 畀你，好大機會會寫出依賴 CDN、引入外部字體、調用遠端 API 嘅嘢。今日用得，半年後 CDN 一斷、庫一升級，檔案就廢咗。
社區用咗幾個月之後，已經收斂出一份好硬嘅規矩，寫一次 html-rules.md 放進 CLAUDE.md 入面就得：
1）CSS 內聯或放在 <style> 標籤入面，唔引用外部樣式表、唔引用 CDN 2）JS 全部內聯寫在 <script> 入面，唔從 unpkg / jsDelivr 引用套件
3）圖片用 Base64 內嵌到 src，或者直接 inline SVG，唔引用外部圖片 4）字型只用系統字型（system-ui / sans-serif / monospace），唔引用 Google Fonts
5）運行時零網絡請求，檔案斷網狀態下都要可以完整打開
呢五條講穿咗，就一句話：令 HTML 好似 PDF 咁自洽。十年後你打開仲可以睇，就靠呢樣嘢。
4、三個可以今日就試嘅 Prompt（開箱即用）
懶得自己諗 Prompt 嘅話，直接抄呢三個。全部都係從 Thariq 嘅示例入面改寫過嚟、最容易出效果嘅：
1） 叫 Claude 幫方案做橫向對比：
2） 叫 Claude 幫 PR 做帶標註嘅 Review：
3） 叫 Claude 解釋程式碼：
5、幾時不要用 HTML（唔好無腦照用）
將呢一節放喺最後，係因為太多人睇完一篇好文章就 all in，結果踩咗入新坑。
下面呢啲場景，繼續用 Markdown：
倉庫 README：GitHub / GitLab 原生渲染 Markdown，搜索索引只認 MD，團隊亦方便人人編輯 Slack / Discord 入面嘅程式碼片段：Markdown 嘅程式碼柵格係通用嘅，HTML 貼入去就係一堆原始碼 要被其他 LLM 消費嘅文件：模型對 Markdown 嘅訓練數據多好多，RAG 工具對 Markdown 嘅分段亦更準 要長期 Git 追蹤、做 blame 嘅檔案：HTML diff 又亂又長，根本冇辦法 review 寫畀自己睇嘅備忘錄：你要嘅係快速記低，冇必要為咗排版多用十分鐘 郵件簡訊 / RSS：郵件客戶端對內聯 CSS 嘅支持參差不齊，渲染成日出問題
一條簡單嘅判斷標準：
HTML 俾"其他人讀但唔改"嘅場景，Markdown 俾"自己改或者機器讀"嘅場景。
6、我嘅判斷：HTML 輸出可能會成為 Agent 時代嘅默認新形態
寫 README 我都會繼續用 Markdown。但任何一份要畀其他人睇嘅工程產出——PR 說明、實行計劃、覆盤報告、技術分享、設計探索——我已經全部轉咗叫 Claude Code 出 HTML 喇。
體感上最大嘅變化同"美觀"冇關係，係其他人願意睇嘅機會率明顯高咗一截。
以前發一個 .md 到羣組，好大機會冇人點開；而家發一個 HTML 連結，團隊成員會真係睇一眼，然後回我一句"第 3 節嗰個方案我傾向 B"。輸出格式直接決定咗協作密度。
Thariq 呢條推文嘅真正價值，係佢用 Anthropic 內部團隊嘅真實做法證明：用 Claude Code 唔單止係叫佢"寫程式碼"，而係叫佢做"一次性工具"——一份帶互動嘅報告、一個用完即棄嘅編輯器、一份可以拖來拖去嘅看板。
工具平到一次性可以用咗，呢件事本身先係 Agent 真正改變咗啲乜。
參考連結
原文（X 長推）：Thariq Shihipar - Using Claude Code: The Unreasonable Effectiveness of HTML 配套示例站（20 個 demo）：https://thariqs.github.io/html-effectiveness/ Simon Willison 的轉述與評論：simonwillison.net/2026/May/8/unreasonable-effectiveness-of-html/ 作者博客：thariq.io
資料來源：Thariq Shihipar（Anthropic Claude Code 工程主管）發佈在 X 上的長推《Using Claude Code: The Unreasonable Effectiveness of HTML》+ 配套示例站（文末附連結）
我最近被一條 X 上的長推文按在地上摩擦。
發的人是 Thariq Shihipar，Anthropic Claude Code 團隊的工程主管——不是外部佈道者，是給 Claude Code 寫代碼的那個人。他的觀點一句話講完：
別再讓 Claude 給你輸出 Markdown 了，換成 HTML，整個工作流會上一個台階。
這條推文在 X 上閲讀破4百萬、收藏過萬，HN 頂到一千多分。我一開始也覺得是譁眾取寵——Markdown 用得好好的，憑什麼換？
把他的 20 個示例 demo 全點開看了一遍之後，我服了。這玩意兒不是審美問題，是工程問題：你用 Claude Code 乾的活越複雜、協作的人越多，Markdown 越是兜不住。
下面我把他這套範式拆開講清楚，包括：
為什麼 HTML 真的比 Markdown 更適合 Agent 輸出 9 類立即能用的玩法（每類配一個可複製的 Prompt 模板） 5 條單文件守則（防止生成的東西半年後爛掉） 什麼時候不要用 HTML（避免無腦套用）
1、Markdown 的隱藏天花板：為什麼 Agent 時代它不夠用了
Markdown 當年能贏，是因為它簡單、好讀、Token 便宜。GPT-4 時代上下文窗口只有 8K，每一個 Token 都得摳着用，Markdown 是當時的最優解。
但今天的 Claude Code 已經在 1M 上下文裏跑。它能一口氣讀完一個倉庫，從 git 歷史、MCP 服務器（比如 Slack、Linear）、文件系統、瀏覽器多個地方拼出上下文，最後甩給你一份輸出。
問題是這份輸出的天花板，被 Markdown 卡死了。
Thariq 總結了 5+1 個理由，我用大白話翻譯給你：
1）信息密度：HTML 一個文件能裝表格、SVG、CSS、JS、圖片、交互；Markdown 只能裝段落、列表、連結、代碼塊、簡陋表格。讓 Claude 用 Markdown "表示顏色"，它只能用 Unicode 字符瞎湊。
2） 100 行就是 Markdown 的邊界：超過 100 行的 Markdown 文件，沒人真的會讀完。包括 Thariq 自己。但 Claude Code 給你的實現計劃動不動就幾百行。HTML 可以加標籤頁、目錄、摺疊區，長文檔依然能逛。
3） 分享方便：一個 .md 文件甩到羣裏，對方還得裝個編輯器或者轉一下；HTML 文件丟到 S3 或者公司 CDN，發連結就行，誰點開都能看。別人願意點開看的概率，比 Markdown 高几倍。 4）雙向交互：HTML 不只是"輸出"，還能是"輸入"。加幾行 JS 就能在文檔裏嵌滑塊、按鈕、調參面板，甚至加個"導出當前狀態到 Prompt"的按鈕，回頭接着餵給 Agent。Markdown 沒這能力。
5）讀起來開心：一份排版好的 HTML 和一坨方括號星號下劃線的 Markdown，閲讀體驗差一個量級。
6）（加分項）適配 Agent 的輸入廣度：Claude Code 現在能從 filesystem / MCP / 瀏覽器 / git 多個源吸收上下文。這些異構信息揉在一起，用 HTML 表達比 Markdown 幾乎總是更有表現力。
講到這裏你可能還是無感。直接看 9 類玩法你就懂了。
2、9 類立即能用的 HTML 玩法（每類配 Prompt 模板）
Thariq 配了一個示例站 thariqs.github.io/html-effectiveness，20 個 demo 全部是 Claude Code 真實生成的單文件 HTML，分成 9 類。
我按"日常用得到"的優先級重新排了序。每一類後面給一個可以直接複製粘貼到 Claude Code 的 Prompt 模板。
玩法 1：探索與規劃（Exploration & Planning）
用場景：你還沒想好方案，讓 Agent 把幾條路並排畫給你看，比讓它寫三段文字描述高效十倍。
示例：三套代碼方案的橫向對比表 / 四種 UI 視覺方向並列展示 / 完整的實現計劃（帶時間線 + 數據流圖 + 風險表）
Prompt 模板：
玩法 2：Code Review 與代碼理解
用場景：讓 Claude 把 PR 渲染成帶標註的 diff，按嚴重程度上色，再畫個模塊關係圖。比在 GitHub 上滾 diff 友好太多。
Thariq 本人說他現在每個 PR 都附一份 HTML 說明文件，給 reviewer 當導覽。
示例：帶邊欄標註的 PR 評審頁 / PR 作者寫給 reviewer 的導覽頁 / 不熟悉的模塊畫成盒子箭頭圖
Prompt 模板：
玩法 3：設計系統（Design System）
用場景：HTML 本來就是設計系統的最終交付物，讓 Claude 直接吐成單文件設計系統再合理不過。色板可以點擊複製，組件狀態一字排開。這份文件可以反餵給下一次 Prompt 當樣式參考，保證多次生成的視覺一致性。
示例：從倉庫裏抽出 Token 渲染成可複製色板 / 一個組件的所有 size × state × intent 並排展示
Prompt 模板：
玩法 4：原型（Prototyping）
用場景：動效和交互沒法用語言描述，必須摸一下才知道對不對。讓 Agent 做個一次性的 throwaway 頁面（用完即扔）跑給你看，五秒鐘就能判斷"是不是這個味"。
示例：單獨把動效拎出來，配 duration / easing 滑塊當 sandbox / 四個頁面串成一個可點擊 flow
Prompt 模板：
玩法 5：SVG 插圖與流程圖
用場景：把 inline SVG 當成"畫筆"用。讓 Claude 給一篇博客畫幾張配圖，或者畫一張可點擊的部署流水線，比 Mermaid 靈活，比外部畫圖工具省事。
示例：博客配圖整張表（每張可單獨複製出來）/ 部署流水線流程圖（點每一步看運行內容、耗時、失敗路徑）
Prompt 模板：
玩法 6：研究與學習
用場景：讓 Claude 解釋一個新概念時，讓它給你做一份帶 TL;DR、可摺疊章節、Tab 切換代碼片段、懸停術語表的解釋頁。和直接看一坨段落的體驗，差的是閲讀路徑有沒有被設計過。
示例：解釋這個倉庫的限流是怎麼工作的（帶請求路徑摺疊步驟 + 配置 tab + FAQ）/ 一致性哈希實時可視化（拖節點觀察 ring 變化）
Prompt 模板：
玩法 7：報告（Status / 覆盤）
用場景：週報、事故覆盤、季度回顧這種重複出現的文檔，用 HTML 做一次模板，以後每週改數據就行。一張小圖 + 一段彩色時間線，能從"掃兩眼就關了"變成"願意從頭看完"。
示例：週報（含 ship / slip / 一張小圖）/ 事故覆盤（帶分鐘級時間線、日誌片段、跟進清單）
Prompt 模板：
玩法 8：幻燈片（Decks）
用場景：內部技術分享別再開 Keynote 了，直接讓 Claude 把一個 Slack 長討論或一份設計文檔轉成單文件 HTML 幻燈片，左右方向鍵翻頁，發連結就能開會。
示例：左右鍵翻頁的 HTML deck，一個文件搞定，無 build 步驟
Prompt 模板：
玩法 9：一次性自定義編輯器（Custom Editing Interfaces）
這一類是我看完最驚豔的——讓 Claude 給你做個一次性的小工具。
用場景：有些事情用文本框描述太累，讓 Claude 直接做一個針對這個任務的臨時編輯器，幹完就扔。重點是最後必須有一個"導出"按鈕，把你在 UI 裏做的操作轉回 Prompt 或 Markdown，喂回 Agent 繼續幹。這樣你始終在循環裏，但循環變緊了。
示例：30 條 ticket 拖進 Now / Next / Later / Cut 四個泳道，最後一鍵導成 Markdown / Feature flag 編輯器（帶依賴檢查、一鍵複製 diff）/ Prompt 調參器（左邊模板、右邊三組樣例實時渲染）
Prompt 模板：
3、5 條單文件守則：防止你今天生成的東西半年後爛掉
直接讓 Claude 給你輸出 HTML，大概率會寫出依賴 CDN、引外部字體、調遠程 API 的東西。今天能用，半年後 CDN 一斷、庫一升級，文件就廢了。
社區在用了幾個月之後，已經收斂出一份很硬的規矩，寫一次 html-rules.md 放進 CLAUDE.md 裏就行：
1）CSS 內聯或放在 <style> 標籤裏，不引外部樣式表、不引 CDN 2）JS 全部內聯寫在 <script> 裏，不從 unpkg / jsDelivr 引包
3）圖片用 Base64 內嵌到 src，或者直接 inline SVG，不引外鏈圖 4）字體只用系統字體（system-ui / sans-serif / monospace），不引 Google Fonts
5）運行時零網絡請求，文件斷網狀態下也要能完整打開
這五條說穿了，就一句話：讓 HTML 像 PDF 一樣自洽。十年後你打開還能看，就靠這個。
4、三個可以今天就試的 Prompt（開箱即用）
懶得自己想 Prompt 的話，直接抄這三個。都是從 Thariq 的示例裏改寫過來的、最容易出效果的：
1） 讓 Claude 給方案做橫向對比：
2） 讓 Claude 給 PR 做帶標註的 Review：
3） 讓 Claude 解釋代碼：
5、什麼時候不要用 HTML（別無腦套用）
把這一節放在最後，是因為太多人看完一篇好文章就 all in，結果踩進新坑。
下面這些場景，繼續用 Markdown：
倉庫 README：GitHub / GitLab 原生渲染 Markdown，搜索索引只認 MD，團隊也方便人人編輯 Slack / Discord 裏的代碼片段：Markdown 的代碼柵格是通用的，HTML 貼進去就是一坨原碼 要被其他 LLM 消費的文檔：模型對 Markdown 的訓練數據多得多，RAG 工具對 Markdown 的分段也更準 要長期 Git 跟蹤、做 blame 的文件：HTML diff 又髒又長，根本沒法 review 寫給自己看的備忘錄：你要的是快速記下來，沒必要為了排版多花十分鐘 郵件簡訊 / RSS：郵件客戶端對內聯 CSS 的支持參差不齊，渲染常常翻車
一條簡單的判斷標準：
HTML 給"別人讀但不改"的場景，Markdown 給"自己改或機器讀"的場景。
6、我的判斷：HTML 輸出可能會成為 Agent 時代的默認新形態
寫 README 我還會繼續用 Markdown。但任何一份要給別人看的工程產出——PR 說明、實現計劃、覆盤報告、技術分享、設計探索——我已經全部換成讓 Claude Code 出 HTML 了。
體感上最大的變化跟"美觀"沒關係，是別人願意看的概率明顯高了一截。
以前發一個 .md 到羣裏，大概率沒人點開；現在發一個 HTML 連結，團隊成員會真的掃一眼，然後回我一句"第 3 節那個方案我傾向 B"。輸出格式直接決定了協作密度。
Thariq 這條推文的真正價值，是他用 Anthropic 內部團隊的真實做法證明：用 Claude Code 不只是讓它"寫代碼"，而是讓它做"一次性工具"——一份帶交互的報告、一個用完即棄的編輯器、一份能拖來拖去的看板。
工具便宜到一次性能用了，這件事本身才是 Agent 真正改變了什麼。
參考連結
原文（X 長推）：Thariq Shihipar - Using Claude Code: The Unreasonable Effectiveness of HTML 配套示例站（20 個 demo）：https://thariqs.github.io/html-effectiveness/ Simon Willison 的轉述與評論：simonwillison.net/2026/May/8/unreasonable-effectiveness-of-html/ 作者博客：thariq.io