我試完了所有AI產品設計工具才明白設計不是會畫圖
整理版優先睇
AI設計工具唔係萬能，審美判斷先係核心能力
呢篇文章係一個後端出身嘅開發者，分享佢點樣由怕設計、手繪草圖，到而家可以一個人搞掂前後端加UI/UX嘅過程。佢發現設計能力唔係天賦，係工具加上審美訓練練返嚟嘅，而審美係可以後天建立嘅。佢試咗十幾個AI設計工具，包括frontend-design、ui-ux-pro-max、figma-mcp、Claude Design、v0等等，發現每個工具解決唔同階段嘅問題，冇一個可以覆蓋曬成個場景。整體結論係：工具再多，最終令界面好睇嘅，係你自己裝咗幾多嘢喺眼裡——即係睇過嘅作品、累積嘅判斷力。
佢跟住將工具分成四層：Skill層（裝喺AI編輯器用）、MCP層（連接Figma）、獨立產品（如Claude Design、Open Design）、快速生成類（v0、Lovable、Bolt）。佢建議按自己嘅階段揀：如果係開發緊工程，先裝frontend-design加ui-ux-pro-max；如果有Figma稿，一定要裝figma-mcp；新產品由零開始，可以用Lovable或v0出原型，再落Claude Design整設計系統。佢自己就係用ui-ux-pro-max嘅間距建議，再自己調整，結果畀UI讚間距系統規範。
最後佢引用《莊子》輪扁嘅故事，話工具可以寫清楚，但「用邊個工具喺邊個位出手」嗰個判斷，係要自己慢慢攢出嚟嘅。Behance、Dribbble、Pinterest上面睇過嘅嘢，全部會變成你嘅審美直覺。
- 我試完了所有AI產品設計工具才明白設計不是會畫圖
- 我試完了所有AI產品設計工具才明白設計不是會畫圖｜重點 2
- 我試完了所有AI產品設計工具才明白設計不是會畫圖｜重點 3
- 我試完了所有AI產品設計工具才明白設計不是會畫圖｜重點 4
- 我試完了所有AI產品設計工具才明白設計不是會畫圖｜重點 5
由後端到設計：一個開發者嘅覺醒
嗰陣時我仲係個純後端開發，Java寫咗十幾年，系統設計、數據庫調優呢啲嘢好熟，但一打開Figma就頭大，成日諗『設計唔係我嘅嘢』。點知呢句嘢喺實際項目完全企唔穩——你要同客戶溝通，就要出原型；你做獨立產品，就要出界面；你寫前端，就要同UI走查。逃唔甩㗎。
設計能力唔係天賦，係工具 × 審美訓練出嚟嘅
於是我開始刷Behance、Dribbble、Pinterest，睇多咗之後，眼睛開始識得『呢個間距唔啱』『呢個顏色組合太髒』。大概半年，審美明顯進步咗。
十幾個工具點揀？先搞清楚佢哋嘅層次
AI設計工具多到眼花繚亂，我而家研究過嘅有frontend-design、ui-ux-pro-max、huashu-design、pencil-design、figma-mcp，加上Claude Design、Open Design、Codex嘅Product Design Plugin，同埋v0、Lovable、Bolt，十幾個向上。點解仲要繼續造？
- 1 Skill層：裝入AI編輯器用，如frontend-design（生成組件代碼）、ui-ux-pro-max（配色+UX規則）、huashu-design（Claude Design開源版，HTML原生）、pencil-design（IDE內設計畫布）。
- 2 MCP層：figma-mcp係Figma官方Server，直接讀設計稿變代碼，解決翻譯成本。
- 3 獨立產品：Claude Design（自然語言生成網站，有品牌系統）、Open Design（本地運行，內置31個skills+72模板）。
- 4 快速生成類：v0（React組件）、Lovable（全站MVP）、Bolt（多技術棧）。
實戰揀選路徑：由工程到產品
如果你手頭有工程，需要高質量組件代碼，先裝frontend-design加ui-ux-pro-max，成本低即刻用。如果你有Figma稿，figma-mcp一定要裝，用咗你就會後悔點解唔早啲裝。
figma-mcp將翻譯成本壓縮到接近零
如果由零開始做新產品，用Lovable或v0出原型，再用Claude Design規範化設計系統。如果想喺IDE打通設計同代碼，pencil-design加Pencil值得試，設計文件同代碼庫住埋一齊。
- 基礎組合：frontend-design + ui-ux-pro-max
- 協作必裝：figma-mcp
- 新產品流程：Lovable/v0 → Claude Design
- IDE方案：pencil-design + Pencil
工具背後：審美判斷先係核心
我而家一個人就係一個團隊，前後端加UI/UX都搞得掂。之前畀UI讚間距系統規範嗰次，其實間距建議嚟自ui-ux-pro-max，我再自己調整。我冇同佢講，因為呢啲判斷力係我自己累積返嚟㗎。
最終令界面好睇嘅，唔係工具，係你裝咗幾多嘢喺眼裡
輪扁話斫輪嘅『得之於手而應於心』，口不能言，教唔到人。工具可以寫清楚，但『用邊個工具喺邊個位出手』嗰個判斷，係要自己慢慢攢。Behance、Dribbble、Pinterest上面睇過嘅嘢，全部會變成你嘅審美直覺。
被設計逼到發癲嘅後端，而家俾 UI 讚佢間距系統規範
有段時間我好驚接到一句話：「呢個頁面可唔可以改嚇，視覺上好睇啲？」
嗰陣我仲係個純後端出身嘅開發，寫咗十幾年 Java，系統設計、數據庫調優、接口聯調，呢啲嘢我腦入面一套套。但你要我開 Figma，個頭就會大一圈，然後本能咁揾理由：「我搞邏輯嘅，設計嗰部分唔關我事。」
問題係「唔關我事」呢句話喺實際項目入面根本企唔穩腳。
你同客溝通，你要出原型。你做獨立產品，你要出界面。你寫前端代碼，你要同 UI 走查。走唔甩㗎，就好似你學咗 SQL 之後遲早要面對嗰張叫你優化到極限嘅慢查詢表。
當時嘅處理方式係點？其實好簡單，極之原始。
用 Axure 畫框線圖。喺 A4 紙上面畫草圖，係，手畫嗰種，然後影相 send 畀對方，話「大概係呢個結構」。前端嘅樣式基本靠 Bootstrap 套上去，用得就得，好唔好睇係另一回事。
呢個狀態持續咗好幾年。
直到有一日我開始意識到一件事：設計能力唔係天賦，係工具乘審美訓練出嚟嘅。而審美，係可以後天建立嘅。
我開始刷 Behance，去 Dribbble 睇啲完整 UI 作品，將 Pinterest 當成視覺詞典。唔係話睇一次就識，係不斷咁睇，睇多咗之後你對眼開始知道「呢個間距唔啱」「呢個顏色組合太污糟」。呢個過程比我諗嘅快，大概半年你就會 feel 到自己嘅審美喺度提升。
然後 AI 設計工具嘅浪潮嚟咗。
嚟得好猛，而且嚟咗一大堆。
多到咩程度？我數咗嚇我而家用緊或者研究過嘅就有：frontend-design、ui-ux-pro-max、huashu-design、pencil-design、figma-mcp加上 Claude Design、Open Design、Codex 今個月啱啱推出嘅 Product Design 插件、v0、Lovable、Bolt，十幾個咁上下，而且每隔一段時間就有新嘅彈出嚟。
見到呢度你可能同我當初一樣奇怪：都已經咁多喇，點解仲喺度整新嘅？
呢個問題好關鍵，我後來諗清楚咗：每一個工具解決嘅係唔同階段嘅問題，冇一個可以 cover 曬成個場景，所以「繼續整」呢件事本身就係必然嘅。
就好似你唔會用鎚仔去擰螺絲，即使佢哋都叫「工具」。
咁我就將呢套由頭到尾捋一次。
先從底層嘅 Skill 層講起，呢啲係裝入 Claude Code 或者 Codex 裏面行嘅技能包，你可以理解成幫 AI 裝咗塊專用晶片，令佢識得設計呢件事。
frontend-design 係安裝量最大嗰個，超過 533K，功能直接：幫你生成前端組件代碼，有樣式，有佈局，幫你將「呢個 button 置中對齊」呢類基本要求直接變做代碼。佢解決嘅問題係：你腦入面有個模糊嘅視覺想法，但係你唔識用 CSS 實現。
ui-ux-pro-max 再入啲，有 161 種配色方案加 57 種字體組合，仲有一套基於優先級嘅 UX 規則檢測系統，可以幫你捉出對比度唔夠、touch 目標太細、缺少加載狀態呢啲常見失誤。佢更加似一個識得規範嘅設計顧問，你話「呢個界面好似有啲唔妥」，佢幫你講清楚係邊度唔妥，而且畀出具體改法。呢個 skill 喺 GitHub 上已經累積到差唔多 90K star，證明好多人踩過同我一樣嘅坑。
huashu-design 嘅來歷好有趣：佢係 Claude Design 喺四月發佈之後大約一個禮拜，中文推社區裏面花叔大神跑出嚟嘅開源仿製品。原版 Claude Design 嘅設計語言能力太令人眼紅，但訂閲門檻同使用限制擺喺度，huashu-design 行嘅係 HTML 原生方向，帶 20 條設計哲學同動效導出，裝入 Claude Code 就可以行，冇平台綁定。
pencil-design 呢個要講清楚少少：佢連接嘅係 Pencil 呢個 MCP 設計畫布，官方定位係「喺你嘅 code 裏面做設計，唔需要設計交接」，直接喺 IDE 開一個設計畫布，生成嘅係同你 code base 綁定嘅 .pen 格式文件。對我嚟講情緒價值好高，因為我以前真係喺紙上面畫嗰啲框線圖，而家直接喺 code editor 側邊開個畫布，感覺好似完成咗某種儀式上嘅告別。
呢四個係 Skill 層，本地安裝，行喺你嘅 AI editor 裏面，核心能力係「幫你出設計相關嘅代碼同判斷」，冇平台綁定，按需要裝，按需要刪。
再上一層係 MCP 層，figma-mcp 係目前最值得講嘅一個。
佢係 Figma 舊年發佈嘅官方 MCP Server，連接嘅核心邏輯係：設計師喺 Figma 出嘅稿，透過三個工具——分別用嚟讀取代碼上下文、讀取視覺圖像、讀取設計變量——你嘅 AI editor 直接將呢啲資訊接返嚟，生成匹配設計稿嘅代碼。
你唔使睇住標註手動量間距，唔使同設計師拉鋸話「呢個 padding 到底係 12 定 16」，AI 直接讀圖，直接畀 code。
呢個解決咗工作流上面一個真實存在嘅撕裂點。以前設計稿同代碼實現之間有一道翻譯成本，工程師睇稿、估距離、寫 code、走查、修改，loop 嚟 loop 去。figma-mcp 將翻譯呢一步壓縮到接近零。
當然佢都有侷限：設計稿嘅命名規範、組件結構如果一塌糊塗，出嚟嘅 code 都會跟住亂。好似「Frame 1337」呢類圖層名入去，AI 完全唔知係乜，垃圾入垃圾出，呢個定律喺度一樣有效。
然後係獨立產品呢層級：Claude Design 係今年四月跟 Opus 4.7 同步推出嘅獨立設計工具，兩個係並列發佈嘅關係，唔係從屬。
佢唔係一個 Skill，係 Anthropic 單獨做嘅設計產品，定位係「用自然語言生成網站、landing page 同簡報，支援品牌系統自動應用同多渠道導入」。佢同一般「叫 AI 幫你寫界面」有本質分別。一般做法係你描述，AI 估，估啱就繼續，估錯就再描述。Claude Design 更加似係同一個真係識設計系統嘅人協作，佢有設計師嘅思維路徑，唔只係 code generator。
五月份 Anthropic 仲將 Claude Design 嘅套餐上限翻咗倍，證明用嘅人多，feedback 唔差。
Open Design 係同 Claude Design 差唔多同期冒出嚟嘅另一個開源替代方案，比 huashu-design 分量更重，係一個本地運行嘅完整工具，有自己嘅界面，內置 31 個 skills 加 72 個設計系統 template，安裝之後喺本地行一個 dev server，你透過瀏覽器 access 佢，當然都有本地 client 工具。呢個同 huashu-design 唔係同一類嘢：一個係裝入 AI editor 嘅 Skill，一個係獨立運行嘅本地應用，揀嗰陣要分清楚。
最近最值得講嘅一個動向，係 Codex 今個月頭（6 月 2 日）啱啱發佈嘅角色專用插件體系，其中 Product Design Plugin 直接面向產品同設計團隊，核心能力係由早期想法快速生成可以評審嘅 prototype，支援從真實 URL 讀取你現有產品嘅交互流程，仲 integrated 咗 Figma 同 Canva。
點解要單獨拎出嚟講？因為佢本質上係 Codex 由純 code 工具向產品設計領域延伸嘅一次正式表態。呢件事發生喺 Claude Design 發佈之後唔夠兩個月，節奏擺喺度，冇人打算畀設計呢個場景空咗。
呢個就係點解工具 list 仲喺度增加。每一家爭嘅係設計工作流程嘅某個節點，冇一個可以全面覆蓋，所以唔會停。
最後一層係快速生成類：v0、Lovable、Bolt，呢三個我覺得要擺埋一齊講，因為佢哋解決嘅問題高度相似，但路徑唔同。
v0 係 Vercel 出嘅，輸入自然語言，輸出 React 組件，設計質量呢幾年進步明顯。對於需要快速驗證一個交互想法嘅場景，效率極高。你花五分鐘跑出嚟嘅 prototype，夠唔夠喺一次 product meeting 上撐過去？通常係夠嘅。
Lovable 更偏向全站生成：你描述你想做一個咩產品，佢幫你由零搭出嚟，有 database 設計，有前端頁面，有基本邏輯。對於想驗證 MVP 想法嘅獨立開發者，呢個係我見過最快嘅方法。
Bolt 介乎兩者之間：組件級到頁面級嘅生成都做到，支援嘅技術棧更多。如果你嘅 project 唔係 React 系列，Bolt 嘅覆蓋面更闊。
呢三個工具有一個共同嘅弱點：生成質素對 prompt 高度敏感。描述模糊，出嚟嘅嘢就係一個視覺上睇得但邏輯上有問題嘅殼。佢哋更適合啟動階段，唔太適合精細打磨。
咁呢堆工具點揀？我自己有一套判斷路徑。
如果你而家嘅要求係「手頭有工程，需要生成設計質素高嘅組件 code」，Skill 層先裝 frontend-design 加 ui-ux-pro-max，呢個係基本組合，成本低，即時用得。
如果你同設計師協作，有 Figma 稿，figma-mcp 必裝。佢解決嘅係翻譯成本，裝咗之後你會問自己點解唔早啲裝。
如果你喺做一個新產品，由零開始，用 Lovable 或者 v0 先出一個睇得嘅嘢，然後再將 Claude Design 拉入嚟做設計系統嘅規範化，呢個順序係合理嘅。
如果你想喺 IDE 入面打通設計同 code 嘅邊界，唔想喺 Figma 同 editor 之間不停切換，pencil-design 加 Pencil 呢套值得試一次。佢嘅邏輯係令設計文件同 code base 一齊住。
如果你嘅 project 已經有一定規模，想將設計系統整體提升，Claude Design 值得投入時間認真用，Open Design 可以先用嚟摸清楚呢套思路再決定。
佢哋唔係競爭關係，係流水線上唔同位置嘅工位。
我 feel 到自己而家強大得好恐怖，有 AI 加持之後，前後端全棧，甚至 UI/UX 以前諗都唔敢諗嘅嘢都可以自己搞掂，一個人就等於一個團隊。
嗰次俾 UI 讚間距系統規範，我都冇話佢知呢套間距係 ui-ux-pro-max 畀嘅建議，加上我自己調整嘅結果。
呢件事令我諗起《莊子》裏面一個造車輪嘅阿伯，叫輪扁。
佢同齊桓公講：造車輪呢樣嘢，慢咗輪子鬆，快咗輪子滑，唔快唔慢嗰種力道，得之於手而應之於心，口講唔出，我教唔到我個仔，我個仔亦學唔到我，所以我七十歲仲喺度親手造輪子。
呢句說話放喺今日設計工具呢件事上面，反轉都成立。
工具係可以用文字描述、用 list 寫清楚嘅，但「用邊個工具喺邊個位置出手」嗰個判斷，係你自己要累積返嚟嘅。十幾個工具擺喺面前，真正令你嘅界面俾人讚一句「間距系統好規範」嘅，唔係工具，係你裝咗幾多嘢喺對眼度。
Behance 上刷過嘅作品，Pinterest 上掃過嘅配色，全部都算數。
被設計逼瘋過的後端，現在被 UI 誇間距系統規範
有段時間我特別怕接到一句話，「這個頁面能不能改一下，視覺上好看點」。
那會兒我還是個純後端出身的開發， Java 寫了十來年，系統設計、數據庫調優、接口聯調，這些東西腦子裏一套一套的。但你要我打開 Figma ，我的頭會先大一圈，然後本能地找理由，「我搞邏輯的，設計那塊不是我的事」。
問題是「不是我的事」這句話在實際項目里根本站不住腳。
你跟客戶溝通，你要出原型。你做獨立產品，你要出界面。你寫前端代碼，你要跟 UI 走查。逃不掉的，就像你學了 SQL 之後遲早要面對那張讓你優化到極限的慢查詢表。
當時的處理方式是什麼，其實也簡單，極其原始。
Axure 畫框線圖。 A4 紙上畫草圖，對，手繪那種，然後拍照發給對方，說「大概是這個結構」。前端的樣式基本靠 Bootstrap 往上套，能用就行，好不好看那是另一回事。
這個狀態持續了好幾年。
直到某一天我開始意識到一件事，設計能力不是天賦，是工具 × 審美訓練出來的。而審美，是可以後天建立的。
我開始刷 Behance ，去 Dribbble 上看那些完整的 UI 作品，把 Pinterest 當成視覺詞典。不是說看一遍就會了，是反覆看，看多了之後你的眼睛開始知道「這個間距不對」「這個顏色組合太髒」。這個過程比我想象的快，大概半年你就能感覺出自己的審美在漲。
然後 AI 設計工具的浪潮來了。
來得很猛，而且來了一堆。
多到什麼程度，我數了一下我現在在用或者研究過的就有，frontend-design、ui-ux-pro-max、huashu-design、pencil-design、figma-mcp，加上 Claude Design 、 Open Design 、 Codex 本月剛推的 Product Design 插件、 v0 、 Lovable 、 Bolt ，十來個往上，而且每隔一段時間還有新的冒出來。
看到這你可能跟我當初一樣納悶，都已經這麼多了，怎麼還在造新的？
這個問題很關鍵，我後來想清楚了，每一個工具解決的是不同階段的問題，沒有哪一個能覆蓋全場景，所以「繼續造」這件事本身就是必然的。
就像你不會用錘子去擰螺絲，哪怕它們都叫「工具」。
那我就把這一套從頭捋一遍。
先從底層的 Skill 層說起，這是裝進 Claude Code 或者 Codex 裏跑的技能包，你可以理解成給 AI 裝上了一塊專用芯片，讓它懂設計這件事。
frontend-design 是安裝量最大的那個， 533K 以上，功能直白，幫你生成前端組件代碼，帶樣式，帶佈局，幫你把「這個按鈕居中對齊」這種基礎訴求直接變成代碼 。它解決的問題是，你腦子裏有個模糊的視覺想法，但你不會用 CSS 實現。
ui-ux-pro-max 進了一層， 161 種配色方案加 57 種字體組合，還有一套基於優先級的 UX 規則檢測系統，可以幫你抓出對比度不夠、觸摸目標太小、缺少加載狀態這類常見失誤 。它更像是一個懂規範的設計顧問，你說「這個界面感覺哪裏不對」，它幫你說清楚是哪裏不對，而且給出具體改法。這個 skill 在 GitHub 上已經累積到將近 90K star ，說明不少人踩過跟我一樣的坑 。
huashu-design 的來歷有意思，它是 Claude Design 在四月發佈之後大約一週，中文推社區裏花叔大神跑出來的開源仿製品 。原版 Claude Design 的設計語言能力太讓人眼紅，但訂閲門檻和使用限制擺在那兒，huashu-design 走的是 HTML 原生方向，帶 20 條設計哲學和動效導出，裝進 Claude Code 就能跑，沒有平台綁定 。
pencil-design 這個要稍微說清楚一點，它連接的是 Pencil 這個 MCP 設計畫布，官方定位是「在你的代碼裏做設計，不需要設計交接」，直接在 IDE 裏開一個設計畫布，生成的是跟你代碼庫綁定的 .pen 格式文件 。對我來說情緒價值很高，因為我以前真的在紙上畫那種框線圖，現在直接在代碼編輯器旁邊開個畫布，感覺像是完成了某種儀式上的告別。
這四個是 Skill 層，本地安裝，跑在你的 AI 編輯器裏，核心能力是「幫你出設計相關的代碼和判斷」，沒有平台綁定，按需裝，按需卸。
往上走一層是 MCP 層，figma-mcp 是目前最值得講的一個。
它是 Figma 在去年發佈的官方 MCP Server ，連接的核心邏輯是，設計師在 Figma 裏出的稿，通過三個工具，分別用來讀取代碼上下文、讀取視覺圖像、讀取設計變量，你的 AI 編輯器直接把這些信息接過來，生成匹配設計稿的代碼 。
你不需要盯着標註手動量間距，不需要跟設計師拉鋸說「這個 padding 到底是 12 還是 16 」， AI 直接讀圖，直接給代碼。
這解決了一個工作流上真實存在的撕裂點。以前設計稿和代碼實現之間有一道翻譯成本，工程師看稿，估距離，寫代碼，走查，修改，循環往復。figma-mcp 把翻譯這一步壓縮到接近零 。
當然它也有侷限，設計稿的命名規範、組件結構如果一團亂麻，出來的代碼也會跟着亂，「 Frame 1337 」這種圖層名進去， AI 完全不知道這是什麼，垃圾進垃圾出，這個定律在這裏同樣有效。
然後是獨立產品這個層級， Claude Design 是今年四月隨 Opus 4.7 同步推出的獨立設計工具，兩個是並列發佈的關係，不是從屬 。
它不是一個 Skill ，是 Anthropic 單獨做的設計產品，定位是「用自然語言生成網站、落地頁和演示文稿，支持品牌系統自動應用和多源導入」。它跟普通的「讓 AI 幫你寫界面」有質的區別。普通的路子是你描述， AI 猜，猜對了繼續，猜錯了再描述。 Claude Design 更像是你跟一個真正懂設計系統的人協作，它有設計師的思維路徑，不只是代碼生成器。
五月份 Anthropic 還把 Claude Design 的套餐上限翻了倍，說明用的人多，反饋不差 。
Open Design 是與 Claude Design 幾乎同期冒出來的另一個開源替代，比 huashu-design 分量更重，是一個本地運行的完整工具，帶自己的界面，內置 31 個 skills 加 72 個設計系統模板，安裝之後在本地跑一個 dev server ，你通過瀏覽器訪問它，當然也有本地客戶端工具 。這個和 huashu-design 不是同一類東西，一個是裝進 AI 編輯器的 Skill ，一個是獨立運行的本地應用，選的時候要分清。
最近最值得說的一個動向，是 Codex 在本月初（ 6 月 2 日）剛剛發佈的角色專屬插件體系，其中 Product Design Plugin 直接面向產品和設計團隊，核心能力是從早期想法快速生成可評審的原型，支持從真實 URL 讀取你現有產品的交互流程，還集成了 Figma 和 Canva 。
之所以單獨拿出來說，是因為它本質上是 Codex 從純代碼工具向產品設計領域延伸的一次正式表態。這件事發生在 Claude Design 發佈後不到兩個月，節奏擺在那兒，沒有人打算讓設計這個場景空着。
這也是為什麼工具列表還在增加。每一家在爭的是設計工作流的某個節點，沒有一個能全覆蓋，所以不會停。
最後一層是快速生成類， v0 、 Lovable 、 Bolt ，這三個我覺得要放在一起說，因為它們解決的問題高度相似，但路徑不一樣。
v0 是 Vercel 出的，輸入自然語言，輸出 React 組件，設計質量這些年提升明顯，對於需要快速驗證一個交互想法的場景，效率極高。你花五分鐘跑出來的原型，夠不夠在一次產品會議上撐過去，通常是夠的。
Lovable 更偏向全站生成，你描述你要做一個什麼產品，它幫你從零搭出來，帶數據庫設計，帶前端頁面，帶基礎邏輯，對於想驗證 MVP 想法的獨立開發者，這是目前我見過的速度最快的路子。
Bolt 介於兩者之間，組件級到頁面級的生成都能做，支持的技術棧更多，如果你的項目不是 React 系的， Bolt 的覆蓋面更寬。
這三個工具有一個共同的軟肋，生成質量對提示詞高度敏感，描述模糊，出來的東西就是一個視覺上能看但邏輯上存疑的殼子。它們更適合啓動階段，不太適合精細打磨。
那這一堆工具怎麼選，我自己有一套判斷路徑。
如果你現在的訴求是「手頭有工程，需要生成設計質量高的組件代碼」， Skill 層先裝 frontend-design 加 ui-ux-pro-max，這是基礎組合，成本低，馬上能用。
如果你跟設計師協作，有 Figma 稿，figma-mcp 必裝，它解決的是翻譯成本，裝了之後你會想問自己為什麼沒早點裝。
如果你在做一個新產品，從零開始，用 Lovable 或者 v0 先出一個能看的東西，然後再把 Claude Design 拉進來做設計系統的規範化，這個順序是合理的。
如果你想在 IDE 裏打通設計和代碼的邊界，不想在 Figma 和編輯器之間反覆切換，pencil-design 加 Pencil 這套值得試一次，它的邏輯是讓設計文件跟代碼庫住在一起。
如果你的項目已經有一定規模，想把設計系統整體提升， Claude Design 值得投入時間認真用， Open Design 可以先拿來摸清楚這套思路再做決定。
它們不是競爭關係，是流水線上不同位置的工位。
我感覺自己現在強大的可怕，有了 AI 加持之後，前後端全棧，甚至是 UI/UX 以前想都不敢想的事情都能自己去搞定了，一個人就是一個團隊。
那套被 UI 誇間距系統規範的那次，我也沒告訴她這套間距是 ui-ux-pro-max 給的建議，加上我自己調整的結果。
這件事讓我想起《莊子》裏一個做車輪的老頭，叫輪扁。
他跟齊桓公說，斫輪這件事，慢了輪子松，快了輪子滑，不快不慢那個勁兒，得之於手而應於心，口不能言，我教不了我兒子，我兒子也學不了我，所以我七十歲了還在親手做輪子。
這話放在今天設計工具這件事上，反過來也成立。
工具是可以被文字描述、被列表寫清楚的，但「用哪個工具在哪個位置出手」那個判斷，是你自己得攢出來的。十來個工具擺在面前，真正讓你的界面被人誇一句「間距系統挺規範」的，不是工具，是你裝了多少東西在眼睛裏。
Behance 上刷過的那些作品， Pinterest 上掃過的配色，都算數。