Claude Code 擴展 Artifacts 功能讓使用者發布互動網頁。 Boris Cherny 在社群分享，Artifacts 功能為他的工作流程帶來很大的改變，特別是在解釋架構選項、視覺化呈現 Session 結果（如圖表與表格）、分析資料以及整理複雜的 Pull Request（PR）概覽時極為實用。Anthropic 官方隨後確認，此功能已正式開放給 Pro 與 Max 方案的使用者。核心功能與應用 Artifacts 允許 Claude Code 將工作成果發布至 claude.ai 的私人 URL。這些頁面是完全獨立的靜態網頁，並會隨著 Session 的進行即時更新。其主要應用場景包括： PR 導覽：將程式碼差異（Diff）與註解並列，方便審閱者理解變更意圖。互動式儀表板：根據 Session 擷取的資料繪製圖表，例如呈現部署失敗率或效能統計數據。方案比較：將多種設計或實作選項並排顯示，便於評估與決策。進度追蹤：在執行長任務時，建立一個即時更新的檢查清單，讓團隊成員能隨時掌握進度。影片展示了 Claude Code 的 Artifacts 功能，讓開發者能將程式碼執行結果以即時網頁形式發布與分享。使用與技術限制 Artifacts 的運作基於 HTML、CSS 與內嵌 JavaScript，為了確保安全性，該功能設有嚴格的內容安全政策（CSP）：無外部請求：禁止載入外部腳本、樣式表或執行 fetch、WebSocket 等請求，所有資源均需內嵌。靜態頁面：不具備後端功能，無法處理表單提交或在檢視時呼叫 API。檔案限制：僅支援 .html、.htm 或 .md 格式，且渲染後大小需在 16 MiB 以內。權限管理：Pro 與 Max 方案中，Artifacts 預設為私人；Team 與 Enterprise 方案則支援透過頁面標頭的「Share」選單，將連結分享給組織內成員。操作指引使用者可直接透過指令要求 Claude 建立 Artifacts，例如：「Make an artifact that walks through this PR with the diff annotated inline.」「Build a dashboard artifact of last week's deploy failures by service and keep it updated as you investigate.」若需調整設定，可透過環境變數進行管理，例如設定 CLAUDECODEARTIFACTAUTOOPEN=0 以禁止瀏覽器在發布時自動開啟頁面。更多詳細資訊可參考官方文件 Artifacts 說明頁面。

影片展示了 Claude Code 的 Artifacts 功能，讓開發者能將程式碼執行結果以即時網頁形式發布與分享。影片中的 Prompt 與操作：

Prompt（00:08）：請將此 PR 作為 Artifact 向我說明，並在差異處加上你的推理註解

原文：Walk me through this PR as an artifact and annotate the diff with your reasoning

Prompt（00:44）：程式碼庫中的請求是如何移動的

原文：How a request moves through the codebase

Prompt（00:51）：將你這場工作階段拉取的延遲數據繪製成圖表

原文：Chart the latency numbers you pulled this session

操作步驟： 1. （00:08）輸入指令要求建立 Artifact 2. （00:16）確認發布請求 3. （00:57）按下 Ctrl + ] 重新開啟 Artifact 4. 輸入 /config 進入設定選單

原文：https://easyvibecoding.app/curated/2330

Claude Code 擴展 Artifacts 功能讓使用者發布互動網頁

EasyVibeCoding Podcast

Claude Code 擴展 Artifacts 功能讓使用者發布互動網頁