使用 Claude Code：HTML 難以置信的奇效【譯】

寶玉AI2026年5月9日

作者： Thariq

Markdown 已經成爲 AI 智能體 (AI Agent) 與我們溝通時最常用的文件格式。它簡單、便攜、具備一定的富文本 (Rich text) 能力，而且極其容易進行人工修改。你甚至會發現，Claude 已經變得極其擅長在 Markdown 文件裏用 ASCII (美國信息交換標準代碼，這裏指用純文本符號拼湊成圖表) 字符來畫圖了。

但是，隨着 AI 智能體變得越來越強大，我開始覺得 Markdown 變成了一種束縛。面對動輒上百行的 Markdown 文件，我根本沒有耐心讀下去。我想要更豐富的視覺展現、明亮的色彩和直觀的圖表，而且希望能夠輕鬆地把它們分享給團隊。

另外，我現在越來越少親自去編輯這些文件了。我更多是把它們當作需求文檔 (Specs)、參考資料或是頭腦風暴的輸出結果。即使需要修改，我通常也是直接寫提示詞 (Prompt) 讓 Claude 去改。這就讓 Markdown 最核心的優勢——易於人工編輯——蕩然無存。

因此，相比 Markdown，我開始更偏愛將 HTML 作爲輸出格式。我也發現 Claude Code 團隊的其他成員正越來越頻繁地使用 HTML。下面我想和大家聊聊背後的原因。

（如果你想先看些直觀的例子，可以點擊這裏查看大量示例：https://thariqs.github.io/html-effectiveness/ ，不過看完記得回來，聽我繼續講講爲什麼該這麼做。）

爲什麼選擇 HTML？

信息密度 (Information Density)

HTML 能比 Markdown 傳達豐富得多的信息。它當然能處理像標題和簡單排版這樣的基礎文檔結構，但它的威力遠不止於此，它還能完美呈現各種複雜信息，比如：

  • • 用表格 (Tables) 展示數據列
  • • 用 CSS (層疊樣式表，用於控制網頁的外觀和佈局) 展現設計細節
  • • 用 SVG (可縮放矢量圖形，一種基於代碼的清晰圖像格式) 繪製精美插圖
  • • 用 script 標籤嵌入代碼片段 (Code snippets)
  • • 結合 HTML 元素、JavaScript 和 CSS 來實現動態交互
  • • 結合 SVG 和 HTML 繪製清晰的工作流圖表 (Workflows)
  • • 用絕對定位和畫布 (Canvases) 展示空間分佈數據
  • • 用 image 標籤直接插入圖片

我甚至敢說：只要是 Claude 能讀懂的信息，幾乎沒有什麼是不能用 HTML 高效展現出來的。這種特性讓 HTML 成爲了一種極爲高效的載體，無論是模型向你傳遞深度的信息，還是你進行閱讀審查，都無比順暢。

我發現，如果無法使用 HTML，模型往往會在 Markdown 裏做一些極其低效的“騷操作”，比如硬用 ASCII 字符去畫圖表；或者——這也是我最哭笑不得的一種——像下面這張 Claude Code 截圖裏那樣，用 Unicode (統一碼) 字符來生硬地模擬顏色色塊。

視覺清晰度與易讀性 (Visual Clarity & Ease of Reading)

隨着 Claude 能夠處理越來越複雜的工作，它寫出的需求規格說明和實施計劃也變得越來越龐大。在實際工作中，我發現自己基本不會去讀超過 100 行的 Markdown 文件，更別提指望團隊裏的其他人去讀了。

但 HTML 文檔就好讀多了。Claude 可以通過選項卡 (Tabs)、插圖、鏈接等視覺元素，把文檔結構整理得井井有條，極其方便導航瀏覽。它甚至能做到移動端自適應，讓你在手機等不同尺寸的設備上都能獲得極佳的閱讀體驗。

易於分享 (Ease of Sharing)

分享 Markdown 文件其實挺讓人頭疼的，因爲大多數瀏覽器本身並不能很好地渲染它們。你通常只能把它們當作附件，硬塞進電子郵件或聊天消息裏發給別人。

但有了 HTML，只要你把文件上傳到雲端（比如傳到雲存儲服務 S3 上），你就可以輕鬆地把鏈接分享出去。你的同事可以隨時隨地用任何設備打開它，並輕鬆作爲參考。

如果你的需求文檔、分析報告或者代碼審查說明是用 HTML 寫的，別人真正去耐心閱讀它的概率絕對會大幅提升。

雙向交互 (Two-way Interaction)

HTML 允許你與文檔進行真實的互動。例如，你可以讓 Claude 在頁面上加幾個滑塊 (Sliders) 或旋鈕，用來直觀地調整設計效果；或者提供一些選項，讓你微調算法的參數，看看結果會發生什麼變化。你甚至可以要求它加個按鈕，讓你把微調後的完美參數“一鍵複製”爲提示詞，直接粘貼回 Claude Code 裏去。

