# 策展 · X (Twitter) 🔥🔥🔥🔥

> 作者：Thariq (@trq212) · 平台：X (Twitter) · 日期：2026-05-10

> 原始來源：https://x.com/trq212/status/2052809885763747935

## 中文摘要

# 使用 Claude Code：HTML 的不合理高效性

Markdown 已成為 Agent 與我們溝通的主流檔案格式。它簡單、可攜帶、具備基本的富文本功能，且易於編輯。Claude 甚至已經練就了在 Markdown 檔案中使用 ASCII 繪製圖表的驚人能力。

但隨著 Agent 變得越來越強大，我開始覺得 Markdown 成為了一種限制。我發現閱讀超過一百行的 Markdown 檔案很吃力。我想要更豐富的視覺化效果、色彩和圖表，而且我希望能夠輕鬆地分享它們。

此外，我越來越少親自編輯這些檔案，而是將它們作為規格書、參考文件、腦力激盪的產出等。當我確實需要修改時，我通常是透過 Prompt 指示 Claude 來編輯，這反而消除了 Markdown 的一大優勢。

我已經開始偏好使用 HTML 作為輸出格式來取代 Markdown，而且我越來越常看到 Claude Code 團隊的其他成員也這麼做，以下是原因。

（如果你想先看一些範例，可以在這裡看到一堆：https://thariqs.github.io/html-effectiveness，記得看完後回來閱讀更多細節）

# 為什麼選擇 HTML？

## 資訊密度

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1778375427731-diaHHzq48aAAAaCfWjpg.jpg)

與 Markdown 相比，HTML 可以傳達更豐富的資訊。它當然可以處理簡單的文件結構（如標題和格式），但它還能呈現各種其他資訊，例如：

- 使用表格呈現的列表資料
- 使用 CSS 設計的資料樣式
- 使用 SVG 製作的插圖
- 使用 script 標籤嵌入的程式碼片段
- 使用 HTML 元素搭配 JavaScript + CSS 實現的互動功能
- 使用 SVG 和 HTML 呈現的工作流程
- 使用絕對定位和 Canvas 呈現的空間資料
- 使用 image 標籤呈現的圖片

我甚至認為，幾乎沒有什麼 Claude 能讀取的資訊是無法透過 HTML 高效呈現的。這使得它成為模型向你傳達深度資訊，以及你進行審閱時的一種極高效率方式。

我發現如果無法做到這一點，模型可能會在 Markdown 中採取效率較低的做法，例如 ASCII 圖表，或者我最喜歡的——像這張 Claude Code 截圖中那樣，用 Unicode 字元來模擬色彩。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1778375427737-iaHH0CDc6a8AAy1bvpng.png)

## 視覺清晰度與易讀性

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1778375427753-iaHH0AgqJbcAAaEcZjpg.jpg)

隨著 Claude 能夠處理更複雜的工作，它所撰寫的規格書和計畫也越來越龐大。實際上，我發現自己往往不會去閱讀超過 100 行的 Markdown 檔案，而且我肯定無法讓組織內的其他人去閱讀它。

但 HTML 文件更容易閱讀，Claude 可以透過標籤頁、插圖、連結等方式在視覺上組織結構，使其易於導覽。它甚至可以做到行動裝置響應式設計，讓你根據不同的裝置尺寸以不同方式閱讀。

## 易於分享

Markdown 檔案相當難以分享，因為大多數瀏覽器無法原生良好地渲染它們。你通常必須將它們作為附件添加到 email 或訊息中。

使用 HTML，只要你上傳檔案（例如上傳到 S3），就可以輕鬆分享連結。你的同事可以在他們想要的任何地方開啟並輕鬆參考。

如果你的規格書、報告或 PR 說明是用 HTML 撰寫的，那麼有人真正去閱讀它的機率會高出非常多。

## 雙向互動

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1778375427776-iaHH0Ao0tbYAAOF9ejpg.jpg)

HTML 可以讓你與文件互動，例如，你可能希望要求它添加滑桿或旋鈕來調整設計，或者允許你在演算法中調整不同的選項來觀察結果。你也可以要求它讓你將這些變更複製到 Prompt 中，以便貼回 Claude Code。

閱讀更多關於我的 playgrounds 文章，查看這種雙向互動的範例：https://x.com/trq212/status/2017024445244924382

資料攝取

為什麼要用 Claude Code 來製作 HTML 檔案，而不是例如 ClaudeAI 或 Claude Design？最大的原因之一是 Claude Code 可以攝取的所有 context。

例如，在撰寫這篇文章時，我要求 Claude Code 讀取我的程式碼資料夾，找出我生成的所有 HTML 檔案，將它們分組分類，然後製作一個包含所有圖表的 HTML 檔案，呈現每一種類型。你在這篇文章中看到的圖表就是直接的成果。

