開啟 3 天免費試用
註冊即可免費體驗全部高級功能。
*只限新用戶；每位用戶只可獲得一次試用。
如何使用 Claude Artifacts 建立並修訂原型
Olivia Park
2026年9月4日· 更新於 2026年9月5日· 8 分鐘讀完
要使用 Claude Artifacts 製作原型，先定義一條可測試的用戶路徑，再要求最小可運行切片，同時檢查預覽與程式碼，並按書面驗收矩陣逐輪修訂。Artifact 可以把想法變成互動頁面，但預覽能夠運行不代表設計已經安全、準確、無障礙、易於維護或適合生產。［1］
本文使用不含真實僱員資料的「會議成本估算器」合成例子。基本功能可先看Claude 入門指南，通用任務界線則見實用 AI 工作框架。
開始前請確認已啟用 Code execution and file creation。Anthropic 目前指引 Free、Pro 和 Max 用戶前往 Settings > Capabilities，Team 和 Enterprise 則由組織擁有者管理同一功能。選單名稱和可用性可能改變，應以實際操作日介面為準。［1］
關鍵要點
- 讓 Claude 開始建立前先寫 brief 和非目標。
- 第一個 Artifact 只實作一條完整用戶路徑。
- 親自測試正常、邊界、失敗、復原和無障礙情況。
- 同時檢查程式碼和行為；漂亮預覽可能隱藏脆弱邏輯。
- 每輪只改一個變數並記錄原因。
- 分享前確認版本、受眾和相關附件。
- 生產軟件必須在真實程式碼庫中重建和審核。
甚麼時候適合使用 Claude Artifacts 做原型？
好原型用較低成本回答一個具體問題：用戶能否理解流程、計算說明是否清楚，或互動次序是否自然。它不應冒充生產可靠性證明。
Anthropic 把 Artifacts 描述為在獨立工作區顯示的實質、自包含內容，包括程式碼、文件、圖表和互動組件。Claude 可以在對話中更新 Artifact，用戶亦能查看不同版本。［1］ 這適合受控探索，前提是測試問題維持不變。
| 要回答的問題 | 適合的 Artifact | 不能由它證明 |
|---|---|---|
| 用戶能否完成一條路徑 | 小型互動介面 | 大規模生產可用性 |
| 概念是否易明 | 圖解或說明頁 | 未經審核的技術正確性 |
| 計算版面是否清楚 | 使用合成資料的計算器 | 所有輸入及地區均準確 |
| 文案層級是否合理 | 可點選內容模型 | 品牌、法律或無障礙批准 |
| 資料檢視能否支援討論 | 合成圖表 | 私有來源資料是否真確 |
更一般的程式碼界線見用 AI 處理編程任務的指南。
如何撰寫原型 brief？
先在對話以外撰寫 brief，指定一個用戶、一個問題、一條成功路徑、明確非目標，以及接受修訂所需的證據。
原型：會議成本估算器
用戶：準備內部議程的主持人
問題：用戶能否在安排會議前理解成本？
輸入：人數、分鐘、合成時薪
輸出：估算結果和自然語言計算過程
成功：只用鍵盤即可完成，錯誤輸入有明確回應
非目標：認證、儲存、薪酬整合、分析和部署
資料規則：只用合成數值，不含姓名和薪酬紀錄
可以說明目標視窗和互動限制，但不必預先指定整套生產技術。請 Claude 先列出歧義，只解決會影響測試問題的部分，其餘加入非目標。
如需上載資料，使用最少的獲准節錄。Anthropic 記錄支援的檔案類型，亦說明不同檔案的處理方式有差異。［3］ 大量私有資料不會自動令原型更可靠。
如何產生最小可運行切片？
1. 請求一條端到端路徑
第一版只需要單一畫面、三個輸入、一個動作、一個結果和重設。要求使用本機合成資料，不做網絡請求、帳戶系統、外部追蹤或持久儲存。
根據 brief 建立互動式 Artifact。
只實作成功計算路徑和可見驗證。
使用語意標籤和可用鍵盤操作的控制項。
不要加入認證、API、儲存、分析或真實僱員資料。
在結果旁以自然語言顯示公式。
完成後另列假設和未測試行為。
2. 檢查介面契約
顏色之前先檢查每個輸入是否有標籤、單位是否清楚、操作是否明確、輸出是否解釋含義。一個沒有貨幣、時間基準及捨入規則的「成本」，即使數字會改變也不能驗收。
3. 檢查產生的程式碼
在可用的程式碼檢視中找隱藏預設、魔法數字、不安全 HTML 注入、網絡存取、無界輸入和不能重設的狀態。Anthropic 說明可以切換 Artifact 版本並透過對話修改，但版本列表不是原始碼管理。［1］ 深入檢查可使用AI 產生程式碼審核清單。
如何先建立原型驗收矩陣？
在要求「改善」前寫測試，否則每輪只會優化最顯眼的部分。
| 編號 | 情況 | 輸入 | 預期觀察 | 狀態 |
|---|---|---|---|---|
| N1 | 正常 | 6 人、30 分鐘、有效時薪 | 公式與結果一致 | 未測試 |
| B1 | 下限 | 1 人、1 分鐘 | 接受且不捨入為零 | 未測試 |
| B2 | 大數值 | 已定義上限 | 介面仍清晰並可回應 | 未測試 |
| F1 | 缺值 | 時長留空 | 指定欄位報錯且無結果 | 未測試 |
| F2 | 無效值 | 人數為負 | 拒絕並清除舊結果 | 未測試 |
| A1 | 鍵盤 | Tab、輸入、提交、重設 | 焦點次序合理且可見 | 未測試 |
| A2 | 縮放 | 200% | 指示及操作不被裁走 | 未測試 |
矩陣是人工觀察工具，不是自動化測試套件。每次記錄 Artifact 版本、瀏覽器、日期、輸入、實際結果和證據。Claude 表示「已修正」不能把狀態改成通過。
如何測試預覽和程式碼？
測試預期路徑
先獨立計算一個正常結果，核對人數、時間、時薪、單位和捨入規則。
測試邊界
再試零、一、已定義上限、小數、貼上文字和超長輸入；哪些值應被拒絕必須由產品決定，不能讓原型自行發明政策。
測試失敗及復原
提交缺值和無效值，檢查錯誤是否指向欄位、保留無關有效輸入、需要時清除過期結果，而且不用重新載入即可復原。程式碼中應先驗證再計算。
測試無障礙基礎
只用鍵盤完成流程，然後檢查焦點次序、可見焦點、標籤、錯誤關聯、對比度、200% 縮放，以及狀態是否只靠顏色表達。原型不能認證無障礙，但可提早揭示明顯障礙。
對照來源檢查假設
最後請 Claude 列出所有假設，逐項對照 brief 和程式碼。模型可能漏列假設或自信地給出錯誤解釋，Anthropic 亦建議核實重要資料。［4］ 遷移到程式碼庫測試時可參考AI 測試產生與核實指南。
如何進行單一變數修訂？
每輪建立一張修訂單，只寫一個失敗條件、證據和可改範圍。
修訂 R3
失敗項：F2 負數人數
觀察：輸入無效後舊結果仍顯示
所需改動：拒絕負數並清除舊結果
不可改動：公式、標籤、版面、顏色和最大值
證據：說明改動的程式碼路徑，並讓我重跑 F2
更新後先重跑失敗情況，再跑正常路徑及相鄰邊界，避免窄修正帶來回歸。不要同時修驗證、重設計卡片、改文案及新增匯出。版本日誌至少記錄目的、重跑檢查和保留或拒絕決定。
| 修訂 | 單一目的 | 重跑檢查 | 決定 |
|---|---|---|---|
| R1 | 建立最小流程 | N1、F1 | 基線 |
| R2 | 增加鍵盤焦點 | A1、N1 | 保留 |
| R3 | 清除過期結果 | F2、N1、B1 | 覆測後保留 |
| R4 | 嘗試精簡文案 | A2、N1 | 拒絕，說明不清 |
分享或發佈 Artifact 前要檢查甚麼？
先選擇正確版本。Anthropic 按不同帳戶區分公開 publishing 與機構內 sharing，可用動作和受眾取決於帳戶及工作空間。［2］ 應在實際分享面板確認，不要單憑按鈕名稱推測私密性。
檢查相關對話和附件。Anthropic 提醒，共享 Artifact 可能令查看者取得建立對話內的附件及檔案。［2］ 公開示範最好由乾淨對話和合成資料開始。
分享紀錄應包括版本、矩陣結果、預期受眾、實際權限、所含資料、已知失敗、非目標、負責人和移除日期。如有 Logo、客戶名稱、專有設計或個人資料，先完成權利和私隱審核；「只是原型」不會縮小公開連結受眾。
如何交給生產團隊？
把 Artifact 當成行為參考，而非可部署套件。交接 brief、選定版本、驗收矩陣、已知失敗、版本日誌和獲准截圖，再由團隊在真實程式碼庫按架構、依賴、安全、無障礙、測試及發佈流程重建。
| 交接項目 | 能證明甚麼 |
|---|---|
| 原型 brief | 問題及非目標 |
| 選定版本 | 供後續實作的互動 |
| 驗收證據 | 實際人工觀察結果 |
| 開放問題 | 尚未證明的內容 |
| 生產負責人 | 誰決定架構及發佈 |
| 重建計劃 | 行為如何進入真實系統 |
不要未經審核便複製原型程式碼。先檢查依賴授權、資料流、錯誤處理、安全假設和測試。Canvas 長文修訂流程適合文件，但軟件交接需要更嚴格的程式碼庫控制。
最終檢查清單
- brief 指定一個用戶、問題、成功路徑和非目標。
- 輸入是最少、獲准的合成資料。
- 第一版只有一條完整用戶旅程。
- 預覽和程式碼均已檢查。
- 正常、邊界、失敗、復原和無障礙情況有紀錄。
- 每輪只改一個變數並重跑相鄰檢查。
- 分享前確認準確版本、實際受眾和相關附件。
- 生產實作回到真實程式碼庫及正式流程。
常見問題
甚麼是 Claude Artifact？
它是 Claude 在獨立工作區顯示的實質內容，例如程式碼、文件、圖表或互動組件，可透過對話修訂並查看版本。［1］
Artifact 等同生產應用程式嗎？
不等同。它不能證明生產安全、可靠性、無障礙、監察、資料管治或可維護性。
是否應讓 Claude 一次修好全部問題？
不應。每輪只處理一個失敗條件，固定其它變數，再重跑失敗項及相鄰情況。
預覽成功能證明計算正確嗎？
不能。必須獨立計算代表案例，檢查單位、捨入、預設、邊界及程式碼驗證。
Claude 自動修正後仍要測試嗎？
要。自動修正只是需要重新評估的新版本，不是通過測試的證據。
Artifact 可以公開發佈嗎？
是否可公開及受眾取決於帳戶和工作空間。Anthropic 目前區分公開發佈及機構內分享，操作前應檢查真實設定。［2］
查看者能看到附件嗎？
在部分分享情況中，查看者可能取得建立對話的相關附件。按最新官方說明覆核，公開示範盡量使用乾淨合成資料。［2］
生產工程師可直接使用產生的程式碼嗎？
只能作參考。生產實作應在真實程式碼庫按獲准依賴、架構、測試、無障礙、安全和發佈控制重建或完整審核。
VPN 能測試或部署 Claude Artifact 嗎？
不能。VPN 不能驗證原型、批准存取、審核程式碼或把 Artifact 轉為生產軟件。
來源
- Anthropic, “What are artifacts and how do I use them?” — https://support.claude.com/en/articles/9487310-what-are-artifacts-and-how-do-i-use-them
- Anthropic, “Publish and share artifacts” — https://support.claude.com/en/articles/9547008-publish-and-share-artifacts
- Anthropic, “Upload files to Claude” — https://support.claude.com/en/articles/8241126-upload-files-to-claude
- Anthropic, “Claude is providing incorrect or misleading responses” — https://support.claude.com/en/articles/8525154-claude-is-providing-incorrect-or-misleading-responses-what-s-going-on
Sources checked 2026 年 9 月 5 日。