想了解更多關於這種雙向交互的例子，可以去讀讀我之前關於“遊樂場 (Playgrounds)”的帖子：https://x.com/trq212/status/2017024445244924382

數據攝取與理解 (Data Ingestion)

爲什麼我們要用終端工具 Claude Code 來生成 HTML 文件，而不是直接用網頁版的 Claude AI 或者 Claude Design 呢？最大的原因之一，就在於 Claude Code 能夠攝取極其龐大的上下文 (Context) 信息。

拿寫這篇文章來說吧。我讓 Claude Code 自動遍歷我電腦裏的代碼文件夾，找出所有由它生成的 HTML 文件，對它們進行分組歸類，然後生成一個全新的 HTML 頁面，在裏面用圖表展示每一類文件的特徵。你在這篇文章裏看到的配圖，就是這個工作流的直接產物。

除了本地文件系統，Claude Code 還能通過你的 MCP (模型上下文協議，一種允許 AI 模型訪問外部工具和私有數據的標準) 接入其他極其豐富的上下文信息，比如 Slack (團隊通訊軟件) 聊天記錄、Linear (項目追蹤工具) 任務看板等。它還能結合瀏覽器、Git 版本控制歷史記錄等多種來源獲取背景知識。

充滿樂趣 (It’s Joyful)

用 Claude 製作 HTML 文檔本身就是一件極其好玩的事。它讓我感覺自己更深度地參與到了創造的過程中，光憑這份參與感，就足夠有吸引力了。

如何開始 (How to Get Started)

我其實有點擔心，大家讀完這篇文章後，會把它搞成一個專門的 /html 複雜技能指令或者類似的東西。雖然那樣做可能也有價值，但我特別想強調的是：你根本不需要做任何繁瑣的設置，就能讓 Claude 爲你生成 HTML。你只需要像平時聊天一樣，直接告訴它：“給我做一個 HTML 文件”或者“生成一個 HTML 製品 (Artifact)”就行了。

真正的訣竅在於，你要清楚自己希望這個製品能做什麼，以及你會如何使用它。也許隨着時間的推移，你會總結出一套自己的技能模板，但就目前而言，我強烈建議你直接從最簡單的提示詞開始，慢慢摸索它在不同場景下的奇妙用法。

使用場景 (Use Cases)

爲了讓大家有更直觀的感受，我已經爲各種不同的使用場景製作了許多 HTML 文件。你可以在這裏查看所有示例：https://thariqs.github.io/html-effectiveness/ ，下面是對一些核心場景的概覽。

需求、計劃與探索 (Specs, Planning & Exploration)

對 Claude 來說，HTML 是一塊可以深入探討問題的廣闊畫布。當接手一個新問題時，我不再指望它只給我丟出一個單薄的 Markdown 計劃，而是期望它能生成一張由多個 HTML 文件交織而成的思考網絡。

比如，我會先讓 Claude Code 進行頭腦風暴，探索幾種不同的實現方案；接着，我會讓它選中其中一個方案深入展開，可能還會讓它畫些界面草圖或者寫幾段核心代碼片段；最後，當我覺得方向對了，我纔會讓它寫出一份詳細的實施計劃。等我對計劃徹底滿意後，我會開啓一個新會話，把這些積累下來的 HTML 文件全部餵給它，讓它正式開始敲代碼。

在驗證環節，我也會讓負責檢查的 AI 智能體會話讀取這些 HTML 文件，這樣它就能擁有更宏偉的全局視角，清楚我們到底想要實現什麼。

提示詞示例：

  • • 我還沒想好新手引導頁面 (Onboarding screen) 要走什麼風格。請生成 6 種截然不同的方案——在佈局、語氣和信息密度上做出差異——並把它們放在同一個 HTML 文件的網格佈局裏，方便我並排對比。請在每個方案旁清晰標註它所做的取捨權衡。
  • • 請在一個 HTML 文件裏創建一份詳盡的實施計劃。記得畫一些視覺草圖，展示數據流向，並補充上我可能需要重點審查的代碼片段。排版要清晰，讓人容易消化理解。

適用場景：

  • • 探索一段代碼的其他實現方式
  • • 並行探索多種視覺設計方案

代碼審查與理解 (Code Review & Understanding)

在 Markdown 文件裏生啃代碼絕對是一件痛苦的事。但有了 HTML，我們就能優雅地渲染出代碼差異對比 (Diffs)、詳細的頁邊註釋 (Annotations)、流程圖 (Flowcharts) 以及模塊結構圖等。

