認識 Claude Design

Claude Design 是 Anthropic（Claude 大模型的出品方）推出的 AI 原生設計工具，入口是 claude.ai/design（或 Claude 桌面版側邊欄）。一句話概括它的工作方式：你用自然語言描述想要什麼，AI 在畫布上生成可互動的設計稿，然後你繼續用對話、批註或直接拖曳把它改到滿意。

它目前處於 research preview 階段、迭代極快，屬於「早接觸早佔先手」的新事物——據我們所知，中文設計圈對它的認知還接近空白。這一頁幫你判斷：它是什麼、擅長什麼、和 Figma 是什麼關係。

順帶一提：社群有一個它的開源本機版 Open Design——介面同款、驅動你本機已有的 coding agent（GPT 也可以）、無需 Claude 帳號。沒有 Claude 帳號的同事請直接看認識 Open Design，swift-web 的設計資源在那邊同樣全量可用。

介面與工作方式

開啟一個 Claude Design 專案，螢幕分兩半：左側是聊天、右側是畫布。

  • 你在聊天裡描述目標（「做一個影視站首頁：頂部導航 + 全寬輪播 banner + 三個內容樓層，暗色調」），AI 生成一版真實可渲染的設計（不是低保真線框，是帶完整樣式、可以直接在瀏覽器裡看的頁面）。
  • 生成之後有三種互補的修改方式，各管一層：
方式管什麼例子
繼續對話全域 / 結構級調整「整體配色更暗更極簡」「第二個樓層改成橫滾卡片排」
行內批註單一元件的局部修改點住某個按鈕說「邊距加大、文案改成立即觀看」
畫布直接編輯快速視覺微調拖曳、對齊、改尺寸，像常規設計工具一樣
  • 稿子滿意後，匯出管道很齊全：PDF / PPTX / 獨立 HTML / 複製到 Canva 等，以及最關鍵的一條——一鍵打包 handoff 給 Claude Code，由 AI 編碼工具接手實作（這是與 swift-web 落地銜接的通道，詳見協作流程）。

它的獨門能力：設計系統原生整合

這是 Claude Design 與「通用 AI 畫圖工具」的本質區別，也是它對我們價值最大的一點：專案建立時接入設計系統，之後 AI 生成的每一稿都自動遵守它——顏色用你的 token、元件按你的庫、字體是你的字型堆疊，不需要每次在 prompt 裡叮囑。

swift-web 已經把設計資源做成了 Claude Design 設計系統（20 張卡片：語意色板 / 排版 / 形狀 + 17 個元件的真實形態，全部從框架源碼派生）。在接入它的專案裡出的稿，天然就是「可以直接落地成框架程式碼」的形態。

我們的實測結論（在真實業務場景走完全程後的判斷）：

  • 純文字結構規格驅動出稿，保真度足夠高——拿一份 Figma 稿的結構描述（不給圖）讓它復刻，樓層結構、色板、卡片形態與原稿高度一致；
  • 雙向迭代順暢——人在編輯器裡手改的內容、拖進對話的參考圖，AI 都能接住並在此基礎上繼續；
  • 搭配真實素材（封面圖、logo）後，產出可達「真網站」觀感，可直接用於評審和給業務方過目。

和 Figma 是什麼關係：互補，不是替代

直接給結論，這也是設計師社群的主流共識：兩者解決不同階段的問題，並存互補。

Figma 擅長Claude Design 擅長
階段精細打磨、系統化管理、團隊協作評審從零到一的快速探索、方向驗證
操作範式手動精確控制每個像素表達意圖，AI 鋪陳細節
速度完整首頁數小時～數天首版可互動稿約十分鐘
到程式碼經 Figma MCP 由 AI 讀稿生成（見 Figma 軌）原生 handoff 給 Claude Code

典型的組合用法：用 Claude Design 快速探索三個方向 → 拿定的方向進 Figma 精修（或直接在 Claude Design 裡改到位）→ 走各自的通道交給開發。用它替代 Figma 不是目標；讓「出第一版稿」這個最耗時的環節從天級變成分鐘級，才是。

對設計師個人還有一層價值：這類工具把工作重心從「軟體操作」挪向「設計判斷」——你花在選單和圖層管理上的時間變少，花在「這個頁面到底該怎麼組織」上的時間變多。清晰表達設計意圖的能力，會成為新的核心技能。

使用門檻與成本

  • 帳號：Claude Pro / Max / Team / Enterprise 訂閱均可用（Enterprise 預設關閉，需管理員在組織設定中開啟）。
  • 用量：計入訂閱本身的共享額度，無需另外付費。
  • 協作：完整的組織內協作（共享設計系統、專案互訪、多人評審）需要 Team / Enterprise 組織；個人帳號也能完整使用工具本身，接入 swift-web 資源走資源包匯入路徑——兩條路徑的具體步驟見十分鐘上手。

工具在快速進化中，個別細節（如批註偶爾延遲）屬於 preview 階段的正常現象，通常重新整理一次或把內容貼到對話裡就能繼續，不影響主流程。

相關連結