Claude Design 不是魔法，右側真的跑起來才算完成

先看右邊，不要只看左邊的 Done

Claude Design 的入口在 claude.ai/design，目前還是 Anthropic Labs 的研究預覽。它把 Claude 聊天室、UI 產生器、右側預覽畫布放在同一個工作區：你用白話講一個畫面，它試著直接生出 prototype。

我這次拿它做一個台灣小型咖啡店老闆每天早上會看的「每日營收儀表板」。題目很普通。店長要看今天賺多少、客單價有沒有掉、哪個品項賣得好，最好一眼就能拿去跟員工討論。

真正卡住的地方不是 prompt 寫得多漂亮。Claude 左邊會很認真地說它在做，最後甚至顯示完成；右側畫布卻可能丟出 file not found。如果只看聊天區，很容易以為已經好了。

從 New prototype 開始

打開 Claude Design 後，左側會出現建立 prototype 的表單。我這次選 Prototype、High fidelity，Design system 用預設的 Org default。

專案名稱我會取很醜但好找的名字，例如 EC cafe dashboard test 0529。Claude Design 會把最近專案都留在首頁，一天測幾個版本之後，太文青的名字反而很難回頭比對。

prompt 寫給店長看就好

我送出的需求大概是這樣：

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

這段沒有高級設計術語。重點是把「誰要用」跟「每天要看什麼」講清楚。只寫 dashboard 會太空，Claude 很容易給你一張看起來像美國 SaaS 後台的通用頁面。

送出後，畫面進到專案工作區。右側先顯示作品會出現在這裡，左側開始跑任務。

它會追問幾個細節

Claude Design 沒有直接一路做到底。它先問店名、分店數、金額格式。我回「晨光咖啡」、2–3 家分店、金額用 NT$ 12,800 這種台灣店家看得懂的格式。

這張圖剛好拍到一個很煩的小錯誤：左側冒出 [unknown] missing EndStreamResponse。我等了大概 2–3 分鐘，沒有立刻重整，後面它還是繼續寫。

第一次用會不安。你不知道它是真的壞掉，還是訊息串流斷了但背景還在跑。我會先看左側任務有沒有繼續更新、右側有沒有檔案 tab 出來；如果幾分鐘都沒動，再補一句要求它重新產出。

file not found 要直接叫它重寫

第一次它說完成後，右側預覽顯示的是 file not found。

這裡跟 v0、Lovable 的手感差很多。v0 和 Lovable 會把 preview / deploy 狀態做得比較像產品流程；Claude Design 現在比較像研究工具，聊天區和畫布區偶爾不同步。左邊講得很有把握，右邊沒有東西可以看。

我補送的修正 prompt 很直接：

右側預覽 iframe 現在顯示 file not found，請不要只回覆說明，請重新寫出一個可預覽、可互動的 HTML 檔案。維持同一個咖啡店每日營收儀表板需求：左側篩選器、三張 KPI 卡、7 天折線圖、品項銷售長條圖；篩選條件點了要真的重算，並確認預覽畫面能正常渲染。

這時候不要只說「幫我檢查」。我會明確要求它重寫可預覽檔案，並確認互動有反應。

成品要另外打開看

修正後它產出 cafe-dashboard.html。我把成品預覽另外打開確認，這次畫面有晨光咖啡標題、左側篩選、KPI、圖表，也能拿來討論今天的店況。

這張才算完成。它還不是 production UI，也不該直接丟給工程師照抄；但拿來跟店長或設計師對第一版方向，夠了。

從建立專案到修掉 file not found，我這輪大概花 10 分鐘。熟手可能 5 分鐘拿到第一版，但要預留一點時間處理它偶爾抽風。

我會拿它做什麼

Claude Design 適合處理「我腦中有畫面，但講不清楚」的早期稿。像這種店內營運儀表板就很適合，因為店長不一定會寫規格，卻看得懂畫面哪裡怪。

我不會把它當正式設計工具。需要精準品牌規範、複雜互動、要交付前端元件規格，Figma Make、v0、Lovable 或正式設計流程還是穩很多。

這次最有用的提醒很簡單：Claude Design 的完成標準不是左邊說 Done，是右邊真的渲染出畫面。看到 file not found，就停下來修。