Claude Artifacts 實戰 — 對話中直接做出可分享的小工具

由 FeiYueh 親自審稿驗證 · 最後更新於 2026-09-20

Claude Artifacts 最大的價值不在「產生程式碼」，而在於把一段對話直接變成一個可用、可分享的網頁工具——不需要 GitHub、不需要部署、不需要伺服器。從描述需求到拿到一條公開連結，中間沒有任何開發環境的步驟。這件事改變的不是寫程式的速度，而是「誰能做出工具」這個問題的答案。 Artifacts 是什麼：

Claude Artifacts 最大的價值不在「產生程式碼」，而在於把一段對話直接變成一個可用、可分享的網頁工具——不需要 GitHub、不需要部署、不需要伺服器。從描述需求到拿到一條公開連結，中間沒有任何開發環境的步驟。這件事改變的不是寫程式的速度，而是「誰能做出工具」這個問題的答案。 Artifacts 是什麼：不是程式碼區塊，是可執行的側邊視窗 Artifacts 是 Anthropic 於 2024 年 6 月隨 Claude 3.5 Sonnet 一起推出的功能，把 Claude 生成的內容從對話流中抽出，放進右側一個獨立的可執行面板。 「Artifacts 於 2024 年 6 月 20 日隨 Claude 3.5 Sonnet 發布」（來源：Anthropic 官方公告） 。與一般程式碼區塊的差別在於：程式碼區塊只能複製貼上，Artifacts 會直接把 HTML、React 元件、SVG、Mermaid 圖表渲染成你當下就能點擊操作的成品。 更關鍵的變化發生在 2025 年 6 月。Anthropic 開放了 Artifacts 的分享機制，並讓 Artifact 內部可以呼叫 Claude API，等於讓一個對話產物變成一個能自己思考的小應用。 「Anthropic 於 2025 年 6 月 25 日開放 Artifacts 分享與內建 Claude API 呼叫」（來源：Anthropic 官方公告） 。此後 Artifacts 不再只是預覽視窗，而是一個沒有部署成本的最小應用載體。 採用速度可以佐證這個定位的實用性。 「Artifacts 推出後不到一年，使用者累計創建超過 5 億個 Artifacts」（來源：Anthropic 官方公告） ——這個數字包含大量一次性的圖表與草稿，但也說明「在對話中直接得到成品」符合真實的使用習慣。 什麼題目適合做成 Artifact，什麼不適合 判斷標準只有一條：這個工具是否能在單一頁面、無後端、無持久資料庫的條件下完成任務。符合的題目做起來只要幾分鐘，不符合的則會在中途撞牆。 適合的題型 計算器類 ：房貸試算、匯率換算、BMI、加班費計算、專案報價。輸入輸出明確，邏輯封閉。 轉換器類 ：CSV 轉 JSON、時區換算、單位換算、Markdown 轉 HTML、正則表達式測試。 資料視覺化 ：把一段表格貼進對話，直接生成互動圖表，滑鼠移上去有 tooltip。 教學互動示範 ：複利成長模擬、機率抽樣、演算法動畫、物理拋物線。滑桿一拉數值就變。 表單與清單工具 ：檢查表、評分表、決策矩陣、抽籤器。 不適合的題型 需要跨使用者共享資料 ：多人協作的待辦清單、留言板。Artifact 沒有共用資料庫。 需要呼叫第三方 API ：查即時股價、抓天氣、串接自家後端。Artifacts 執行在嚴格的沙箱與 CSP 限制下，對外網路請求會被擋掉。 需要處理機密資料 ：任何金鑰寫進 Artifact 等於寫進前端明碼。 需要長期維護與版本控制的正式產品 ：這時應該把程式碼取出，進入正常的 repo 流程。 實戰流程：從一句話到一條連結 整個流程只有四步，而且每一步都在同一個對話視窗內完成。以下用「加班費計算器」作為貫穿範例。 第一步：把需求寫成「輸入、規則、輸出」三段 模糊的需求會得到模糊的工具，這是 Artifacts 失敗率最高的一步。不要寫「幫我做一個加班費計算器」，要寫成結構化描述： 做一個網頁工具。輸入：月薪、當月加班時數（分平日、假日兩欄）。規則：平日前 2 小時 1.34 倍，第 3 小時起 1.67 倍；休息日前 2 小時 1.34 倍，第 3 到 8 小時 1.67 倍。時薪 = 月薪 ÷ 240。輸出：各級距金額與總額，並列出計算過程。介面用繁體中文，數字加千分位。 把法規或商業規則直接貼進提示詞，比讓模型自行回憶精確得多。規則寫得越具體，第一版可用的機率越高。 第二步：用「指到哪改到哪」的方式迭代 Artifacts 支援針對特定區域下修改指令，而不是整個重寫。實務上有效的迭代指令長這樣： 「時薪欄位改成可手動覆寫，預設值仍是月薪 ÷ 240。」 「加一個複製結果按鈕，複製成純文字，格式是每行一個級距。」 「手機版時把兩欄改成單欄，輸入框高度加大到 48px。」 「總額用 toLocaleString('zh-TW') 格式化。」 每次只改一件事。同時丟三個修改需求，模型容易在重寫時弄壞前面已經正確的部分——這是 Artifacts 使用上最常見的退步來源。 第三步：在面板裡直接測邊界值 因為成品當場可以點，測試成本趨近於零。固定測這幾組：輸入 0、輸入負數、輸入非數字、輸入極大值（例如加班 999 小時）、所有欄位留空。發現錯誤就把實際行為描述回去：「加班時

由 FeiYueh 親自審稿驗證 · 最後更新於 2026-09-20. Independently maintained — not AI-generated boilerplate.