為什麼 2024 那批 Artifacts 教學已過時
Claude Artifacts 2024/06 推出,繁中 SERP 上多數教學是當時寫的——2 年後 Artifacts 已大幅升級，但繁中沒人補上**:
- 入門教學(4-5 篇):vocus / Techritual / abmedia / Simon Liu Medium — 「3 分鐘做小工具」淺度示範**,1-2 年前舊文
- vs ChatGPT Canvas 對比(2-3 篇，英文多):makeuseof / analytics insight — 繁中只 1 篇 mindstudio,且偏淺**
- 官方文件:Claude Help Center / Anthropic Blog — 英文 / 規格描述
- 社群短文:Threads / DotAI — 單功能展示，不成系統**
最大內容空缺:
- 2026 重大新功能完全沒人寫:MCP server 整合、20MB 持久儲存、Live Artifacts
- 7 種輸出類型最佳場景 — 沒人系統整理
- 非工程師範例 — 對手範例都偏程式設計
- 四平台對比(Artifacts vs Canvas vs Gem vs v0/Bolt)— 英文 1 篇，繁中空白
- 何時該停止疊 Artifacts — 升級部署決策完全沒人寫
這篇補上。
Claude Artifacts 是什麼？(60 秒理解)
2024/06 推出時的定位:Claude 的右側即時預覽窗——寫程式時可即時跑、改、看。
2026/05 的實際狀態:嵌入式 mini-app 平台——可連外部 API、可儲存資料、可分享 URL、可整合 MCP。
跟「讓 AI 寫 code」**根本不同的 3 點
- 即時預覽:不用切到瀏覽器跑、直接看結果
- 可互動:HTML / React 元件你能點、能填、能跑
- 可持久(2026 新):20MB 儲存 + Live Artifacts reopen 自動 refresh
跟 Claude Code 的根本差異
| 維度 | Claude Artifacts | Claude Code |
|---|---|---|
| 目的 | 即時 prototype / 小工具 | 完整軟體開發 |
| 介面 | Claude.ai 右側預覽窗 | 終端機 CLI |
| 檔案系統 | Sandbox(20MB) | 你的本機檔案系統 |
| Git | ❌ | ✅ |
| 適合 | 非工程師 / 快速原型 | 工程師 / production |
🎨 7 種輸出類型 + 最佳場景
1. HTML / CSS / JS（即時網頁）
最佳場景:單頁工具 / 動態 demo / 互動表單
範例：番茄鐘計時器、單頁問卷、互動 quiz
2. React 元件（互動 UI）
最佳場景:複雜互動 / 多狀態 UI
範例：儀表板、購物車、表單驗證器
3. SVG / Mermaid（視覺化、圖表）
最佳場景:架構圖 / 流程圖 / 自訂 icon
範例：系統架構圖、決策樹、Mermaid 流程圖
4. Markdown / 文件
最佳場景:結構化文件 / 報告 / 部落格草稿
範例：會議紀錄、產品 spec、文章草稿
5. 程式碼檔（任何語言）
最佳場景:腳本 / config / 範例
範例:Python 腳本、shell script、API 範例
6. Dashboard / 資料視覺化
最佳場景:資料探索 / KPI 監控 / 報表
範例：銷售儀表板、健康追蹤、專案進度視覺化
7. PDF 預覽
最佳場景:簡報草稿 / 文件成品
範例：履歷、提案、客戶交付物
觸發條件：為什麼有時 Claude 不會自動生 Artifact?
Claude 自動生 Artifact 的判斷依據:
- 內容夠大（超過 ~80 行）
- 需要視覺化 / 互動
- 是「獨立交付物」而非對話一部分
沒生 Artifact 的常見原因:
- 內容太短(< 80 行)
- 明確問問題(「怎麼寫 X」而非「幫我做 X」)
- 設定沒開:Settings → Capabilities → Create AI-powered artifacts 沒打勾
🚀 2026 新功能盤點（對手沒寫）
1. MCP server 整合
新功能:Artifact 內可呼叫 MCP server——讓 Artifact 連 Google Calendar / Slack / Notion / 自架 API。
真實範例:
- 「今天行事曆 dashboard」Artifact**——Claude 寫一個 Artifact,連我的 Google Calendar MCP,自動拉今天的會議
- 「Slack 訊息整理」Artifact**——連 Slack MCP,自動摘要未讀訊息**
設定:Artifact prompt 內加「請呼叫 [MCP server 名稱] 的 [tool] 函數」——Claude 會自動處理。
2. 20MB 持久儲存
新功能:Artifact 自帶資料庫——localStorage / IndexedDB,reopen 不會丟資料。
真實範例:
- 「個人健康追蹤 dashboard」——每天輸入體重 / 血壓,資料永久儲存
- 「讀書筆記管理」——標記讀過的書 + 筆記,reopen 直接看到歷史
3. Live Artifacts(reopen 自動 refresh)
新功能:Artifact 設定為「Live」後,每次 reopen 自動執行最新邏輯**（例如拉最新 API 資料）。
真實範例:
- 「股價 dashboard」——reopen 自動拉最新股價
- 「新聞摘要」——reopen 自動拉今天的新 RSS
設定:Artifact 內呼叫 fetch() 並開啟「Live mode」toggle。
4. 直接 API call
新功能:Artifact 內可直接打外部 API（過去要透過 MCP）。
用法:
fetch('https://api.example.com/data')
.then(r => r.json())
.then(data => render(data))注意:CORS 限制仍存在——Artifact 不能打所有 API,目標 API 必須支援 CORS 或透過 MCP server 代理。
💼 5 個非工程師 Artifact 範例（差異化招牌）
對手範例都偏程式設計——Mason 給 5 個 SOHO / 內容創作者真的用得到。
範例 1：預算試算器（SOHO 顧問報價）
用 prompt:
幫我做一個「**SOHO 顧問報價試算器**」**Artifact:
【輸入欄位】
- 服務類型(設計 / 內容 / 諮詢)
- 預計工時
- 客戶規模(個人 / 小團隊 / 中大型)
- 報價型態(按時計費 / 專案總價)
【輸出】
- 建議報價區間(NT$)
- 含 / 未稅試算
- 9A vs 9B 稅務影響
【設計】
- 表格 + slider
- 一鍵複製成報價單格式用途:接案者每次報價前 5 分鐘填一填，避免報太低**。
範例 2：會議 ROI 計算
用 prompt:
幫我做「**會議 ROI 計算器**」**:
【輸入】
- 參與人數
- 每人時薪
- 會議時長(小時)
- 預期決策影響金額
【輸出】
- 會議「**成本**」**(人 × 時薪 × 時長)
- ROI 比率(影響金額 ÷ 成本)
- 警示:「**這場會議的成本是 NT$X,**值得嗎?**」**用途:內訓 / 員工會議前先試算,避免無意義會議。
範例 3：社群文案 A/B 測試表
用 prompt:
幫我做「**社群文案 A/B 測試管理**」**Artifact:
【欄位】
- 文案 A / B(文字輸入)
- 平台(FB / IG / LinkedIn / Threads)
- 發布時間
- KPI 目標(讚數 / 留言 / 點擊)
【輸出】
- 結果記錄
- A vs B 對比視覺化
- 「**贏家文案特徵**」**自動分析
【儲存】
- 用 20MB 持久儲存,**reopen 看歷史**範例 4：健康追蹤 dashboard
用 prompt:
幫我做「**個人健康追蹤 dashboard**」**:
【輸入】
- 每日體重 / 血壓 / 睡眠時間
- 運動類型 + 時長
- 心情指數(1-10)
【輸出】
- 時間軸圖表(過去 30 天趨勢)
- 異常警示(體重突然升 / 降)
- 月度摘要
【儲存】
- 用 20MB 持久儲存
- 可匯出 CSV 給醫師看警語:這是個人追蹤工具，不取代醫師——對應 健保 AI 解讀**。
範例 5：課程進度視覺化（線上課程 / 自學）
用 prompt:
幫我做「**線上課程進度追蹤**」**:
【輸入】
- 課程名稱 + 總集數
- 已看集數
- 筆記要點(每集)
- 完成日期
【輸出】
- 進度條(看了 X / Y 集)
- 預估完成日期(按目前速度)
- 筆記摘要(各集要點清單)
- Mermaid 知識圖(集集之間的關係)用途:邊上課邊整理,比 Notion 更輕量。
⚖️ Artifacts vs Canvas vs Gemini Gem vs v0/Bolt（四平台對比）
| 維度 | Claude Artifacts | ChatGPT Canvas | Gemini Gem | v0 / Bolt.new |
|---|---|---|---|---|
| 訂閱 | Claude Pro $20 | ChatGPT Plus $20 | Gemini Pro $20 | v0 免費 / Pro $20 |
| 底層模型 | Claude Opus 4.7 | GPT-5 | Gemini Pro | Claude / GPT（可選） |
| 即時預覽 | ✅ | ✅ | 部分 | ✅ |
| MCP 整合 | ✅(2026) | ❌ | 部分 | ❌ |
| 持久儲存 | ✅ 20MB | ❌ | ❌ | ✅（部署版） |
| Live 模式 | ✅(2026) | ❌ | ❌ | ✅ |
| 可直接部署 | ❌（只在 Claude.ai） | ❌ | ❌ | ✅(Vercel 一鍵) |
| 適合 | 快速原型 + MCP 工具 | 邊聊邊寫 | Google 生態整合 | 正式 web app 部署 |
4 種需求情境決策
| 需求 | 選哪個 |
|---|---|
| 個人快速工具 / 試算器 | Artifacts |
| 寫文件邊預覽 | Canvas（內建在 ChatGPT） |
| Google 生態整合 | Gemini Gem |
| 正式 web app 部署 | v0 / Bolt → 詳見 v0/Bolt 文 |
為什麼可以雙平台並用？
Artifacts + v0/Bolt 工作流:
- Artifacts 做原型(5 分鐘出 MVP)
- 驗證可行後,把 prompt 改丟 v0/Bolt
- v0/Bolt 生 production-ready code + 一鍵部署 Vercel
- 正式上線
Mason 自己這樣用——Artifacts 是「草稿區」,v0/Bolt 是「出版區」。
⚠️ 5 個 Artifacts Anti-pattern
反模式 1：一次塞 5 個需求（版本爆炸）
症狀:「幫我做表單 + 計算 + 儲存 + 匯出 + 分享」——Claude 改了 5 版，每版只能用 60%**。
解法:一次一個需求,做完一個再加下一個——iteration 才穩。
反模式 2：忘了 Publish 之後丟失
症狀:對話結束，Artifact 找不到了**。
解法:
- 點 Artifact 右上角「Publish」——生成持久 URL
- 儲存到 Project（放進 Project Knowledge）
- 匯出原始碼（右上角 download）
反模式 3：把 Artifacts 當 production 用
症狀:Artifact 給 50 個用戶用,遇到並發問題崩潰。
解法:Artifact 是 prototype tier,並發 > 5 人就該升級:v0/Bolt + Vercel 部署。
反模式 4：不寫 README 給後來的自己
症狀:3 個月後 reopen 自己的 Artifact,忘記怎麼用。
解法:Artifact 內第一段加說明:
<!--
功能:SOHO 顧問報價試算器
作者:Mason
最後更新:2026/05
使用:填 3 個欄位 → 點「**算**」**
-->反模式 5：改太多版本失去歷史脈絡
症狀:Claude 改了 20 版,最早的版本還比較好——回不去。
解法:重要版本主動 Publish 存檔——Publish 後的版本可回溯;沒 Publish 的會被覆蓋。
🚀 從 Artifacts 升級到正式部署
何時該停止疊 Artifacts?
3 個信號:
- 使用者超過 5 人(Artifact 並發吃緊)
- 要連自己的資料庫(Artifact 只有 20MB sandbox)
- 要自訂網域 / SEO(Artifact 只能在 claude.ai/artifacts URL)
升級路徑
選項 1:v0 / Bolt.new + Vercel（最簡單）
- 把 Artifact prompt 丟進 v0 或 Bolt.new
- v0/Bolt 生 production-ready React + Next.js code
- 一鍵部署到 Vercel / Netlify
- 詳見 v0/Bolt 文
選項 2:Claude Code + 自架（進階）
- 用 Claude Code 把 Artifact 重寫成完整 Next.js / Astro 專案
- 部署到 Vercel / Cloudflare Pages
部署 SOP
- Artifact 內 export source code（右上角 download）
- 建 Next.js / Astro 專案（用 v0/Bolt 或 Claude Code）
- 整合資料庫(Supabase / Firebase / SQLite)
- 部署 Vercel / Netlify / Cloudflare Pages
- 加自訂網域
時程:Artifact 到部署 = 1-2 天（熟練後）。
❓ FAQ
Claude Artifacts 免費版能用嗎？有什麼限制？
Free 版可用,但有限制:
- 每天有訊息上限（用滿就要等）
- 不能用 Sonnet / Opus（只能 Haiku）
- 無 Live Artifacts（進階功能限 Pro）
Pro $20 後:配額大幅放寬 + Sonnet / Opus 隨用 + 所有新功能
Mason 觀察:Artifacts 是 Pro 訂閱最有感的功能之一——省下大量「切到瀏覽器測試」的時間**。
Artifacts 做出來的東西可以給別人用嗎？
可以，3 種分享方式**:
- Publish URL:Artifact 右上角「Publish」 → 生成公開連結，任何人都能用**
- 匯出 source code:下載 HTML / React 代碼,自己部署
- 加進 Project Knowledge:Team 方案內共享
限制:Artifact 公開後,Anthropic 仍可能限制超高流量——真要對外服務，升級到 v0/Bolt + Vercel。
Artifacts vs ChatGPT Canvas 哪個強？
用途差異:
Artifacts:獨立交付物——做出來是「一個工具」（計算器、dashboard、表單）
Canvas:寫作 + 邊聊邊改——做出來是「文件」（文章、報告、代碼）
Mason 的選擇:
- 做工具 / 應用 → Artifacts（強）
- 寫文章 / 報告 → Canvas（順）
- 2026 新功能(MCP / Live)Artifacts 領先
我的 Artifacts 沒出現，是為什麼？
3 個常見原因:
- 設定沒開:Settings → Capabilities → 勾「Create AI-powered artifacts」
- 內容太短:< 80 行 Claude 不會自動生 Artifact → prompt 加「請生成 Artifact」強制觸發
- Claude 判斷不是「獨立交付物」:問題型 prompt(「怎麼寫」)Claude 不生,任務型（「幫我做」）會生
強制方法:prompt 開頭加「請以 Artifact 形式輸出」——Claude 一定生。
Artifacts 做出來的東西能變成正式網站嗎？
可以，但需要「升級」****:
升級 3 條路:
- v0 / Bolt.new + Vercel（最簡單）——把 Artifact prompt 丟進 v0,一鍵部署**
- Claude Code 重寫成 Next.js / Astro 專案（進階）
- 手動 export + 自架（技術老手）
詳細路徑 → v0/Bolt 完整教學
Mason 的觀察:Artifact 是「驗證 idea 是否可行」的最佳工具——驗證後升級部署，省下 80% 開發前期時間。
⚠️ 警語
- Artifacts 是 prototype tier——不適合 production 並發 > 5 人
- 20MB 持久儲存 = 單一使用者的本機 localStorage——不要當共享資料庫用
- MCP 整合進 Artifact → 跟 Claude Code Hooks 一樣有安全考量,不要連 production database
權威來源:
深入閱讀:➜ Claude 全產品 Pillar | Claude Projects 完整教學 | Claude Memory 教學 | v0 / Bolt 完整教學 | MCP 協議入門