Anthropic 在 2026 年 4 月 17 日推出 Claude Design，一個讓使用者用 prompt 生成網站、投影片、原型的實驗性工具。官方公告發布 24 小時內在 X 累積超過 10 萬讚，Figma 股價當天下跌 9%，社群直接開始玩「It is so over」梗。
這篇整理 Claude Design 的功能定位、實際使用流程、以及跟 v0、Lovable、Figma Make 這些既有工具的差異。內容來自官方公告、社群實測分享和開發者社群討論。
兩分鐘出一個網站是真的
Claude Design 最大的價值在於壓縮「從想法到 demo」的時間。 它沒打算取代誰，定位是加速器。
社群分享的典型流程：把想做的網站概念丟進去（包含主題、素材、色調偏好、layout 期望），按下 generate，兩分鐘後拿到一個能跑的 React 網站，hero 區塊、分類 tag、內容 grid 都有。
對第一次做網站的人會是救星。過去要先在 Figma 拉 wireframe、再找 designer 弄色票、再請工程師寫 code，整條鏈跑完可能一週。Claude Design 把這段壓到十分鐘以內。
開發流程被它推了一把
在 Claude Design 之前，用 Claude Code 寫網站的流程通常是：腦袋裡想半天要什麼配色、哪些模組、導航怎麼放，然後在程式碼裡慢慢堆。視覺感要在腦中模擬，思考負擔重。
Claude Design 加進來之後可行的流程：
- 先用 Claude Design 生出基礎架構。色調、排版、模組都先對齊
- Export 出檔案（完整網站或 wireframe 都行）
- 丟回 Claude Code 調細節。動畫、互動、資料串接都在這步處理
兩個工具接棒。Claude Design 處理「視覺想像」，Claude Code 處理「功能實作」，各自做自己擅長的事。Claude Code 細節整理在 Claude Code 完整教學。
它支援 Figma import，本來就有 Figma 檔的話可以直接導進來繼續做。對已經有設計資產的團隊來說門檻很低。
缺點：成品還是需要人收尾
「能跑」跟「好看」中間還有一段距離。色調要不要再灰一點、標題的字重對不對、hover 狀態怎麼處理、留白節奏順不順，這些細節目前 AI 還不太會幫忙收。
開發者社群的形容很精準：「這工具現在 bug 很多，但它在預告方向」。設計師社群的反饋也類似：設計系統上傳功能很強，但生出來的 UI 常常是半成品感，需要人再收一次尾。
換句話說，Claude Design 能幫忙完成 80 分的起點，但要從 80 到 95 還是需要人的判斷。沒有網頁設計經驗的話，生出來的成品可能會有說不上哪裡怪的尷尬感。
一個 tip：用 AI 寫 prompt 給 AI
對「怎麼下 Claude Design 的 prompt」毫無頭緒時，可以先去跟另一個 AI（Claude、ChatGPT、Gemini 都行）說：「請幫忙寫一份用 Claude Design 做 X 類型網站的完整 design prompt，包含配色、字體、layout、互動細節。」
把產出的 prompt 再貼回 Claude Design，成品品質會明顯提升。背後的邏輯是：一個清晰的結構化 prompt 對 AI 生成品質的加成，遠大於在工具裡反覆 tweak。 前置十分鐘寫好 prompt，抵得上後面半小時的微調。Prompt 的寫法整理在 提示詞完整指南。
跟 v0、Lovable、Figma Make 差在哪
社群目前的共識：
- v0.dev：設計美感、速度快，適合做品牌原型。優點是成品視覺強，缺點是需要 Vercel 生態。
- Lovable：早期想法快速成形，但維護性差，容易變「vibe-coded 堆屎山」。
- Bolt.new：快速前端，全棧整合弱一點。
- Figma Make：設計師向協作工具，pixel-perfect 沒問題，但跟 code 的連接弱。
- Claude Design：強項在「看懂你要什麼」和「設計系統整合」。用的是 Opus 4.7 vision model，不只生 code，會先理解再生成。跟 Claude Code 的 handoff 很順。
開發者社群的觀察：Claude Design 跟 v0、Lovable 最大的差別在出發點。v0 把重點放在出 code，Claude Design 把重點放在「先看懂」。一個能聽懂使用者意圖的工具，跟一個按指令生東西的工具，長期使用感差很多。Claude Code vs Cursor 的對比可以再看 Claude Code vs Cursor。
Figma 會死嗎
發布當天 Figma 股價跌 9%，社群瘋玩「It is so over」梗。從產品定位看，這是過度反應。
Figma 的強項在於協作和pixel-perfect 控制。團隊裡設計師、PM、工程師一起看一個檔案、留評論、切版，這塊 Claude Design 目前沒有要碰。
更合理的劇本是：Figma 的定位會從「設計的起點」變成「設計的中繼站」。起點被 Claude Design 搶走，但中間的精修、協作、handoff 這塊 Figma 還有位子。
關鍵在 Anthropic 的整體布局。Claude Design 放進產線一起看：
- Design（Claude Design）：想法到 demo
- Code（Claude Code）：demo 到 production
- Agent（Claude API）：production 上線後的自動化
這是一條完整的創造產線。Figma、Lovable、Vercel 各自守一塊，Anthropic 打的是整條鏈。
適用場景
綜合社群實測整理：
- 適合的場景：從想法到 demo 的前期階段、做 wireframe 跟客戶對齊、內部工具快速原型、寫部落格文章時順手做配圖 demo
- 不適合的場景：品牌官網最終版、需要 pixel-perfect 的頁面、需要複雜動畫的互動
它是一個加速器，不要拿來當終點用。把它當 Figma 的替代品會失望，把它當「從 0 到 1 的省時工具」會很順手。
接下來會關注的方向
Anthropic 的 Labs 產品線最近持續有新東西（Imagine、Skills、Agent SDK），Claude Design 只是其中一個。值得觀察的是這些工具之間的整合：Design 出來的檔案丟進 Code 會多順、Code 跑完丟給 Agent 會怎麼運作。
整條產線真的跑起來的那天，獨立開發者跟小團隊的生產力會再上一個台階。
延伸閱讀
小企鵝的經驗
Claude Design 還沒進日常工作流。這篇從產品定位、社群實測、官方公告整理而來，沒有把它寫成第一手體驗。要看主力工具的踩坑分享，可以看 Claude Code 完整教學 和 提示詞完整指南。
常見問題
Q: Claude Design 是什麼？
Anthropic 在 2026 年 4 月 17 日推出的實驗性工具，讓使用者透過 prompt 生成網站、投影片、原型。使用 Claude Opus 4.7 vision model，能先理解意圖再生成，支援 Figma import 和 Claude Code handoff。
Q: Claude Design 會取代 Figma 嗎？
不會完全取代。Claude Design 擅長「從想法到 demo」的前期加速，Figma 仍在 pixel-perfect 控制和協作這塊具有優勢。更合理的定位是：Figma 從「設計的起點」變成「設計的中繼站」。
Q: Claude Design 跟 v0、Lovable、Bolt 差在哪？
v0 重視出 code 的美感速度、Lovable 偏早期想法快速成形、Bolt 強在全棧前端。Claude Design 的差異化在「先看懂再生成」和設計系統整合，加上跟 Claude Code 的 handoff 很順。
Q: 新手能直接用 Claude Design 做出好看的網站嗎？
能做出「能跑」的網站沒問題，但「能跑」跟「好看」之間還有距離。色調拿捏、動畫節奏、細節視覺這些目前 AI 還不太會幫你收，需要一點網頁設計經驗才能從 80 分推到 95 分。
Claude Design 目前開放給所有 Claude 訂戶試用，免費版也能體驗。官方頁面：anthropic.com/news/claude-design-anthropic-labs
本文以 Anthropic 官方公告與公開社群討論整理而成。
整理：Penna｜小企鵝 Penchan