Claude Code Artifacts 完整教學 — 把一次 debug 過程變成同事點開就懂的網頁

事情是這樣的。你花了一個下午用 Claude Code 追一個詭異的 bug，查了五六個檔案、比對了 git log、最後定位到某個 race condition。事情解掉了，但同事問你「怎麼查到的」，麻煩來了。

你試了三種方式。第一種是截圖貼 Slack——terminal 的輸出又長又黑，截出來一張比一張醜，貼了五張之後對方已經滑過去了。第二種是把 terminal 內容複製貼上——一坨純文字，沒有重點、沒有顏色、沒人想讀。第三種是認命開一頁 Notion，手動把調查過程重打一遍、貼上關鍵 diff——花的時間比 debug 本身還久，而且你隔天就不想維護它了。

問題的本質是：你手上有一堆「看比讀快」的東西（標註過的 diff、一張錯誤次數的圖、幾個方案的對照），但你只有「純文字」跟「截圖」兩種爛掉的容器可以裝它們。Claude Code 在 6 月 18 日加進來的 Artifacts，補的就是這個洞——它讓 Claude 把這次 session 的成果，直接發布成一頁可以分享的網頁。

先弄懂一件事：它是「快照」，不是「應用程式」

在學怎麼用之前，得先把一個觀念擺正，不然你會用錯。

打個比方。Artifact 比較像你拍的一張照片，而不是你開的一家店。照片忠實記錄了某個時刻的樣子，你可以拿給別人看；但照片裡的收銀機不會真的收錢，門也推不開。Artifact 也一樣——它是一頁自己包好的 HTML，沒有後端。所以它不能存你填的表單、不能在別人開啟的當下去打 API、也不能切換到別的頁面。它是「工作的快照」，把某次 session 的成果凝固成一頁能看的東西。

那如果你要的是一個真的會跑後端、能存資料的內部工具呢？那就不該用 Artifact，老老實實部署到你自己的機器上。把這條線記住，後面所有的設計限制你都能自己推出來，不用死背。

怎麼產生一個 Artifact

實際操作比想像中簡單。有兩種觸發方式：

Claude 自己判斷：當它發現某個輸出「做成一頁網頁會更清楚」，它會主動提議發布。
你直接開口：用白話描述你要的視覺產物。判斷一個東西適不適合做成 Artifact，問自己一句就好——「這東西用看的，是不是比用讀的快？」標註過的 diff、一張圖表、幾個方案的並排對照，都是好人選。

發布的流程是這樣走的：Claude 先把網頁寫成專案裡的一個 HTML 或 Markdown 檔，然後發布。第一次發布前它會先問你，跳出來大概長這樣：

1 2	Claude wants to publish "Deploy failures by service" (deploy-failures.html) to a private page on claude.ai

你選 Yes，它就印出網址、瀏覽器自動跳開那一頁。注意一個貼心設計：同一個你已經批准過的 Artifact，之後再次發布不會再問你——它知道你已經點頭過了。

幾個立刻能用的小技巧：

隨時按 **Ctrl+]**，從 terminal 直接重新打開最近那一個 Artifact。
不想每次發布都自動彈出瀏覽器？設環境變數 CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 就好。

幾個官方點名的實戰場景，你會發現它們的共同點都是「看比讀快」：帶 reviewer 走過一個 PR 的標註式 diff、從 session 資料長出來的儀表板、一頁隨著調查進度不斷補上的事故時間軸、這禮拜團隊合併了哪些 PR 的週報。舉個最實用的——SRE 值班時可以說「把這次事故做成一個 Artifact：時間軸、可疑的 commit、從監控抓到的錯誤尖峰，然後我邊查你邊重新發布」，等事故結束，這頁就直接變成你的 postmortem 了。

它是「活的」：版本怎麼運作

這是 Artifact 跟你想像中「匯出一個 HTML 檔」最不一樣的地方——它是活的，不是死的快照。

任何開著那一頁的人，都會看到內容原地更新。而每一次發布，都會變成一個新版本，掛在同一個網址底下。網頁標題列上有個 Share 控制項，你可以選「要讓觀看者看到哪一個版本」。版本歷史是完整保留的，隨時可以還原到之前任何一版，還有一個 gallery 讓你瀏覽、管理你做過的所有 Artifact。

這裡有個一定會踩到的坑，先講清楚：如果你想在另一個 session 裡更新一個舊的 Artifact，你必須把那個 Artifact 的網址餵給 Claude，叫它去改。沒給網址的話，新 session 永遠是「再生一個新的」，而不是「更新舊的」。原因其實很單純——換了 session，Claude 根本不知道你說的「那一頁」是哪一頁，網址就是它唯一認得的身分證。

分享：預設只有你看得到

每一個 Artifact 剛產生的時候，只有你自己看得到。要分享，從網頁標題列的 Share 控制項授權出去——可以給組織裡的特定幾個人，也可以給整個組織。標題列會把你列為作者，所以你分享給誰，對方都看得到這頁是誰發布的。

有一個邊界要記牢：分享是綁在組織內的。Artifact 只有通過驗證的組織成員看得到，沒辦法公開給外面的人。所以別想著拿它當對外的 landing page 用，它從設計上就不給你這個選項。

安全邊界：一頁被封死的網頁

為什麼一個 Artifact 不能打 API、不能載外部資源？這不是功能還沒做，是刻意封死的，而且理由很正當。

每一個 Artifact 是一頁自己包好的 HTML，渲染後大小上限 16 MiB。Claude 會用一條很嚴格的 CSP（內容安全政策）把它整個包起來：封鎖所有對外的網路請求。這代表這頁不能載外部的 script、字型、樣式表，fetch、XHR、WebSocket 全部打不出去。所有的 CSS 和 JavaScript 都被 inline 進去、圖片以 data URI 內嵌。

回到前面那個「照片 vs 店」的比方，這下完全通了：因為它本來就只是一張照片，照片當然不該、也不需要對外連線。這層封死，換來的是組織安全上的保證——你分享出去的，是一頁絕對不會偷偷把資料外送的死頁面。

還有一個藏起來的好設計：Claude 在做 Artifact 的時候會套一個內建的設計 skill，而且它會先去翻你專案的 CLAUDE.md 或 theme 檔有沒有既有的設計系統。如果你在那裡記了顏色、字型、間距這些 design token，它會把你的設定當成比它自己預設更高的優先序。換句話說，你公司的視覺規範，它會自己拿去套。

用之前先確認：你的方案吃不吃得到

得把醜話講在前面，免得你興沖沖打開 terminal 才發現沒這功能。截至目前，Artifacts 還在 beta，而且只開放給 Claude Team 和 Enterprise 組織，可以從 Claude Code CLI 或桌面 App 使用，產出的頁面用任何瀏覽器都看得到。Individual 和 Pro 方案目前都吃不到，Anthropic 也還沒公布擴大開放的時間表。

另外別跟今年 4 月網頁版 Claude 的「Live Artifacts」搞混了——那個能接外部資料庫，而 Claude Code 的 Artifacts 反映的是 session 的狀態，不是外部 DB。兩個名字像，骨子裡是兩回事。