你可以用它來理解 AI 智能體寫出的複雜代碼，獲取代碼審查建議，或者在提交 PR (Pull Request，程序員提交代碼合併請求時的說明) 時向評審人解釋你的思路。我發現這種方式往往比 GitHub 自帶的差異對比視圖好用一萬倍，現在我每次提交 PR，都會雷打不動地附帶一個 HTML 格式的代碼解讀頁面。

提示詞示例：

  • • 幫我審查這個 PR，生成一個 HTML 製品來向我解釋它的邏輯。我對數據流和背壓邏輯 (Backpressure，指接收方處理不過來時向發送方發出減緩發送速率的反饋機制) 不太熟悉，所以請重點剖析這部分。請渲染出真實的代碼差異，並在旁邊加上行內註釋。根據嚴重程度對你發現的問題進行顏色編碼，還可以加上任何有助於傳達概念的視覺圖表。

適用場景：

  • • 創建 PR 的說明文檔
  • • 審查同事或 AI 提交的 PR
  • • 快速理解代碼庫中的某個特定複雜主題

設計與原型製作 (Design & Prototypes)

Claude Design 的底層邏輯就是 HTML，因爲即使你最終產品的渲染終端不是網頁，HTML 在表達設計理念方面依然具有無可匹敵的優勢。Claude 可以先用 HTML 快速勾勒出設計草圖，然後再把它翻譯成你需要的編程語言，不管是 React、Swift 還是其他語言。

你還可以用它來製作絲滑的交互原型，比如動畫效果或用戶操作鏈路。不妨試着讓 Claude 幫你加上一些滑塊和旋鈕，這樣你就能親自上手，把細節微調到你心目中的完美狀態。

提示詞示例：

  • • 我想爲一個新的結賬按鈕做個交互原型：點擊它時，它會播放一段動畫，然後迅速變成紫色。請生成一個帶有幾個滑塊和選項的 HTML 文件，讓我能反覆測試這套動畫的不同參數配置。記得給我提供一個“複製”按鈕，方便我把試出來覺得完美的參數一鍵複製下來。

適用場景：

  • • 創建設計系統 (Design system) 的相關組件資產
  • • 直觀地微調 UI 組件細節
  • • 將枯燥的組件庫可視化展現
  • • 製作充滿樂趣的動畫交互原型

報告、研究與學習 (Reports, Research & Learning)

Claude Code 極其擅長整合海量的多源數據，並將它們提煉成可讀性極強的報告。你可以讓 Claude 去搜索你的 Slack 聊天記錄、你的代碼庫、Git 提交歷史甚至整個互聯網，然後爲你自己、你的領導或者你的團隊生成一份一目瞭然的精美報告。

你可以將它排版成一篇長篇 HTML 文檔、一個帶交互的解說頁面，甚至是一個幻燈片/演示文稿 (Deck)。別忘了提醒 Claude 盡情使用 SVG 格式來繪製圖表，這會讓報告的視覺表現力瞬間拉滿。

例如，在我撰寫關於提示詞緩存 (Prompt Caching) 的深度文章時，我讓 Claude 閱讀了相關模塊的 Git 歷史記錄，然後生成了一份深度的 HTML 研究報告，幫我係統梳理了我們在此期間對緩存邏輯做過的所有修改。

提示詞示例：

  • • 我一直搞不懂我們的限流器 (Rate limiter) 到底是怎麼工作的。請閱讀相關代碼，併爲我生成一個單頁的 HTML 講解文檔：包含一個令牌桶機制 (Token-bucket flow) 的數據流向圖、3 到 4 段帶有詳細註釋的核心代碼片段，並在頁面底部單列一個“常見陷阱 (Gotchas)”部分。請優化排版佈局，確保別人只讀一遍就能徹底弄懂。

適用場景：

  • • 總結某個複雜功能的工作原理
  • • 向我通俗解釋一個晦澀的概念
  • • 給老闆快速生成精美的本週工作彙報
  • • 給領導層出具直觀的故障/事故覆盤報告
  • • 自動繪製 SVG 插圖、流程圖和技術架構圖

自定義編輯界面 (Custom Editing Interfaces)

有時候，單純靠文字輸入框很難準確描述你的複雜需求。遇到這種情況，我會讓 Claude 專門爲我手頭上的工作，快速搭建一個“用完即走”的臨時可視化編輯器。它不是一個成熟的產品，也不是一個可以反覆利用的通用工具，僅僅是一個專爲這批特定數據量身定製的單一 HTML 文件。

這裏的核心竅門在於，一定要在界面上設計一個導出功能：比如一個“複製爲 JSON”或“複製爲提示詞”的按鈕，這樣你就能把你在這個精美 UI 裏一頓操作後的成果，直接粘貼回 Claude Code 裏繼續下一步工作。

