Claude連接Figma組件庫，用組件庫生成UI界面
整理版優先睇
用 Claude 連接 Figma 組件庫，一鍵生成同步更新嘅 UI 界面
呢篇文章係由一位資深 UI/UX 設計師陳婉寧撰寫，佢喺德國讀交互設計，有超過十年設計經驗。佢想解決嘅問題係：點樣用 AI 快速生成 UI 界面，同時保持同設計系統一致，方便後續修改。整體結論係可以用 Claude Pro 4.7 連接 Figma 組件庫，直接生成界面仲可以同步更新。佢用 Figma 官方開源設計系統做示範，成個流程大約 10 分鐘。
作者首先講解前置準備：要有 Figma 團隊功能、Claude Pro 4.7 以上、成熟嘅設計系統。然後佢示範點樣將設計系統複製到團隊項目、上傳同關聯組件庫。之後喺 Claude 畀佢分析設計系統文檔，再畀出生成指令，Claude 就會自動喺指定 Figma 文檔生成界面。
最後作者測試咗按鈕狀態切換同組件庫連接性，證明可以同步更新。不過佢提醒咁樣好消耗 token，佢用 Pro 版本只係分析設計系統同生成一張界面就用咗一週用量。整體嚟講呢個方法好啱需要快速迭代設計嘅團隊，但成本唔低。
- 用 Claude 結合 Figma 組件庫可以快速生成一致嘅 UI 界面，而且能夠同步更新，適合設計迭代。
- 成功需要準備：Figma 團隊帳號、Claude Pro 4.7 以上、成熟嘅設計系統文檔。
- 步驟包括複製組件庫到團隊項目、上傳關聯、讓 Claude 分析系統後生成界面。
- 呢個方法比普通 Claude Design 更靈活，因為直接使用組件庫，修改主色後可同步更新。
- 最大代價係 token 消耗驚人，一次操作就用咗一週用量，需要謹慎使用。
前置準備：設定組件庫同權限
要實現 Claude 生成界面並同步更新，首先要準備好呢幾樣嘢：
Figma 團隊功能、Claude Pro 4.7 以上、成熟嘅設計系統
作者用咗 Figma 官方開源設計系統做示範，你可以先睇睇佢嘅案例視覺風格，確保同後面生成嘅界面一致。
- 1 複製設計系統到團隊項目文件。
- 2 喺 team project 新建一個設計文檔，方便 Claude 將生成嘅界面放喺呢度。
- 3 將設計系統上傳，並關聯到新文檔，確保組件可以正常使用。
- 4 測試組件是否正常，例如試嚇切換按鈕狀態。
權限一定要開放畀任何人編輯，咁 Claude 先可以寫入內容。
用 Claude 分析系統同生成界面
設定好之後，就進入 Claude。先將設計系統文檔連結畀 Claude，等佢分析設計系統嘅組件定義。
分析設計系統文檔係關鍵步驟，Claude 要理解組件先可以生成一致嘅界面。
然後將空白 Figma 文檔嘅連結（已設定任何人可編輯）發畀 Claude，並明確話佢知要生成咩界面。等一陣，Claude 就會自動喺文檔生成界面。
- 生成後檢查按鈕狀態切換係咪正常。
- 確認界面元素同組件庫一致，例如顏色、間距。
測試同步更新同成本考量
生成界面後，作者測試咗同步功能：修改組件庫主色，重新上傳更新設計系統，然後喺生成文稿點擊同步，所有按鈕即刻變色。
同步更新令修改變得超方便，改一個元件就可以更新全部界面。
不過呢個方法好消耗 token。作者用 Pro 版本只係分析同生成一張界面就用咗一週用量。
整體嚟講，呢個方法令設計迭代更輕鬆，但成本高，建議按需使用。
完成條件：
1、可以用figma團隊功能
2、claude pro或以上（4.6做唔到，要4.7先得）
3、連接claude同figma，可以參考呢篇：Claude同FigJam打通，快速生成流程圖（可以修改）- UX交互設計&產品經理
4、成熟、規範嘅設計系統文檔
呢篇文章用嘅係figma官方嘅一個開源設計系統：
可以睇下呢套組件庫嘅案例視覺風格，方便睇同後面生成嘅界面係咪似同一套。
第一步，將呢套設計系統複製到團隊項目檔案。
然後將呢套設計系統上載。
喺team project入面新建一個設計文檔，方便之後claude將生成嘅設計稿放喺呢個文檔入面。
入去呢個文檔，關聯啱啱上載嘅組件庫。
測試一下呢個組件可唔可以正常使用
跟住就進入claude，準備開始用呢套組件庫生成界面。
先叫claude分析嚇呢套組件庫，將呢個組件庫嘅文檔連結複製俾claude。
分享嘅時候最好將權限放寬。
然後將連結send俾claude，叫佢分析呢套設計系統。
然後再去啱啱新建嘅design文檔，即係已經連接咗呢套組件庫嘅嗰個文檔，複製連結，權限改做任何人都可以編輯。
然後就將提示詞send俾claude，話俾佢知要生成咩界面，同時將呢個空白文檔嘅連結send俾佢，叫佢將生成嘅界面直接喺呢個文檔入面生成。
過咗一陣之後，就可以見到喺文檔入面生成咗一套界面。
可以檢查嚇入面嘅按鈕可唔可以自由切換狀態。
基本冇問題。
然後測試嚇呢套界面同組件庫嘅連接性。
返去組件庫文檔，修改按鈕主色。
改好之後，重新上載更新設計系統。
返去啱啱生成設計稿嘅頁面，見到左邊嘅小書圖標出現咗圓點，㩒同步更新。
更新完之後，頁面入面所有主按鈕嘅主色全部變咗做啱啱改嘅顏色，證明已經同組件庫連接咗。
最後對比嚇claude生成嘅界面同呢套設計系統嘅案例界面，基本都係「一家人」嘅感覺。
咁樣之後界面疊代都可以用AI輕鬆完成。
缺點就係好食token，我係pro，淨係讀咗呢個設計系統同用佢生成咗一個界面，就用曬一個星期嘅用量。
AI完成App首頁UI界面redesign，UX設計AI工作流全流程拆解（超細緻！）
Claude design同Claude+Figma MCP嘅分別，用邊個好啲？
That's all.
我係陳婉寧，德國交互設計專業留學5年，用戶體驗設計師，深耕設計領域10年+，UIUX設計教學經驗3年+。
持續沉澱UIUX設計類文章200+，朋友圈每日持續分享uiux設計領域乾貨知識，希望用自己嘅設計經驗陪大家一路闖關！
歡迎加我：wanning2755
完成條件：
1、可使用figma團隊功能
2、claude pro以上（4.6做不到，4.7才行）
3、連接claude與figma，可參考這篇：Claude與FigJam打通，快速生成流程圖（可修改）- UX交互設計&產品經理
4、成熟、規範的設計系統文檔
這篇文章用的是figma官方的一個開源設計系統：
可以先看一下這套組件庫的案例視覺風格，方便看和後面生成的界面是否像同一套的。
第一步，把這套設計系統複製到團隊項目文件。
接着把這套設計系統上傳。
在team project裏新建一個設計文檔，方便後面claude把生成的設計稿放到這個文檔中。
進入該文檔，關聯剛剛上傳的組件庫。
測試一下這個組件是否可以正常使用
接下來就進入到claude中，準備開始用這套組件庫生成界面。
先讓claude分析一下這套組件庫，把這組件庫的文檔連結複製給claude。
分享的時候最好把權限放開。
接着把連結發給claude，讓它分析這套設計系統。
接着再去到剛剛新建的design文檔，已經連接了這套組件庫的那個文檔，複製連結，權限改為任何人可編輯。
接着就把提示詞發給claude，告訴它要生成什麼界面，並把這個空白文檔的連結發給它，讓它把生成的界面直接在這個文檔中生成。
過了一大會之後，就可以看到在文檔中生成了一套界面。
可以檢查一下里面的按鈕是否可以自由切換狀態。
基本沒問題。
接着測試一下這套界面和組件庫的連接性。
回到組件庫文檔，修改按鈕主色。
改好之後，重新上傳更新設計系統。
回到剛剛生成設計稿的頁面，看到左邊的小書圖標出現了圓點，點擊同步更新。
更新完後，頁面中所有的主按鈕主色全部變成了剛剛改的顏色，說明已經和組件庫連接。
最後對比一下claude生成界面和這套設計系統案例界面，基本也是“一家人”的感覺。
這樣後面界面迭代也能用AI輕鬆完成。
弊端就是很消耗token，我是pro，只是讀了這設計系統並用它生成了一張界面，就把一週的用量都消耗完了。
AI完成App首頁UI界面redesign，UX設計AI工作流全流程拆解（超細緻！）
Claude design和Claude+Figma MCP的區別，用哪個好？
That's all.
我是陳婉寧，德國交互設計專業留學5年，用戶體驗設計師，深耕設計領域10年+，UIUX設計教學經驗3年+ 。
持續沉澱UIUX設計類文章200+，朋友圈每日持續分享uiux設計領域乾貨知識，希望用自己的設計經驗陪你們一路闖關！
歡迎加我：wanning2755