How·tutorial·

How to use Claude Design: prompt-to-prototype workflow and real testing notes

A hands-on guide to Claude Design using a cafe revenue dashboard prototype, including project setup, prompts, follow-up questions, screenshots, and current preview-version friction.

新知識:這個工具/功能解決了什麼

Claude Design 是 Anthropic 放在 claude.ai/design 的研究預覽工具。它跟一般文字轉圖片不太一樣：目標不是吐一張漂亮圖，而是把自然語言、截圖、Figma、文件或 codebase 變成可互動、可迭代的設計專案。官方 Artifacts 文件也把這類產物定位成「可分享的 app、工具、視覺化或內容」，而不是單張靜態素材。

我這次用已登入的 Claude Design 實測，任務是做一個「台灣小型咖啡店每日營收儀表板」。老實說，這個產品比較適合 PM、創辦人、行銷或店長先把想法講清楚，做出一個能討論的 prototype；不是要取代設計師把最後 5% 品牌細節磨到完美。

實測時有一個重點：Claude Design 會先問問題，而不是完全照 prompt 盲做。這點我覺得是優點，但目前研究預覽版穩定性還不夠，我遇到一次 missing EndStreamResponse，後續生成也沒有順利產出完整可截的 prototype。所以這篇會誠實分成「正常使用流程」跟「我踩到的坑」。

要做什麼:本文會帶你完成的具體任務

看完你會知道怎麼用 Claude Design 從一句需求開始，做出一個可以給團隊討論的互動原型。

  • 開啟 Claude Design 並建立新 prototype 專案
  • 選擇 Design System、Wireframe / High fidelity
  • 寫一個比較不會產出泛用 AI 介面的 prompt
  • 回答 Claude Design 的追問，讓成品更貼近實際場景
  • 遇到卡住或預覽截不到時，知道該怎麼排查

怎麼做:整體流程(高層次)

整體流程可以想成四步。第一步是建立專案，不要直接在一般 Claude chat 裡要求「幫我設計」。一般 chat 也能生 Artifacts，但 Claude Design 的專案頁才有 Design Files、Design System、Prototype / Slide deck 等工作流。

第二步是給 context。Claude Design 首頁會提示你可以加 screenshot、attach codebase、拖 Figma file，或選既有 Design System。這是它跟一般生成工具拉開差距的地方：如果你只寫「做一個 dashboard」，它很容易做出看起來像模板的東西；如果你給品牌、資料欄位、使用者情境，結果會更接近真的可用。

第三步是回答問題。我這次要求咖啡店儀表板後，Claude Design 反問店名、分店數、金額格式、KPI 是否要比較昨天/上週。這其實很像設計師 kickoff 前會問的問題，對非設計背景的人很有幫助。

第四步才是迭代。初版出來後，不要只說「變漂亮」。要用具體句子改，例如「把 KPI 卡改成適合手機直式閱讀」、「把折線圖改成 7 天與上週同期比較」、「左側篩選器收合成頂部 dropdown」。

具體操作:逐步指令 + 截圖

步驟 1: 打開 Claude Design，不要從一般 chat 開始

進入 https://claude.ai/design。左側會看到 Prototype、Slide deck、From template。這次我要做互動儀表板，所以選 Prototype，Fidelity 選 High fidelity。

我實測時建立的專案名稱是：

EC cafe dashboard test 0529

建立後會進到專案頁，左側可放 Design System、Add screenshot、Attach codebase、Figma file。右側是後續產物區。

步驟 2: 用「場景 + 元件 + 風格 + 輸出」寫 prompt

我用的 prompt 如下，重點是不要只說「做 dashboard」，而是直接列出誰要用、要看什麼、畫面有哪些元件。

做一個台灣小型咖啡店老闆每天早上看的「每日營收儀表板」互動式單頁高保真原型。
畫面需要：左側篩選器（日期、分店、外帶/內用）、右上三張 KPI 卡（今日營收、客單價、回訪率）、中間 7 天營收折線圖、下方品項銷售長條圖。
風格乾淨、不要太花，適合非設計背景的店長直接拿去跟員工討論。
請產出可點的 prototype，不要只寫說明。

這種寫法比「幫我做一個漂亮的咖啡店 dashboard」穩很多，因為它把驗收條件講清楚了。

步驟 3: 回答 Claude Design 的追問

送出後，Claude Design 沒有立刻硬做，而是先問幾個問題：店名要不要用範例、分店數、金額格式、KPI 是否要顯示比較值。這裡我選了「晨光咖啡」、「2–3 家」、「NT$ 12,800」。

這一步不要急著全部選 Decide for me。你越像真實老闆一樣回答，它越不會產出那種看起來很 AI、但不知道要給誰用的畫面。

步驟 4: 如果在一般 Claude chat 裡做，要注意會卡在生成

我也測了在一般 Claude chat 直接要求「請用 Claude Design / Artifacts 做 prototype」。結果頁面有進入回應流程，但長時間停在 loading，沒有看到 artifact 預覽。這條路我不建議當主要流程。

如果你要用 Claude Design，就從 /design 專案頁開始；如果你只是要一段 HTML / React artifact，一般 Claude chat 才比較合理。

步驟 5: 研究預覽版卡住時怎麼處理

我這次在 Design 專案頁遇到 missing EndStreamResponse，而且後續沒有成功拿到完整 prototype 截圖。這不代表 Claude Design 不能用，但代表現在還不能把它當成穩定交付工具。

建議排查順序：

1. 先按 Retry，不要立刻重開一個新專案
2. 如果問題重複，縮小 prompt：先做單頁 dashboard，不要同時要求多頁互動
3. 把 Design System 暫時清掉，排除既有資產造成的問題
4. 改用 Wireframe 先出結構，再升成 High fidelity
5. 成品若在 iframe 預覽中，優先用 Share / Export / Publish 連結截圖，不要只截父頁

我實測有做到：登入 Claude Design、建立 project、送出 prototype prompt、回答 Claude 的問題、截到專案流程與錯誤狀態。沒有做到：成功輸出完整可點 prototype。因此本文沒有假裝已經拿到最終成品圖。

結論:什麼時候用、什麼時候不要用

Claude Design 最適合用在「把模糊想法變成可以討論的第一版」。例如老闆想看營運儀表板、PM 想講清楚新功能 flow、行銷想做一頁活動頁草稿。它的價值不是省掉設計，而是讓討論不要停在文字。

不適合的場景也很明確：你明天就要交付正式品牌稿、需要像 Figma 那樣精準控間距與元件狀態、或團隊不能接受研究預覽版偶發卡住，那就不要把它放在交付鏈最後一站。

如果只記住一件事：Claude Design 要用「真實場景 + 明確元件 + 可驗收輸出」來 prompt；它不是魔法設計師，比較像一個很快的原型助手。