提示詞示例：

  • • 我需要重新梳理這 30 個 Linear 任務單的優先級。請給我做一個 HTML 文件，把每個任務做成一張可拖拽的卡片，橫跨分爲“現在 (Now) / 接下來 (Next) / 以後再說 (Later) / 砍掉 (Cut)”四個欄目。你可以根據你的理解先幫我預先排序好。最後加一個“複製爲 Markdown”的按鈕，一鍵導出最終的分類排序結果，並且爲每個分類補充一句簡短的判斷理由。
  • • 這裏是我們的功能開關 (Feature flag) 配置文件。請爲它生成一個基於表單的編輯器，按功能模塊對開關進行合理分組，展示它們之間的依賴關係；如果我打開了一個開關，但它的前置依賴開關還處於關閉狀態，請彈窗警告我。最後加一個“複製差異”的按鈕，只導出我修改過的鍵值對。
  • • 我正在調優這個系統提示詞 (System prompt)。請做一個左右對照的編輯器：左邊是可編輯的提示詞模板，變量槽 (Variable slots) 要高亮顯示；右邊放 3 個示例輸入源，當我修改左邊的模板時，右邊要能實時渲染出填入變量後的最終效果。界面上還要有字符和 Token (大語言模型處理文本的基本單位) 的計數器，以及一個一鍵複製按鈕。

適用場景：

  • • 對任何事物進行重新排序、分類分診或分組（任務單、測試用例、用戶反饋）
  • • 編輯結構化配置信息（功能開關、環境變量、帶有複雜約束條件的 JSON/YAML）
  • • 藉助實時預覽功能調優提示詞、模板或文案
  • • 整理數據集、批准/拒絕特定數據行、給示例打標籤並導出選中結果
  • • 爲長文檔、錄音文稿或代碼差異添加詳細批註，並導出批註內容
  • • 挑選那些用純文字極其痛苦才能描述清楚的參數：顏色代碼、動畫緩動曲線 (Easing curves)、裁剪區域、Cron 定時任務表達式 (用於配置服務器定時執行任務的時間格式) 、正則表達式 (Regexes) 等。

常見問題解答 (Frequently Asked Questions)

我一直在向很多人安利我是如何徹底倒向 HTML 陣營的，期間也經常被問到以下幾個高頻問題。

這樣不會很浪費 Token 效率嗎？
確實，Markdown 通常消耗的 Token 更少。但我發現，HTML 極強的表現力以及它極高的人工閱讀率，讓我整體上獲得了好得多的輸出結果。在 Opus 4.7 模型高達 100 萬 (1MM) 的龐大上下文窗口裏，多花的這點 Token 幾乎是可以忽略不計的。

那你現在什麼時候還會用 Markdown？
說實話，我現在幾乎幹什麼都不用 Markdown 了，不過我承認我可能已經在“HTML 極端主義者”的道路上走得太遠了。

怎麼查看生成的 HTML 文件？
我通常直接在本地用瀏覽器打開它（你也可以直接讓 Claude 幫你打開）。如果想把鏈接發給別人，直接傳到雲端 S3 上就行。

這生成起來不比 Markdown 慢嗎？
確實更慢！生成 HTML 的時間可能是生成 Markdown 的 2 到 4 倍，但我親身測試下來，生成的結果絕對物超所值，值得等待。

那版本控制怎麼辦？
老實說，這確實是 HTML 最大的痛點之一。相比起清爽的 Markdown，HTML 文件在版本控制工具裏的差異對比 (Diffs) 非常雜亂，代碼審查起來比較頭疼。

怎麼讓 Claude 生成的頁面符合我的審美，不至於太醜？
Claude 內置的前端設計插件已經能幫它生成相當不錯的 HTML 頁面了。但如果你想讓頁面完全契合你們公司的品牌風格，你可以讓 Claude 掃描你們的代碼庫，生成一個專屬的“設計系統 HTML 文件”。之後，你可以把這個文件作爲參考資料丟給 Claude，讓它在生成其他 HTML 頁面時“照貓畫虎”，保持風格的高度一致。

保持人機協同 (Stay in the Loop)

說到底，我覺得自己如此鍾愛 HTML 的根本原因在於：它讓我真切地感覺到，自己依然在這個循環之中，依然在與 Claude 並肩作戰。

我之前一度很恐懼，既然我連幾百行的 Markdown 計劃書都懶得仔細看了，那以後是不是隻能兩眼一抹黑，任由 Claude 自己去盲目做決定了？但現在我很高興地說，因爲有了 HTML，我感覺自己比以往任何時候都更緊密地參與到了這段人機協同的創作旅程中。

希望你也能儘快體會到這種樂趣。

原文： Using Claude Code: The Unreasonable Effectiveness of HTML

https://x.com/trq212/status/2052809885763747935

閱讀原文
使用 Claude Code：HTML 難以置信的奇效【譯】 - 今日精華