Claude Cowork 深度使用：Artifacts 讓 AI 直接產出可用的東西

你請 Claude 寫一個 HTML 按鈕，它給你一段程式碼。你複製、存成 .html、用瀏覽器打開，看到結果，覺得顏色不對，回到對話說「改成藍色」，再複製、再存、再開……

Artifacts 解決的就是這個繁瑣循環。

Artifacts 讓 Claude 在對話右側開啟一個即時預覽視窗，你說「改成藍色」，右側立刻更新。不需要複製、不需要離開對話，直接在這裡迭代到滿意為止。

Claude Cowork Artifacts 使用流程

Artifacts 是什麼

Artifacts 是一個附屬於對話的獨立輸出視窗，專門用來顯示需要預覽的內容：

Artifacts 類型	說明
HTML	直接在視窗裡渲染，可以點擊互動
SVG	顯示向量圖形
React 元件	跑真實的 React 程式碼
Markdown	格式化文字預覽
純程式碼	語法高亮顯示（不執行）

對話和 Artifacts 是連動的：你在對話裡說修改要求，Artifacts 的內容同步更新，歷史版本也可以切換回去。

HTML 與網頁設計

這是 Artifacts 最常用的場景。

基本用法

幫我做一個聯絡表單，包含姓名、Email、訊息欄位和送出按鈕。
樣式要簡潔，用白色背景，主色調用 #126d67。

Claude 產出 HTML + CSS，右側直接預覽，你可以看到實際外觀、點擊按鈕測試互動。

迭代修改

因為結果即時可見，修改變得很直接：

把送出按鈕改成圓角，hover 時顏色加深
把輸入框的 border 改成 1px solid #ccc
表單外面加一個 max-width: 480px 的容器，置中顯示

每次說完立刻看到結果，不需要重新描述整個頁面。

完整頁面原型

幫我做一個產品登陸頁（Landing Page）：
- 頂部 hero 區：大標題 + 副標題 + CTA 按鈕
- 三個特色說明卡片（icon + 標題 + 說明文字）
- 底部 footer

風格：現代簡潔，深色背景，白色文字

做原型、做 mockup、做給客戶看的草稿，Artifacts 讓這個過程快很多。

SVG 圖表與視覺化

SVG 是另一個 Artifacts 的強項場景。

流程圖

幫我畫一個 SVG 流程圖，說明用戶登入的流程：
1. 用戶輸入帳號密碼
2. 驗證是否正確 → 否：顯示錯誤，回到輸入
3. 驗證通過 → 檢查是否開啟 2FA
4. 有 2FA → 輸入驗證碼 → 通過 → 登入成功
5. 無 2FA → 直接登入成功

用藍色為主色調，白色背景

架構圖

畫一個系統架構圖，包含：
- 前端（React）
- API 層（Node.js）
- 資料庫（PostgreSQL）
- 快取（Redis）
- 物件儲存（S3）

用箭頭標示資料流向

比起手動用 Figma 或 draw.io，用 Artifacts 畫說明用的架構圖快很多，需要調整直接說。

React 元件

Artifacts 支援真實的 React 程式碼，不只是預覽靜態 HTML，而是可以跑有狀態、有互動的元件。

互動計算機

幫我做一個貸款試算工具（React 元件）：
- 輸入：貸款金額、年利率、還款年數
- 輸出：每月還款金額、總還款金額、總利息
- 即時計算，不需要按確認按鈕

資料視覺化

用 React 做一個圓餅圖，顯示以下資料：
- 房租：35%
- 飲食：20%
- 交通：10%
- 娛樂：15%
- 儲蓄：20%

用不同顏色區分，滑鼠移上去顯示百分比

表單元件

做一個多步驟表單（3 步驟）：
步驟 1：基本資料（姓名、Email）
步驟 2：偏好設定（下拉選單）
步驟 3：確認畫面 + 送出

要有步驟指示器顯示目前在第幾步

互動工具

Artifacts 最有趣的應用：做一個真正可以用的小工具。

文字處理工具

做一個字數計算工具：
- 左側輸入文字框
- 右側即時顯示：字數、字元數、段落數、預估閱讀時間（250 字/分鐘）

顏色工具

做一個顏色對比度檢查工具：
- 輸入前景色和背景色（Hex）
- 計算並顯示對比度比率
- 標示是否通過 WCAG AA / AAA 標準

計算工具

做一個複利計算機：
- 輸入：本金、年利率、投資年數、每月追加金額
- 輸出：最終金額、總投入、利息收益
- 用長條圖顯示每年的本金 vs 利息比例

如何觸發 Artifacts

Claude 通常會自動判斷什麼時候用 Artifacts。你也可以明確要求：

明確觸發的關鍵字： - 「用 Artifact...」 - 「做一個可以互動的...」 - 「畫一個 SVG...」 - 「做一個 HTML 頁面...」 - 「用 React 元件...」

如果 Claude 只給了程式碼文字而沒有開 Artifacts，可以說：「把這個放在 Artifact 裡讓我直接預覽」。

匯出與使用

Artifacts 的輸出不只是看看：

複製程式碼：右上角複製按鈕，完整複製 HTML/SVG/React 程式碼
下載：某些類型可以直接下載成檔案
HTML 直接用：複製後存成 .html，瀏覽器直接打開就是完整的工具

做出來的東西可以直接放進網站、分享給別人、或當作原型繼續開發。

Cowork vs Chat vs Code

	Chat	Cowork（Artifacts）	Code
主要用途	文字問答、分析	視覺產出、互動工具	程式碼開發
能看到即時預覽	❌	✅	❌（執行結果在 Terminal）
能修改本機檔案	❌	❌	✅

Cowork 的定位是：產出可以直接看到、直接用的東西，不需要離開對話視窗。

常見問題

Q：Artifacts 裡的 HTML 可以發出網路請求嗎？ 可以，但受瀏覽器 CORS 限制。呼叫有允許跨域的 API 沒問題，但不能用來做複雜的後端整合。

Q：React 元件支援外部套件嗎？ 支援部分常用套件（recharts 等），但不是所有 npm 套件都能用。

Q：Artifacts 的版本可以切換嗎？ 可以。Claude 的每次修改都會保留版本記錄，可以在 Artifacts 視窗切換回之前的版本。

小結

Artifacts 把「讓 AI 幫你做東西」的體驗從「複製貼上再測試」變成「說完立刻看到結果」。最適合的場景是需要視覺輸出的工作：網頁設計、圖表、互動工具原型。

如果你的工作需要讓 Claude 真正讀取你的程式碼庫、執行指令，那是 Code 模式的範疇。

🔗 系列文章

這篇有幫助嗎？ 不只是程式碼——Artifacts 讓你在對話裡直接看到、直接用。

—