不是 Figma，不是 Canva：我把 Claude Design 從頭玩了一遍
整理版優先睇
Claude Design 係 Anthropic 嘅新 AI 設計工具，可以快速生成設計稿並直接過渡到 Claude Code 實現代碼，打通對話到設計到代碼嘅閉環。
呢篇文章係作者親身試用 Anthropic Labs 新推出嘅 Claude Design 後嘅分享。作者係一個有十幾年軟件研發經驗嘅用家，想透過呢個工具解決「點樣快速將模糊諗法變成可睇嘅設計稿，同時保持設計系統一致性，再順利交到工程實現」嘅問題。整體結論係：Claude Design 唔係取代 Figma 或 Canva，而係填補設計流程嘅上游同下遊，特別係同 Claude Code 嘅整合極有價值。
作者首先介紹咗點樣上手：Pro 以上用戶可以喺 claude.ai/design 進入，主要面板有 Prototype、Slide deck 等新建方式，仲可以揀低保真或高保真。最關鍵嘅一步係設定 Design System，支援四種導入方式：GitHub 連結、本地文件夾、.fig 文件（本地解析唔上傳）、品牌素材，再加文字描述品牌調性。呢步做好之後，所有生成都會自動套用呢套系統。主編輯器左邊對話右邊畫布，生成過程透明，仲有 Tweaks 功能可以即時生成滑塊等 UI 控件嚟微調。
Claude Design 喺交付方面提供六種出口，其中王牌係 Handoff to Claude Code——佢會生成一個 API URL，Claude Code 按需拉取設計包，確保設計 token 同代碼 token 一致。作者認為呢個閉環對小團隊意義好大，但都要留意佢嘅限制：複雜交互、像素級打磨、從零創意都做唔到，而且組織協作遠…
- Claude Design 係一個研究預覽版 AI 設計工具，專注快速生成設計稿，並可同 Claude Code 整合實現設計到代碼嘅閉環。
- 透過導入 GitHub 代碼庫、本地文件、.fig 文件、品牌素材嚟建立設計系統，確保生成內容符合品牌規範。
- 獨有 Tweaks 功能可以即時生成滑塊等 UI 控件嚟微調設計，唔使反覆用自然語言描述。
- 佢唔係取代 Figma，而係同 Figma、Canva 合作，分別處理設計流程嘅唔同階段：快速草稿、精修協作、代碼實現。
- 如果你係 Pro 以上用戶，可以立即試用 claude.ai/design；團隊可以導入設計系統，嘗試用佢做早期方案探索或提案 deck。
Claude Design 係乜？定位同上手
週五 Anthropic Labs 靜靜雞上咗個新產品叫 Claude Design，作者一睇就覺得過癮——呢個工具係畀 Claude 直接幫你做設計稿。佢嘅定位好清楚：唔係另一個 Figma，亦唔係 Canva 嘅替代品，而係一個研究預覽版，用 Claude Opus 4.7 做底，視覺能力比上一代強好多。原型圖、PPT、一頁紙、落地頁宣傳素材都係佢嘅射程範圍。
Claude Design 唔係另一個 Figma，亦唔係 Canva 嘅替代品。
要上手好簡單：Pro、Max、Team、Enterprise 四檔訂閲都得，登錄 claude.ai 之後左邊導航欄有個調色板圖標，㩒入去就得；或者直接喺地址欄打 claude.ai/design。企業版默認關閉，管理員要去 Organization settings 手動開。入到去會見到項目面板，分 Prototype、Slide deck、From template、Other 四種新建方式，仲可以揀 Wireframe（低保真）或者 High fidelity（高保真），好貼心。
設計系統導入——真正拉開差距嘅一步
作者認為最關鍵嘅一步係設定 Design System。打開頂部 Design systems 標籤，你會見到組織層面嘅設計系統管理入口，支援四種資產導入方式：GitHub 代碼倉庫連結、本地文件夾拖拽、.fig 文件上傳（標明「Parsed locally in your browser — never uploaded」，唔會上傳到 Anthropic 服務器）、字體 logo 品牌素材直接上傳。最底仲有個「Any other notes」自由文本框，可以補充品牌調性，例如「我哋用偏暖嘅大地色系、圓角、品牌語調係輕鬆但專業」。呢步做好之後，後面所有生成都會自動套用呢套設計系統，唔使重複講「主色係 #1E40AF」。
主編輯器同四種改法
入到項目，界面佈局左邊係對話區，右邊係設計畫布。左邊有個「Start with context」面板，列出四種開局方式：關聯 Design System、加截圖參考、關聯代碼庫、拖 Figma 文件。底部對話框係你同 Claude 溝通嘅入口，寫好 prompt 撳 Send，佢就開始工作，過程會顯示 Progress 清單，好透明。
生成完之後，右邊畫布頂部有排工具按鈕：Tweaks、Comment、Edit、Draw、Present。作者話「三種改法」其實有四種：最直接係對話改，例如「第二個卡片嘅圖標換成鎖形」；第二種係 Comment，直接點元素加批註；第三種係 Edit/Draw，直接在畫布上手繪修改；第四種最得意——Tweaks，撳個掣會彈出輸入框，你可以要求「Give me sliders to control: rotation speed, globe size, and whirl intensity」，Claude 會臨時改動代碼將呢啲維度包裝成交互控件，拖動滑塊畫布實時變化。
四種改法混着用：對話、Comment、Edit/Draw、Tweaks，其中 Tweaks 可以即時生成滑塊等 UI 控件嚟微調。
交付同 Handoff to Claude Code——設計到代碼嘅閉環
設計稿改好之後，撳右上角 Export 掣，下拉有六種選項：Download project as .zip、Export as PDF、Export as PPTX、Send to Canva、Export as standalone HTML、Handoff to Claude Code。前五個係常規操作，PDF 畀老闆睇、PPTX 做演示、Canva 交畀運營同事繼續排版。但王牌係最後一個 Handoff to Claude Code。
Handoff to Claude Code 係王牌功能，可以直接傳設計參數去代碼生成，確保設計 token 同代碼 token 一致。
Fetch this design file, read its readme, and implement the relevant aspects of the design.
https://api.anthropic.com/v1/design/h/BYupBDihyy8VLobwP2KXBQ?open_file=Globe+Loader.html
Implement: Globe Loader.html呢個 handoff 機制嘅意義在於：以前 AI 照設計圖寫代碼係靠估像素，依家變成明確嘅變量約束。如果你本來就用緊 Claude Code 開發呢個項目、Claude Design 又讀過你嘅代碼庫，咁設計 token 同代碼 token 就係同一套，改一個地方兩邊都一致。從「老闆拍腦袋一個想法」到「可交付嘅前端代碼」，呢條鏈路理論上一個人在一個會議裏就能跑通。
佢解決到乜，解決唔到乜
作者跑完整個流程後，認為 Claude Design 真正能打嘅場景有幾個：早期方案探索（產品經理、創始人可以自己糊一版出嚟對齊）、設計系統一致性保持（強約束顏色組件唔會亂用）、靜態設計稿變交互原型（Brilliant 設計師話 2 輪 prompt 就搞掂以前 20+ 輪）、提案同 pitch deck（創始人 AE 幾分鐘整到符合品牌調性嘅 deck）。但亦有侷限性：複雜交互設計搞唔掂、像素級打磨唔係強項、從零做品牌創意更係唔得，組織協作比 Figma 差好多。
佢解決早期方案探索、設計系統一致性、靜態稿變交互原型、提案 deck 等場景，但複雜交互、像素級打磨、從零創意都做唔到。
至於同 Figma 嘅關係，作者話網上一堆「Figma 要完了」嘅標題唔太 buy。Claude Design 同 Figma 解決嘅係設計流程唔同階段：Figma 係專業設計工具，核心喺精修協作；Claude Design 瞄準上游（快速草稿）同下遊（交付代碼）。佢甚至內置支援 .fig 文件導入，即係將 Figma 當成前置資產來源。官方措辭都係「bring ideas and drafts from Claude Design into Canva」，係合作唔係替代。
Claude Design 同 Figma 係串聯關係，唔係競爭關係：產品經理喺 Claude Design 糊草稿，設計師喺 Figma 精修，再透過 handoff 去 Claude Code 生成代碼。
星期五Anthropic Labs靜靜雞上咗個新產品，叫Claude Design。我一睇就嚟料——呢個嘢講白咗，就係俾Claude直接幫你做設計稿。週末抽時間將公司賬號嘅Pro訂閲轉過去玩咗嚇，成個流程行咗一次，cap咗圖，今日一齊傾嚇。
先講清楚定位：Claude Design唔係另一個Figma，亦唔係Canva嘅替代品。佢係Anthropic Labs放出嚟嘅研究預覽版，個模型底子係Claude Opus 4.7，視覺能力比4.6嗰代強咗一截。原型圖、PPT、一頁紙、落地頁宣傳素材，呢啲場景都喺佢嘅射程範圍內。
點樣上手——由打開到第一版設計稿
先講點樣入去。訂閲係門檻，Pro、Max、Team、Enterprise四檔入面任揀一檔都得。登入claude.ai之後，左邊導航欄有個調色板icon，㩒入去就係；或者直接喺地址欄打claude.ai/design。企業版賬號默認係關咗嘅，呢個係Anthropic嘅合規設計——管理員要去Organization settings嗰度手動開，理由係佢要讀code庫同設計檔案嚟建立design system，企業數據默認唔會洩漏出去。
入到嚟第一眼見到嘅係項目面板，分做Prototype（原型）、Slide deck（幻燈片）、From template（從模板開始）、Other（其他）四種新建方式。右邊係你最近嘅項目列表，用過嘅設計稿都喺度。
揀Prototype會再俾你兩個選項——Wireframe（低保真線框圖）或者High fidelity（高保真）。呢個設計幾貼心，早期方案探索揀低保真，避免一嚟就糾結顏色字體；後期做可交付嘅嘢揀高保真。
關鍵一步：先將Design System教俾Claude
真正拉開差距嘅係呢一步。打開頂部Design systems標籤，你會見到組織層面嘅設計系統管理入口。
㩒入一個design system嘅配置頁，你會見到佢支援四種資產導入方式——呢個先係佢同其他AI設計工具拉開差距嘅地方：
第一種係GitHub code倉庫嘅連結，直接貼URL就得，佢會去讀你前端code入面嘅tokens、組件、樣式變量。第二種係本地文件夾拖放，對於企業內部唔公開得嘅code特別有用，Claude只係copy你指定嘅檔案，唔會成個倉咁掃。第三種係.fig檔案上載——呢到有個好貼心嘅細節，文案清楚寫住 "Parsed locally in your browser — never uploaded"，即係話Figma源檔案係喺你瀏覽器本地解析，唔會上載到Anthropic伺服器。呢個對國內要數據合規嘅團隊尤其關鍵。第四種係字體、logo、品牌素材直接上載。
最下面仲有個 "Any other notes" 嘅自由文字框，你可以補幾句描述品牌調性——「我哋用偏暖嘅大地色系、圓角、品牌語調係輕鬆但專業」，呢啲文字描述對Claude理解你哋團隊嘅「氣質」幫助幾大。
呢步做好之後，後面就算你叫佢做咩，都會自動套呢套design system，唔使你重複講「主色係 #1E40AF"。
主編輯器——左邊對話，右邊畫布
入到項目入面，介面佈局好經典——左邊係對話區，右邊係設計畫布。但左邊有個特別貼心嘅設計叫 "Start with context"，列出四種開局方式：Design System（關聯邊套設計系統）、Add screenshot（俾參考截圖）、Attach codebase（關聯code庫）、Drag in a Figma file（拖Figma檔案入嚟）。
底部嘅對話框係你同Claude溝通嘅入口，工具欄啲細icon分別係設定、附件、錄音、Import。寫好prompt㩒Send，佢就開始做嘢。
生成過程好透明，Claude會先拆任務列一個Progress清單（呢個「Progress X/N」嘅展開面板好似Claude Code入面嘅TodoWrite），然後逐項完成。生成完之後右邊畫布就出咗嚟，頂部仲有一排工具掣：Tweaks、Comment、Edit、Draw、Present——篇blog話嘅「三種改法」就係呢度。
第一版出咗之後點樣改
呢個係佢同傳統AI生成工具差別最大嘅地方。以前你叫AI畫嘢唔滿意只可以再講過，改一個細位都要重新描述一次。Claude Design呢到有四種改法溝埋用。
最直接係對話改。「第二張卡嘅icon換做鎖形」「整體再逼啲15%」，呢啲同Claude傾偈一樣，佢會喺原稿基礎上改。
第二種係Comment——直接㩒元素喺上面加註解，同喺Figma一樣。
第三種係Edit/Draw——直接喺畫布上編輯或者手畫修改，定位到具體元素嘅修改用呢個最準。
第四種最得意，叫Tweaks——你㩒右上角嘅Tweaks掣，會彈出一個輸入框：「Ask Claude to add sliders or options」，佔位符仲俾埋例子：「e.g. slider for border radius, color picker for accent」。
我輸入咗「Give me sliders to control: rotation speed, globe size, and whirl intensity」，Claude會臨時改code將呢啲維度包裝成真正嘅互動控件。幾十秒之後，右下角就多咗一個TWEAKS浮層，三個滑塊：Rotation speed、Globe size、Whirl intensity。拉動滑塊畫布實時變化，拉到滿意嘅位就定落嚟。
呢種「臨時生成UI嚟調UI」嘅玩法，我之前真係未喺其他工具見過。佢嘅本質係將你含糊嘅審美描述（「我想令整體更逼啲」）變成一個具體嘅、可以持續調整嘅數值通道——你唔使每次都自然語言重新描述，拉就搞掂。
交付——六種出口同一個王牌
設計稿改好之後，㩒右上角嘅Export掣，下拉清單有一長串選項：Download project as .zip、Export as PDF、Export as PPTX、Send to Canva、Export as standalone HTML、Handoff to Claude Code。
前面五個都係常規操作——PDF俾老細睇、PPTX拎去做演示、Canva交畀營運同事繼續排版、zip同HTML係要獨立部署嘅場景。呢到我想單獨講嚇Anthropic同Canva嘅官方合作——過去之後係完全可編輯嘅Canva檔案，營運同事拎去改文案、換素材、排版，唔使再拉設計師。
真正嘅王牌係最後嗰個Handoff to Claude Code。
同Claude Code點樣銜接——呢個係我最在意嘅部分
㩒「Handoff to Claude Code...」彈出嘅對話框係噉樣：
標題係「Send to local coding agent」，中間一個終端樣嘅框，入面係一條預先整好嘅命令：
> Fetch this design file, read its readme, and implement the relevant aspects of the design.
https://api.anthropic.com/v1/design/h/BYupBDihyy8VLobwP2KXBQ?open_file=Globe+Loader.html
Implement: Globe Loader.html下面一個大嘅「Copy command」掣，複製到你本地Claude Code度回車就開始生成code。
見到呢個實現我幾意外——佢唔係打包一個大嘅JSON或者一堆檔案掟過去，而係俾你一個 API URL。Claude Code拎到呢個URL之後去Anthropic嘅API拉取設計包同readme。呢個架構好優雅：
• 設計包喺Anthropic伺服器度，Claude Code按需要拉取 • readme入面應該寫清楚咗設計意圖、組件結構、design token呢啲工程實現需要嘅上文下理 • 如果設計之後改咗，URL唔變，Claude Code再拉取就會拎到最新版本
對話框入面仲有個「Download zip instead」嘅選項——如果你用嘅唔係Claude Code而係其他AI編程工具（Cursor、Cline呢啲），可以下載zip手動餵過去。呢個兼容性考慮亦好細心。
底部有個「Give the agent more detail on what to implement (optional)」輸入框，默認填咗文件名，你可以追加描述——例如「淨係實現Hero區」「用Tailwind而唔係原生CSS」呢啲約束。
呢個handoff機制嘅意義係咩？
以前你叫AI跟住一張設計圖寫code，佢見到嘅係像素，生成出嚟嘅係「睇落差唔多」嘅code——顏色可能差少少，間距係16px定18px佢估，圓角幾大佢亂嗡。
而家呢個handoff bundle將呢啲變成咗明確嘅變量約束。更重要嘅係：如果你本來就用緊Claude Code開發呢個項目、Claude Design又讀過你嘅code庫，咁生成設計稿用嘅design token同code入面嘅token就係同一套。呢個意味住設計稿入面嘅 primary-500 同code入面嘅 primary-500 指嘅係同一個顏色值——改一個地方，兩邊都一致。
由「老細拍腦袋一個想法」到「可交付嘅前端code」，呢條鏈理論上一個人喺一個會議入面就可以行得通。Datadog嘅產品經理喺官方blog入面原話係「以前要一個禮拜來回嘅事，而家一次對話就搞得掂」——呢句有誇張成分，但方向係啱嘅。
分享同協作
仲有個細節值得提嚇，㩒Share掣會彈出權限設定：
可以設定名、訪問級別（Teammates can comment之類），亦可以直接Copy link。下面清楚寫住「Anyone at [你的organization] with the link can view any files in this design, and leave comments」——權限係組織內嘅，唔係成個公網開放嘅。仲有Duplicate project同Duplicate as template兩個動作，後者可以將當前設計變成模板放喺Design systems下面俾組織成員用。
佢能夠解決咩
行完完整流程，我覺得佢真正有用嘅場景有呢幾個。
一個係早期方案探索。產品經理、創辦人、BD呢啲冇設計功底嘅人，想快啲將腦入面嘅嘢變做「可以俾人睇嘅嘢」，以前一係畫醜嘅wireframe一係求設計師排期，而家可以自己整一版出嚟對齊。
另一個係設計系統一致性嘅保持。多少少規模嘅公司都有呢個痛點——有設計規範文件，但每個人理解同執行唔同，生出來嘅嘢七零八落。Claude Design讀code庫同設計檔案建立嘅design system，對每一次生成都係強約束，至少喺「顏色啱唔啱、組件有冇亂用」呢個層面，比人手睇規範穩陣。
仲有就係靜態設計稿變成互動原型。Brilliant嘅設計師講咗個數據，以前喺其他工具要20+輪prompt先還原到嘅複雜頁面，呢到2輪就得。我自己冇驗證呢個數字，但「靜態稿變可㩒原型」呢個能力確實省時——你唔使行code review、唔使提PR，就係一個URL發出去大家㩒嚇睇嚇。
最後係提案同pitch deck嘅場景。創辦人、AE由大綱到一份符合品牌調性嘅deck，幾分鐘搞掂。
佢解決唔到咩
講完做到嘅，再講嚇唔好有幻想嘅部分，實事求是咁潑嚇冷水。
複雜互動設計佢搞唔掂。涉及多個狀態流轉、複雜動畫、手勢互動呢類，生成出嚟嘅嘢更多係「睇落用得」而唔係「真係用得」，細節位有好多唔嚴謹嘅地方。真正嘅互動設計仲係要設計師坐低諗清楚。
像素級打磨亦唔係佢強項。對於要一兩個像素都對齊嘅場景——例如品牌視覺識別系統、高端B端產品嘅UI精修——生成出嚟嘅嘢基本上都要設計師再手動執一次。
由零開始做品牌創意更加唔得。佢底層邏輯係「喺你已有嘅設計語言基礎上做生成」，如果你自己都未諗清楚品牌係咩樣，指望佢幫你由無到有原創一套有辨識度嘅視覺語言，目前仲做唔到。
仲有一個容易忽略嘅點：組織協作呢方面比Figma差好多。Figma嗰套多人實時協同、評論、版本、分支、插件生態，係十年沉澱出嚟嘅嘢，Claude Design而家更加似「對話式生成 + 簡單分享」，仲未能取代專業設計團隊日常嘅協作工作流程。
同Figma到底係咩關係
呢個問題我想專門拎出嚟講。
網上一堆標題「Figma要玩完」「設計師要失業」——Figma股價嗰日確實跌咗，但呢種敍事我唔太信。更準確嘅講法係：Claude Design同Figma解決嘅係設計流程入面唔同階段嘅問題。
Figma係專業設計工具，核心場景喺精修、協作、組件化管理、設計系統沉澱。佢服務嘅主要係設計師呢個羣體，圍繞設計師嘅工作流程起咗成套生態。
Claude Design瞄準嘅係設計嘅上游同下遊——上游係將模糊諗法快速變成可以睇嘅草稿，下游係將設計稿交俾工程實現。中間嗰段精修、協同、設計系統管理，佢冇打算通殺。你甚至見到佢內置支援 .fig 檔案導入——即係話佢將Figma當做前置資產來源，而唔係替代對象。
你可以想像成噉樣一個流程：產品經理喺Claude Design將諗法整一版出嚟，設計師拎到呢個草稿喺Figma精修，定稿之後再經Claude Code嘅handoff去生成code。三者係串聯關係，唔係競爭關係。
至少喺而家呢個版本，我見唔到Anthropic有心將Claude Design做成Figma噉完整嘅設計工具。官方自己嘅措辭係「bring ideas and drafts from Claude Design into Canva」——將諗法同草稿帶到Canva再精修，呢個係合作關係而唔係替代關係。
一啲我仲觀察緊嘅點
準確率呢方面講真仲要時間驗證。我叫佢生成複雜表格類嘅頁面，列對齊、間距、層級關係呢啲，第一版成日有問題，要反覆調。簡單推廣頁面表現好好，但複雜B端產品嘅真實場景下頂唔頂得住，要長期用先知道。
成本模型都仲未清楚。而家係包含喺訂閲入面，但官方話optional extra usage available，之後大量用嘅價格策略未公開。對團隊嚟講，決定全面轉用之前，呢個要計清楚。
最後講兩句
我自己做咗十幾年軟件開發，經歷過嘅工具更迭唔少。AI時代呢啲工具最大嘅特點係咩？我覺得唔係「一個工具顛覆一個行業」，而係工作流程每一個環節都被重新組合——你原本需要由A到Z行曬嘅事，而家可能A-D用工具1、E-K用工具2、L-Z用工具3，工具之間嘅接縫反而係最重要嘅。
Claude Design目前睇最有價值嘅唔係「佢畫圖畫得有幾靚」，而係佢同Claude Code打通咗嗰條路——由對話到設計到code嘅閉環。呢個閉環如果持續打磨好，對細團隊嚟講意義好大。
至於會唔會整死設計師——唔會。會唔會令冇設計背景嘅人都整到似樣嘅嘢——會，而且已經喺發生。用得好工具嘅人同唔用嘅人之間，差距只會越來越大。
週五 Anthropic Labs 悄悄上了個新產品，叫 Claude Design。我一看就來勁了——這玩意兒說白了，就是讓 Claude 直接給你做設計稿。週末抽空把公司賬號的 Pro 訂閲切過去玩了一下，把整個流程跑了一遍，截了圖，今天一起聊聊。
先把定位講清楚：Claude Design 不是另一個 Figma，也不是 Canva 的替代品。它是 Anthropic Labs 放出來的研究預覽版，模型底子是 Claude Opus 4.7，視覺能力比 4.6 那一代強出一截。原型圖、PPT、一頁紙、落地頁宣傳素材，這些場景都在它的射程範圍內。
怎麼上手——從打開到第一版設計稿
先說怎麼進去。訂閲是門檻，Pro、Max、Team、Enterprise 四檔裏任意一檔都行。登錄 claude.ai 之後，左邊導航欄有個調色板圖標，點進去就是；或者直接在地址欄敲 claude.ai/design。企業版賬號默認是關着的，這是 Anthropic 的合規設計——管理員得去 Organization settings 裏手動打開，理由是它要讀代碼庫和設計文件來建 design system，企業數據默認不外泄。
進來之後第一眼看到的是項目面板，分成 Prototype（原型）、Slide deck（幻燈片）、From template（模板起步）、Other（其他）四種新建方式。右邊是你最近的項目列表，已經用過的設計稿都在這兒。
選 Prototype 會再給你兩檔選——Wireframe 低保真線框圖，或者 High fidelity 高保真。這個設計挺體貼的，早期方案探索選低保真，避免一上來就糾結顏色字體；後期做可交付物選高保真。
關鍵一步：先把 Design System 教給 Claude
真正拉開差距的是這一步。打開頂部 Design systems 標籤，你能看到組織層面的設計系統管理入口。
點進去一個 design system 的配置頁，你會看到它支持四種資產導入方式——這才是它跟其他 AI 設計工具拉開差距的地方：
第一種是 GitHub 代碼倉庫連結，直接貼 URL 就行，它會去讀你前端代碼裏的 tokens、組件、樣式變量。第二種是本地文件夾拖拽，對於企業內部不能公開的代碼特別有用，Claude 只拷貝你指定的文件，不是整倉掃。第三種是 .fig 文件上傳——這裏有個很貼心的細節，文案上明確寫着 "Parsed locally in your browser — never uploaded"，也就是說 Figma 源文件是在你瀏覽器本地解析的，不會上傳到 Anthropic 服務器。這個對國內有數據合規要求的團隊尤其關鍵。第四種是字體、logo、品牌素材的直接上傳。
最下面還有個 "Any other notes" 的自由文本框，你可以補幾句話描述品牌調性——"我們用偏暖的大地色系、圓角、品牌語調是輕鬆但專業"，這種文字描述對 Claude 理解你們團隊的"氣質"幫助挺大。
這一步做好之後，後面不管你讓它做什麼，都會自動套這套 design system，不需要你反覆說"主色是 #1E40AF"。
主編輯器——左邊對話，右邊畫布
進到項目裏，界面佈局很經典——左邊是對話區，右邊是設計畫布。但左邊有個特別貼心的設計叫 "Start with context"，列出了四種開局方式：Design System（關聯哪套設計系統）、Add screenshot（丟截圖參考）、Attach codebase（關聯代碼庫）、Drag in a Figma file（拖 Figma 文件進來）。
底部的對話框是你和 Claude 溝通的入口，工具欄那些小圖標分別是設置、附件、錄音、Import。寫好 prompt 點 Send，它就開始工作。
生成過程很透明，Claude 會先拆任務列個 Progress 清單（這個"Progress X/N"的展開面板很像 Claude Code 裏的 TodoWrite），然後一項一項完成。生成完之後右邊畫布就出來了，頂部還有一排工具按鈕：Tweaks、Comment、Edit、Draw、Present——博客裏說的"三種改法"就是這裏。
第一版出來之後怎麼改
這是它跟傳統 AI 生成工具差別最大的地方。以前你讓 AI 畫東西不滿意只能重新說，改一個小地方都要重新描述一遍。Claude Design 這裏有四種改法混着用。
最直接的是對話改。"第二個卡片的圖標換成鎖形""整體再緊湊 15%"，這種跟 Claude 聊天一樣，它會在原稿基礎上改。
第二種是 Comment——直接點元素在上面加批註，跟在 Figma 裏一樣。
第三種是 Edit/Draw——直接在畫布上編輯或手繪修改，定位到具體元素的修改用這個最精準。
第四種最有意思，叫 Tweaks——你點右上角的 Tweaks 按鈕，會彈出一個輸入框："Ask Claude to add sliders or options"，佔位符還給你例子："e.g. slider for border radius, color picker for accent"。
我輸入了 "Give me sliders to control: rotation speed, globe size, and whirl intensity"，Claude 會臨時改動代碼把這些維度包裝成真正的交互控件。幾十秒之後，右下角就多了一個 TWEAKS 浮層，三個滑塊：Rotation speed、Globe size、Whirl intensity。拖動滑塊畫布實時變化，拖到滿意的點就定下來。
這種"臨時生成 UI 來調 UI"的玩法，我之前還真沒在別的工具裏見過。它的本質是把你含糊的審美描述（"我想讓整體更緊湊一點"）變成一個具體的、可持續調整的數值通道——你不用每次都用自然語言重新描述，拖就完了。
交付——六種出口和一個王牌
設計稿改好之後，點右上角的 Export 按鈕，下拉里有一長串選項：Download project as .zip、Export as PDF、Export as PPTX、Send to Canva、Export as standalone HTML、Handoff to Claude Code。
前面五個都是常規操作——PDF 給老闆看、PPTX 拿去做演示、Canva 交給運營同學繼續排版、zip 和 HTML 是要獨立部署的場景。這裏我想單獨說一下 Anthropic 跟 Canva 的官方合作——過去之後是完全可編輯的 Canva 文件，運營同事拿過去改文案、換素材、排版，不用再拉設計師。
真正的王牌是最後那個 Handoff to Claude Code。
和 Claude Code 怎麼銜接——這是我最在意的部分
點 "Handoff to Claude Code..." 彈出來的對話框長這樣：
標題是 "Send to local coding agent"，中間一個終端樣式的框，裏面是一條預生成的命令：
> Fetch this design file, read its readme, and implement the relevant aspects of the design.
https://api.anthropic.com/v1/design/h/BYupBDihyy8VLobwP2KXBQ?open_file=Globe+Loader.html
Implement: Globe Loader.html下面一個大大的 "Copy command" 按鈕，複製到你本地 Claude Code 裏回車就開始生成代碼了。
看到這個實現我挺意外的——它不是打包一個巨大的 JSON 或者一堆文件丟過去，而是給你一個 API URL。Claude Code 拿到這個 URL 之後去 Anthropic 的 API 拉取設計包和 readme。這個架構很優雅：
• 設計包在 Anthropic 服務器上，Claude Code 按需拉取 • readme 裏應該寫清楚了設計意圖、組件結構、design token 這些工程實現需要的上下文 • 如果設計後面改了，URL 不變，Claude Code 再次拉取拿到的就是最新版本
對話框裏還有個 "Download zip instead" 的選項——如果你用的不是 Claude Code 而是其他 AI 編程工具（Cursor、Cline 這些），可以下載 zip 手動餵過去。這個兼容性考慮也很細。
底部有個 "Give the agent more detail on what to implement (optional)" 輸入框，默認填了文件名，你可以追加描述——比如"只實現 Hero 區""用 Tailwind 而不是原生 CSS"這種約束。
這個 handoff 機制的意義是什麼？
以前你讓 AI 照着一張設計圖寫代碼，它看到的是像素，生成出來的是"看起來差不多"的代碼——顏色可能差一點，間距是 16px 還是 18px 它猜的，圓角多大它瞎估。
現在這個 handoff bundle 把這些變成了明確的變量約束。更關鍵的是：如果你本來就在用 Claude Code 開發這個項目、Claude Design 又讀過你的代碼庫，那生成設計稿用的 design token 跟代碼裏的 token 就是同一套。這意味着設計稿裏的 primary-500 和代碼裏的 primary-500 指的是同一個顏色值——改一個地方，兩邊都一致。
從"老闆拍腦袋一個想法"到"可交付的前端代碼"，這條鏈路理論上一個人在一個會議裏就能跑通。Datadog 的產品經理在官方博客裏原話是"過去需要一週來回的事情，現在一次對話就能完成"——這話有誇張成分，但方向是對的。
分享和協作
還有個細節值得提一下，點 Share 按鈕會彈出權限設置：
可以設置名字、訪問級別（Teammates can comment 之類），也能直接 Copy link。下面明確寫着 "Anyone at [你的 organization] with the link can view any files in this design, and leave comments"——權限是組織內的，不是全公網開放的。還有 Duplicate project 和 Duplicate as template 兩個動作，後者能把當前設計變成模板放到 Design systems 下面給組織成員用。
它能解決什麼
跑完完整流程，我覺得它真正能打的場景有這麼幾個。
一個是早期方案探索。產品經理、創始人、BD 這些沒設計功底的人，想快速把腦子裏的東西變成"能給人看的東西"，以前要麼畫醜 wireframe 要麼求着設計師排期，現在可以自己先糊一版出來對齊。
再一個是設計系統的一致性保持。稍微大一點的公司都有這個痛點——有設計規範文檔，但每個人理解和執行不一樣，生出來的東西七零八碎。Claude Design 讀代碼庫和設計文件建立起來的 design system，對每一次生成都是強約束，至少在"顏色是不是對的、組件有沒有亂用"這個層面，比人肉盯着規範要穩。
還有就是靜態設計稿變交互原型。Brilliant 的設計師說了個數據，過去在別的工具裏需要 20+ 輪 prompt 才能還原的複雜頁面，這裏 2 輪就行。我自己沒驗證這個數字，但"靜態稿變可點擊原型"這個能力確實省事——你不用走代碼 review、不用提 PR，就是一個 URL 發出去大家點點看。
最後是提案和 pitch deck 的場景。創始人、AE 從大綱到一份符合品牌調性的 deck，幾分鐘的事。
它解決不了什麼
說完能幹的，再說說不要有幻想的部分，實事求是地潑點冷水。
複雜交互設計它搞不定。涉及多個狀態流轉、複雜動效、手勢交互這類，生成出來的東西更多是"看起來能用"而不是"真的能用"，細節處有很多不嚴謹的地方。真正的交互設計還是得設計師坐下來想清楚。
像素級打磨也不是它的強項。對於需要一兩個像素都對齊的場景——比如品牌視覺識別系統、高端 B 端產品的 UI 精修——生成出來的東西基本都要設計師再手動調一遍。
從零做品牌創意更不行。它的底層邏輯是"在你已有的設計語言基礎上做生成"，你要是自己都沒想清楚品牌長啥樣，指望它幫你從無到有原創出一套有辨識度的視覺語言，目前還做不到。
還有一個容易被忽略的點：組織協作這塊比 Figma 差不少。Figma 那套多人實時協同、評論、版本、分支、插件生態，是十年沉澱出來的東西，Claude Design 現在更像是"對話式生成 + 簡單分享"，還不能替代專業設計團隊日常的協作工作流。
和 Figma 到底是什麼關係
這個問題我想專門拎出來說。
網上一堆標題"Figma 要完了""設計師要失業了"——Figma 股價當天確實跌了，但這種敍事我不太買賬。更準確的說法是：Claude Design 和 Figma 解決的是設計流程裏不同階段的問題。
Figma 是專業設計工具，核心場景在精修、協作、組件化管理、設計系統沉澱。它服務的主要是設計師這個羣體，圍繞設計師的工作流搭建了一整套生態。
Claude Design 瞄準的是設計的上游和下游——上游是把模糊想法快速變成可看的草稿，下游是把設計稿轉交給工程實現。中間那段精修、協同、設計系統管理，它沒打算通吃。你甚至能看到它內置支持 .fig 文件導入——也就是說它把 Figma 當成前置資產來源，而不是替代對象。
你可以想象成這樣一個流程：產品經理在 Claude Design 裏把想法糊一版出來，設計師拿到這個草稿在 Figma 裏精修，定稿後再通過 Claude Code 的 handoff 去生成代碼。三者是串聯關係，不是競爭關係。
至少在現在這個版本，我看不到 Anthropic 有意把 Claude Design 做成 Figma 那樣完整的設計工具。官方自己的措辭是 "bring ideas and drafts from Claude Design into Canva"——把想法和草稿帶到 Canva 裏再精修，這就是合作關係而不是替代關係。
一些我還在觀察的點
準確率這塊說實話還需要時間驗證。我讓它生成複雜表格類的頁面，列對齊、間距、層級關係這些，第一版經常有問題，得反覆調。簡單營銷頁面表現很好，但複雜 B 端產品的真實場景下能不能扛住，要長期用才知道。
成本模型也還不清晰。現在是包含在訂閲裏的，但官方說 optional extra usage available，後續大量使用的價格策略還沒公開。對團隊來說，在決定全面切換之前，這個得算清楚。
最後說兩句
我自己做了十幾年軟件研發，經歷過的工具更迭不少。AI 時代這波工具最大的特點是什麼？我覺得不是"一個工具顛覆一個行業"，而是工作流每個環節都被重新組合——你原來需要從 A 到 Z 走完一遍的事情，現在可能 A-D 用工具 1、E-K 用工具 2、L-Z 用工具 3，工具之間的接縫反而是最重要的。
Claude Design 目前看最有價值的不是"它畫圖畫得多好看"，而是它和 Claude Code 打通了那條路——從對話到設計到代碼的閉環。這個閉環如果持續打磨好，對小團隊來說意義很大。
至於會不會幹掉設計師——不會。會不會讓沒設計背景的人也能做出像樣的東西——會，而且已經在發生了。把工具用好的人跟不用的人之間，差距只會越來越大。