@trq212：使用 Claude Code：HTML 的不合理高效性 Markdown 已成為 Agent 與我們溝通的主流檔案格式。它簡單、可攜帶、具備基本的富文本功…

使用 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？ 資訊密度 與 Markdown 相比，HTML 可以傳達更豐富的資訊。它當然可以處理簡單的文件結構（如標題和格式），但它還能呈現各種其他資訊，例如： 使用表格呈現的列表資料 使用 CSS 設計的資料樣式 使用 SVG 製作的插圖 使用 script 標籤嵌入的程式碼片段 使用 HTML 元素搭配 JavaScript + CSS 實現的互動功能 使用 SVG 和 HTML 呈現的工作流程 使用絕對定位和 Canvas 呈現的空間資料 使用 image 標籤呈現的圖片 我甚至認為，幾乎沒有什麼 Claude 能讀取的資訊是無法透過 HTML 高效呈現的。這使得它成為模型向你傳達深度資訊，以及你進行審閱時的一種極高效率方式。 我發現如果無法做到這一點，模型可能會在 Markdown 中採取效率較低的做法，例如 ASCII 圖表，或者我最喜歡的——像這張 Claude Code 截圖中那樣，用 Unicode 字元來模擬色彩。 視覺清晰度與易讀性 隨著 Claude 能夠處理更複雜的工作，它所撰寫的規格書和計畫也越來越龐大。實際上，我發現自己往往不會去閱讀超過 100 行的 Markdown 檔案，而且我肯定無法讓組織內的其他人去閱讀它。 但 HTML 文件更容易閱讀，Claude 可以透過標籤頁、插圖、連結等方式在視覺上組織結構，使其易於導覽。它甚至可以做到行動裝置響應式設計，讓你根據不同的裝置尺寸以不同方式閱讀。 易於分享 Markdown 檔案相當難以分享，因為大多數瀏覽器無法原生良好地渲染它們。你通常必須將它們作為附件添加到 email 或訊息中。 使用 HTML，只要你上傳檔案（例如上傳到 S3），就可以輕鬆分享連結。你的同事可以在他們想要的任何地方開啟並輕鬆參考。 如果你的規格書、報告或 PR 說明是用 HTML 撰寫的，那麼有人真正去閱讀它的機率會高出非常多。 雙向互動 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。 範例 Prompt： 我不確定 onboarding 畫面該採取什麼方向。請生成 6 種截然不同的方法——改變佈局、語氣和密度——並將它們以網格形式放在同一個 HTML 檔案中，以便我可以並排比較。請標註每一種方法所做的取捨。 在 HTML 檔案中建立一份詳盡的實作計畫，務必製作一些模型，展示資料流，並添加我可能需要審閱的重要程式碼片段。使其易於閱讀和吸收。 使用案例： 探索程式碼中實作某功能的其他方式 探索多種視覺設計 程式碼審閱與理解 程式碼在 Markdown 檔案中可能很難閱讀。但透過 HTML，我們可以渲染 diff、註解、流程圖、模組等。利用這一點來理解 Agent 撰寫的程式碼、進行程式碼審閱，或向審閱你程式碼的人解釋 PR。我發現這通常比預設的 Github diff 視圖效果更好，我現在會在每個 PR 中都附上一個 HTML 程式碼解釋器。 範例 Prompt： 協助我審閱此 PR，建立一個描述它的 HTML artifact。我對串流/背壓（streaming/backpressure）邏輯不太熟悉，所以請專注於此。渲染實際的 diff 並加上行內邊緣註解，按嚴重程度對發現的問題進行顏色編碼，以及任何其他有助於傳達概念的內容。 使用案例： 建立 PR 審閱 PR 理解程式碼中的主題 設計與原型 Claude Design 是基於 HTML 的，因為 HTML 在設計方面極具表現力，即使你的最終介面不是 HTML。Claude 可以用 HTML 勾勒出設計草圖，然後用你選擇的語言（無論是 React、Swift 等）編寫出來。 你也可以製作互動原型，例如動畫、動作等。考慮要求 Claude 製作滑桿、旋鈕等來精確調整你想要的內容。 範例 Prompt： 我想要為一個新的結帳按鈕製作原型，點擊時它會播放動畫，然後迅速變為紫色。請建立一個包含多個滑桿和選項的 HTML 檔案，讓我嘗試此動畫的不同選項，並給我一個複製按鈕，以便複製效果良好的參數。 使用此功能來： 建立設計系統 artifact 調整組件 視覺化組件庫 製作充滿樂趣的動畫原型 報告、研究與學習 Claude Code 在整合多個資料來源的資訊並將其轉換為易讀的報告方面非常出色。你可以 Prompt Claude 搜尋你的 Slack、程式碼庫、git 歷史紀錄、網際網路等，並用它為你自己、領導層、團隊等生成極易閱讀的報告。 你可以將其組合成一份長篇 HTML 文件、互動式解釋器，甚至是投影片/簡報。要求 Claude 使用 SVG 繪製圖表以協助視覺化。 例如…