除了檔案系統，Claude Code 還可以使用你的 MCP（如 Slack、Linear 等）、你的網頁瀏覽器（透過 Chrome 中的 Claude）、你的 git 歷史紀錄等來尋找額外的 context。

## 充滿樂趣

與 Claude 一起製作 HTML 文件更有趣，讓我感覺自己更投入、更用心在創作過程中，單憑這一點就足夠了。

## 如何開始

我有點擔心人們讀了這篇文章後會把它變成一個 `/html` skill 之類的東西。雖然這可能有一些價值，但我想強調的是，你不需要做太多準備就能讓 Claude 做到這一點。你只需要要求它「製作一個 HTML 檔案」或「製作一個 HTML artifact」即可。

訣竅在於了解你希望這個 artifact 做什麼，以及你打算如何使用它。隨著時間推移，你可能會製作一個 skill，但目前我建議直接從頭開始 Prompt，以掌握如何在不同情況下使用它。

# 使用案例

為了讓這更具體，我為不同的使用案例製作了許多不同的 HTML 檔案。你可以在這裡查看所有檔案：https://thariqs.github.io/html-effectiveness/，以下是概覽。

## 規格書、規劃與探索

HTML 是 Claude 深入研究問題的豐富畫布。當我開始處理一個問題時，我預期會製作一個 HTML 檔案網，而不是一個簡單的 Markdown 計畫。例如，我可能會先要求 Claude Code 進行腦力激盪，並針對不同選項進行探索。然後我會要求它針對其中一個選項進行擴充，或許製作一些模型或程式碼片段。最後，當我感覺不錯時，我會要求它撰寫實作計畫。當我對計畫滿意時，我會建立一個新的 session 並傳入所有這些檔案讓它實作。

在驗證時，我也會要求驗證 Agent 讀取這些檔案，這樣它就能對所需內容有更廣泛的 context。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1778375427750-diaHH0BFWLbMAEk7Tjpg.jpg)

範例 Prompt：

- 我不確定 onboarding 畫面該採取什麼方向。請生成 6 種截然不同的方法——改變佈局、語氣和密度——並將它們以網格形式放在同一個 HTML 檔案中，以便我可以並排比較。請標註每一種方法所做的取捨。
- 在 HTML 檔案中建立一份詳盡的實作計畫，務必製作一些模型，展示資料流，並添加我可能需要審閱的重要程式碼片段。使其易於閱讀和吸收。

使用案例：

- 探索程式碼中實作某功能的其他方式
- 探索多種視覺設計

## 程式碼審閱與理解

程式碼在 Markdown 檔案中可能很難閱讀。但透過 HTML，我們可以渲染 diff、註解、流程圖、模組等。利用這一點來理解 Agent 撰寫的程式碼、進行程式碼審閱，或向審閱你程式碼的人解釋 PR。我發現這通常比預設的 Github diff 視圖效果更好，我現在會在每個 PR 中都附上一個 HTML 程式碼解釋器。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1778375427741-iaHH0BRSQbMAAuuofpng.png)

範例 Prompt：

協助我審閱此 PR，建立一個描述它的 HTML artifact。我對串流/背壓（streaming/backpressure）邏輯不太熟悉，所以請專注於此。渲染實際的 diff 並加上行內邊緣註解，按嚴重程度對發現的問題進行顏色編碼，以及任何其他有助於傳達概念的內容。

使用案例：

- 建立 PR
- 審閱 PR
- 理解程式碼中的主題

## 設計與原型

Claude Design 是基於 HTML 的，因為 HTML 在設計方面極具表現力，即使你的最終介面不是 HTML。Claude 可以用 HTML 勾勒出設計草圖，然後用你選擇的語言（無論是 React、Swift 等）編寫出來。

你也可以製作互動原型，例如動畫、動作等。考慮要求 Claude 製作滑桿、旋鈕等來精確調整你想要的內容。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1778375427736-iaHH0BXqjboAAHGswjpg.jpg)

範例 Prompt：

我想要為一個新的結帳按鈕製作原型，點擊時它會播放動畫，然後迅速變為紫色。請建立一個包含多個滑桿和選項的 HTML 檔案，讓我嘗試此動畫的不同選項，並給我一個複製按鈕，以便複製效果良好的參數。

使用此功能來：

- 建立設計系統 artifact
- 調整組件
- 視覺化組件庫
- 製作充滿樂趣的動畫原型

## 報告、研究與學習

Claude Code 在整合多個資料來源的資訊並將其轉換為易讀的報告方面非常出色。你可以 Prompt Claude 搜尋你的 Slack、程式碼庫、git 歷史紀錄、網際網路等，並用它為你自己、領導層、團隊等生成極易閱讀的報告。

你可以將其組合成一份長篇 HTML 文件、互動式解釋器，甚至是投影片/簡報。要求 Claude 使用 SVG 繪製圖表以協助視覺化。

