Claude Design 真正厲害的不是會畫圖,是把設計跟開發接成一條來回的線

設計跟開發,長年是兩個各做各的工具。設計師在一邊把稿子拉到漂亮,工程師在另一邊看著截圖、憑感覺把它翻成 code;改一輪,再截一次圖、再翻一次。中間那道縫,一直是人在用手搬。

我看 Claude Design 這陣子的進展,真正讓我覺得有意思的,不是「它的 AI 又會畫了」——而是它把那道縫給接起來了。

躍遷不在功能,在鏈路

Claude Design 一開始的定位,就是個「產 AI 設計稿」的單點工具。但它現在的樣子,已經不是某個單一功能變強,而是涵蓋了設計 → 原型 → 開發 → 回寫的一整條鏈路。價值的跳躍藏在這裡:它把原本散在不同工具、得靠人接力的環節,收進了同一條可以來回走的線。

這給了我一個比工具本身更通用的判準:一個工具的競爭力,往往不是來自它哪個單點功能堆得更高,而是來自它吃下了整條鏈路、消掉了人手搬運的接縫。功能可以被追平,接縫被消掉之後就回不去了。

接縫是怎麼消掉的:一條能來回走的線

我講的這些,是從一支全流程實測影片看來的(這工具目前還在 Beta),不是我自己長期跑出來的結論,先把分寸講清楚。它的做法大致是這樣:Claude Code 端有個 /design 命令,透過 MCP 跟 Claude Design 接起來。你先在對話裡把 UI 的雛形講出來,跨到設計工具那邊調主題、配色、版面這些視覺細節,調完再讓 Claude Code 把最新狀態抓回去、落進 code。原本要靠人截圖、再憑感覺翻成 code 的那一步,被一條會自己同步的線取代了。

更值得玩味的是,這條線還能反著走。它不只「設計 → code」,也能 code → 設計:接上一個 GitHub repo,把既有專案匯入、還原成可以操作的互動原型——按鈕、發音這些功能在原型裡都還在,實測影片裡甚至做到幾乎一比一的還原。你在設計層把它重新美化,再把最新狀態拉回 code、據以改寫原本那支 App。意思是,連那些根本沒有現成設計稿的存量專案,也能被拉進這條鏈路重新設計一遍。

鏈路裡還有一段我蠻喜歡:它能把你本地既有專案的 UI 直接抽成一份 Design System、存起來。之後開新專案附用同一份,多個專案的主題跟組件樣式就能保持一致。風格一致性這件事,從「靠人記憶跟紀律」變成「附用同一份合約」——這是把人最容易出錯的地方,換成了系統來守。

對照組:會畫圖的不只它一個

Figma、Canva 當然也能產設計稿,有些也接了 AI。但它們缺的,正是這個跟 coding agent 雙向打通的原生閉環——稿子產得再好,交給工程師那一步,縫還在。Claude Design 的差異化不在「畫得比較好看」,在那條把設計跟開發黏起來、還能來回跑的線。

而且這條線一旦接通,門檻也跟著塌下來:沒有設計背景、也不會寫程式的人,一樣能產出像樣的 UI。這不是「少請一個設計師」的故事,是同一個人手上能做到的事情,往兩端都長了出去。

我會怎麼看待這件事

如果你也在挑工具,我會建議你把眼睛從「功能清單」上移開,改去問一個問題:它有沒有把我現在還在用手搬的那道縫消掉?單點功能很容易被下一個版本追平,但「整條鏈路在同一個地方來回跑、中間不用我接力」這件事,一旦你習慣了,就很難回頭。Claude Design 現在押的,就是這個方向。