例如，針對我關於 Prompt 快取的文章，我要求 Claude 在讀取 git 歷史紀錄後，為我準備一份深入的研究檔案（HTML 格式），讓我閱讀關於我們對 Prompt 快取所做的所有變更。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1778375427728-iaHH0Bp86bUAAJDyZjpg.jpg)

範例 Prompt：
我不了解我們的速率限制器（rate limiter）實際上是如何運作的。請讀取相關程式碼並製作單一 HTML 解釋頁面：包含 token-bucket 流程圖、3-4 個關鍵程式碼片段註解，以及底部的「注意事項」區塊。請為初次閱讀的人進行優化。

使用此功能來：

- 總結功能運作方式
- 向我解釋概念
- 向老闆提交每週狀態報告
- 向領導層提交事故報告
- SVG 插圖、流程圖、技術圖表等

# 自訂編輯介面

有時很難純粹用文字框描述你想要的東西。在這種情況下，我會要求 Claude 為我正在處理的特定事項建立一個拋棄式編輯器。不是產品，也不是可重複使用的工具，而是一個專為這項資料所建的單一 HTML 檔案。

訣竅永遠是以匯出功能結尾：一個「複製為 JSON」或「複製為 Prompt」按鈕，將我在 UI 中所做的任何操作變回我可以貼回 Claude Code 的內容。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1778375427747-iaHH0FbKebUAAsRPrjpg.jpg)

範例 Prompt：

- 我需要重新排列這 30 張 Linear 工單的優先順序。請為我製作一個 HTML 檔案，將每張工單作為可拖曳的卡片，放在「現在 / 下一步 / 以後 / 刪除」欄位中。請先根據你的最佳猜測進行排序。添加一個「複製為 Markdown」按鈕，匯出最終排序，並為每個區塊提供一行理由。
- 這是我們的功能旗標（feature flag）配置。請為它建立一個表單式編輯器，按區域分組旗標，顯示它們之間的依賴關係，如果我啟用了前置條件未開啟的旗標，請警告我。添加一個「複製 diff」按鈕，只給我變更過的鍵值。
- 我正在調整這個系統 Prompt。請製作一個並排編輯器：左側是可編輯的 Prompt，並標示出變數槽位；右側是三個範例輸入，可即時重新渲染填入後的模板。添加字元/token 計數器和複製按鈕。

使用此功能來：

- 重新排序、分類或分組任何內容（工單、測試案例、意見回饋）
- 編輯結構化配置（功能旗標、環境變數、帶有約束的 JSON/YAML）
- 透過即時預覽調整 Prompt、模板或文案
- 策劃資料集、核准/拒絕列、標記範例、匯出選擇內容
- 註解文件、逐字稿或 diff，並匯出註解
- 挑選難以用文字表達的值：顏色、緩動曲線、裁切區域、cron 排程、正規表示式（regex）

## 常見問題

我一直在告訴許多人我是如何切換到 HTML 的，我也看到了一些重複出現的問題。

這不是比較消耗 token 嗎？
雖然 Markdown 通常使用的 token 較少，但我發現 HTML 增加的表現力以及我閱讀它的可能性大幅提高，意味著我獲得了整體更好的產出。隨著 Opus 4.7 擁有 100 萬的 context window，增加的 token 使用量在 context window 中其實並不顯著。

你現在什麼時候會使用 Markdown？
老實說，我幾乎已經完全停止在所有地方使用 Markdown，但我可能屬於 HTML 極端主義者。

我該如何檢視 HTML 檔案？
我傾向於直接在本地瀏覽器中開啟它（你可以要求 Claude 開啟它），或者如果你想要一個可分享的連結，就上傳到 S3。

這產生起來不比 Markdown 花時間嗎？
這確實比較花時間！HTML 可能比 Markdown 花費 2-4 倍的時間，但我發現結果是值得的。

版本控制怎麼辦？
老實說，這是 HTML 最大的缺點之一，與 Markdown 相比，HTML 的 diff 雜訊較多且難以審閱。

我該如何讓 Claude 符合我的品味 / 不讓它變得很醜？
前端設計 plugin 有助於 Claude 製作出好的 HTML 檔案。但若要符合你公司自己的風格，你可以透過將 Claude 指向你的程式碼庫來建立一個單一的設計系統 HTML 檔案。然後，你可以將該設計系統檔案作為其他 HTML 檔案的參考。

## 保持同步

以上所有內容都說明了，我認為我使用 HTML 的真正原因是我感覺與 Claude 的互動更加緊密。我曾開始擔心，因為我已經停止深入閱讀計畫，我將不得不任由 Claude 做出選擇。

但我很高興地說，在使用 HTML 時，我感覺比以往任何時候都更能掌握狀況。希望你也是。

## 標籤

Claude Code, Agent, 教學資源, Anthropic, Claude