Figma MCP 真變強了：AI 已經能直接在畫布裏做設計了，我跑了 4 個真實案例
整理版優先睇
Figma MCP 升級後可以直接喺畫布做設計，AI 開始理解設計系統並執行設計動作，唔再淨係做轉圖層工具。
呢篇文章係 Kate 基於 Figma MCP 最新升級寫嘅實測分享。以前 Figma MCP 主要用嚟將網頁轉 Figma 圖層，但而家新增咗 use_figma 工具，令 AI 可以直接喺 Figma 畫布上執行設計動作，仲可以配合 9 個 Skills 做自我迭代。作者想透過幾個真實案例展示呢個升級對設計師、前端開發者同獨立開發者嘅價值。整體結論係：Figma MCP 已經從「有意思嘅嘗試」走到「開始實用」嘅階段，但未到完全取代設計師嘅地步。
文章首先解釋咗點解今次升級值得關注：AI 唔再剩係讀取同轉換，而係開始理解設計系統，喺現有組件庫基礎上生成同修改設計。Figma 官方仲開放了對 Code Connect、Figma Draw 等界面嘅訪問，令 MCP 嘅應用場景更完整。不過免費用戶每月得 6 次調用，認真用要訂閲 Dev 或 Full Seat。作者實測咗四個案例：用 Opus 4.6 生成摺疊屏閲讀 App、用 Composer 2 嘗試相同任務、由兒童理髮店 Landing Page 一路做到 React 頁面、畀現有項目補齊設計系統。結果顯示模型能力同提示詞策略好影響最終質素，尤其係用 plan 模式先規劃會令輸出更完整。最後 Kate 總結話，Figma MCP 而家最大價值係提升設計同開發之間嘅協作效率，但最後嘅審美判斷同交付把關依然要靠人。
- 結論：Figma MCP 升級後從「轉圖層」進化到「直接設計」，AI 能理解設計系統並執行操作，但未到完全取代設計師。
- 方法：透過 use_figma 工具同 9 個 Skills，AI 可以截圖自我迭代，逐步優化設計；先 plan 模式規劃再執行效果更好。
- 差異：唔同模型（Opus 4.6 vs Composer 2）同提示詞策略（有 plan vs 冇 plan）對最終質素影響好大。
- 啟發：AI 能夠沿住已有設計語言延展，幫團隊快速補全設計系統同頁面，但最後審美判斷仍需人類拍板。
- 可行動點：想認真用 Figma MCP 嘅話要訂閲付費 plan，同埋先用 plan 模式規劃清楚，再執行設計，效果會更完整。
Figma MCP 官方博客文章
宣佈 Figma Canvas 開放畀 Agents 嘅公告，介紹升級背景同能力
Figma MCP 伺服器入門指南
官方說明文件，包括安裝、認證同工具用法
Figma Community Skills
9 個配合 Agent 使用嘅 Skills，支援視覺能力同自我迭代
從「轉圖層」到「直接設計」：Figma MCP 升級核心
今次升級最關鍵嘅變化係新增咗 use_figma 工具，令 AI 可以喺 Figma 畫布上直接執行設計動作，而唔再剩係讀取同轉換圖層。配合 9 個 Skills，AI 仲可以透過截圖自我迭代，不斷細化輸出結果。
use_figma 工具
直接喺 Figma 畫布上執行設計動作
- get_design_context：攞到選中內容嘅上下文，默認仲輸出 React 同 Tailwind 資訊，對設計轉代碼好有用。
- generate_figma_design：將網頁捕獲後導入或轉化成 Figma 設計稿，適合「從網頁回到設計」。
- get_variable_defs：讀取設計令牌，例如顏色、間距等變量。
- get_code_connect_map：將 Figma 節點 ID 同代碼組件映射，打通設計系統同工程。
- use_figma：直接喺畫布度做設計動作，係今次重點。
- search_design_system：搜尋已連接嘅組件庫。
- create_new_file：畀 AI 直接喺 Figma 新建文件。
不過免費用戶每月得 6 次調用，認真用嘅話要訂閲 Dev 或 Full Seat。安裝過程唔算複雜，關鍵係配好認證同權限。
每月最多 6 次
案例一：用 Opus 4.6 生成摺疊屏閲讀 App
Kate 喺 Cursor 用 Opus 4.6 配合一份 Stitch 設計語言文檔，生成一個可摺疊手機閲讀應用嘅 Figma 頁面。佢打開咗 plan 模式，等 AI 先拆咗六個階段再執行。
plan 模式
AI 先檢查認證，跟住 create_new_file 新建文件，再調用 use_figma 開始設計。佢會建立顏色變量、檢查字體、逐屏生成界面，完成後仲會截圖驗證。
create_new_file
截圖驗證
結果整體風格淡雅，內屏展開同外屏摺疊態都幾完整，仲模擬咗 Wi-Fi 電量等細節。最重要係佢基本跟足咗原先畀佢嘅 Stitch 設計語言，配色、字體同界面氣質一致。
模型差異同設計到頁面鏈路
第二個案例用 Cursor 嘅 Composer 2 做同樣任務，結果明顯更保守，內容少，摺疊屏特徵唔夠強。呢個對比顯示模型能力同執行策略嘅影響好大，尤其係有冇用 plan 模式。
Composer 2 更保守
plan 模式重要
第三個案例由兒童理髮店 Landing Page 開始，用 Figma MCP 做設計，再配合 NanoBanana 生成圖片，最後透過 copy link to selection 畀另一個 Cursor Agent 直接轉成 React 頁面。AI 仲提醒用戶要換走遠程資源連結，因為唔一定穩定。
NanoBanana 生成圖片
get_design_context 生成 React
補齊設計系統同現階段判斷
第四個案例針對現有項目，用 GPT-5.4 先閲讀代碼，再建議補邊啲 Figma 組件。AI 自動生成 Voice Studio 主界面，完成後截圖檢查，發現高度問題會自己調整。之後仲升級成完整設計系統，創建變量集合、顏色系統、語義間距、陰影樣式同組件庫。
Voice Studio 主界面
變量集合、顏色系統
第五個案例嘗試修改現有頁面做瑞士設計風格，但一開始因為 Starter Plan 上限停咗。升級後繼續，生成後再根據截圖反饋調整，最終有改善但未盡完美。呢個案例反映 AI 幫到手，但人類手動微調同審美把關依然重要。
Starter Plan 調用上限
人類審美判斷仍然重要
大家好，我係 Kate。
呢排，Figma MCP 有個好值得留意嘅升級。以前我哋多數當佢係「設計資訊讀取工具」或者「網頁轉圖層工具」嚟用，但今次升級之後，佢已經開始向住真正嘅「AI 設計執行接口」演進。而家你可以直接叫 AI Agent 喺 Figma 畫布上面工作，透過 use_figma 呢啲工具，喺現有設計系統嘅基礎上面生成、修改同補全設計資源。
博客文章：https://www.figma.com/blog/the-figma-canvas-is-now-open-to-agents/
呢件事最得意嘅地方係，佢唔再係淨係將一個靜態網頁或者 HTML 截圖轉換成圖層，而係開始具備「理解設計系統並喺畫布入面操作」嘅能力。你可以透過 Claude Code、Codex，或者其他支援 MCP 嘅客戶端，將設計、上下文、組件庫同代碼流程串埋一齊。對好多設計師、前端開發者、獨立開發者嚟講，呢個變化係好關鍵嘅。
由「轉圖層」到「直接設計」
Figma MCP 其實已經存在咗一段時間。之前比較典型嘅工具係 generate_figma_design，佢可以將實時應用或者網站嘅 HTML 轉成可編輯嘅 Figma 圖層。呢個已經好有用，因為佢可以幫我哋快速將線上界面拉返去設計稿度繼續編輯。
但係今次真正令我覺得佢變勁嘅，係全新嘅 use_figma。佢嘅邏輯唔再係淨係「讀取」同「轉換」，而係叫 AI 根據你現有嘅設計系統，直接喺 Figma 畫布上面執行設計動作。換句話講，AI 唔單止係睇圖講嘢，而係真係開始喺設計環境入面動手。
Figma 同合作夥伴今次仲放出咗 9 個 Skills。
https://www.figma.com/community/skills
配合支援視覺能力嘅 AI Agent 使用時，呢啲 Skills 會透過截圖、自我修復、反覆校正嘅方式，不斷細化輸出結果。即係話，AI 唔係一次過吐出一個結果就完，而係可以一邊睇、一邊改、一邊迭代到更接近你預期嘅狀態。
另外，今次 Figma 仲開放咗對 Code Connect、Figma Draw 同 FigJam 等界面嘅存取。呢個意味住 MCP 嘅使用場景唔再只侷限喺最基礎嘅畫布編輯，而係逐漸往更完整嘅設計協作鏈路延伸。
使用門檻同安裝方式
當然，呢度都有一個現實問題，就係配額同訂閲。
Figma 官方 MCP 對免費用戶提供嘅工具調用次數非常有限，基本上係每月最多 6 次。呢個數量如果只係體驗嚇，勉強可以；但如果你真係想叫 AI 喺 Figma Canvas 入面持續幫你做設計，咁呢個額度肯定唔夠。要認真用，都係要考慮訂閲 Dev 或 Full Seat 呢類方案。
安裝本身就唔複雜。如果你用緊 Cursor，可以直接喺 Marketplace 度揾到 Figma 並安裝。如果你係喺 Claude Code 入面用，就透過命令安裝官方嘅 Figma MCP。安裝完成之後，需要做一次身份驗證。
如果係喺 Codex 入面用，流程都比較清晰：先加相關 Skills，然後喺設定入面加 MCP Server，再安裝同認證 Figma 伺服器。成個過程唔算麻煩，關鍵係將認證同權限都 set 好，後面先可以順暢咁叫 AI 調用。
Figma MCP 嘅核心工具到底做到啲乜
Figma MCP 真正嘅價值，唔在於「佢連唔連到」，而在於佢連咗之後到底做到啲乜。
get_design_context 可以獲取當前 Figma 揀中內容嘅上下文，預設仲可以輸出 React 同 Tailwind 方面嘅資訊。呢點對設計轉代碼特別有幫助，因為佢唔係淨係俾你一張圖，而係將設計上下文盡量轉換成可以繼續開發嘅結構。
generate_figma_design 比較偏向將網頁捕獲之後導入或轉化成 Figma 設計稿，適合做「由網頁返去設計」嘅事。
get_variable_defs 用嚟讀取設計入面已經用咗嘅變數，例如顏色、間距呢類設計令牌。
get_code_connect_map 就可以將 Figma 節點 ID 同代碼庫入面嘅組件映射埋一齊，呢個對設計系統同工程體系打通好有價值。
use_figma 係今次嘅重點。佢容許 AI 直接喺畫布入面做設計動作。search_design_system 可以搜尋已經連咗嘅組件庫，create_new_file 就可以叫 AI 喺 Figma 入面直接開新檔案，甚至唔一定需要你手動先俾一個固定連結。
如果再結合 Figma Make 一齊用，成個鏈路就會變得更完整：既可以生成頁面，亦都可以喺設計系統框架下面繼續往代碼方向銜接。
第一個案例：叫 Opus 4.6 生成摺疊屏閲讀 App
跟住我做了幾個真實測試，先睇第一個案例。
我喺 Cursor 度用咗 Opus 4.6，叫佢根據一份設計系統文件，生成一個可摺疊手機閲讀應用嘅新 Figma 頁面。
呢度我特登開咗 plan 模式，叫佢先做完整規劃。佢先拆咗六個階段，然後先開始真正執行。
從執行過程嚟睇，AI 會先檢查 Figma 係咪已經認證，再透過 create_new_file 開新檔案，接着調用 use_figma 喺 Figma Canvas 入面進行設計。之後佢會去創建設計 Token、整理顏色變量集合、檢查字體，再開始逐屏生成界面。
得意嘅係，佢唔係畫完就完，而係會喺生成之後截圖驗證。雖然個別內容，例如書名同作者，並冇完全一一對應，但從整體結果嚟睇，畫面嘅氣質已經非常接近一套真正嘅產品設計稿。整體風格偏淡雅，內屏展開後嘅主頁、書架頁、沉浸式閲讀頁都做出咗嚟，外屏摺疊態甚至仲模擬咗 Wi-Fi、電量同時間呢啲細節。
最令我滿意嘅係，佢並唔係毫無根據咁「自由發揮」，而係大致跟足我最開頭俾佢嘅設計系統語言。佢生成出嚟嘅頁面，喺配色、字體選擇同界面氣質上都比較統一。呢個意味住 AI 真係開始具備「喺規則中創作」嘅能力，而唔係隨便拼貼幾個元素。
我將 Stitch 嘅設計語言餵俾 AI，結果比我預期更加似
呢個案例入面仲有一個好關鍵嘅前置步驟。
我喺上一期影片入面講過 Google 嘅 Stitch，當時我叫 Stitch 生成過一套可摺疊 Android 閲讀應用嘅設計語言。
Google Stitch 大升級 + AI Studio Build 實測：設計到應用一條龍，太勁了
我今次做嘅，係將嗰一份設計語言提取出嚟，翻譯整理成 DESIGN.md，再掉返畀 Cursor，叫 Opus 4.6 根據呢份設計系統繼續生成 Figma 頁面。
最後出嚟嘅效果令我印象好深。佢唔單止保留咗原始設計語言入面嘅配色傾向，連排版間距同整體風格都相當接近 Stitch 最初畀出嘅視覺方向。換句話講，AI 唔單止識得「做設計」，而且開始可以「沿住現有嘅設計語言繼續生落去」。
呢個對團隊協作好重要。因為好多時候我哋並唔需要 AI 完全由零開始重新發明一套界面，我哋更加需要嘅係佢喺現有風格之上高效延伸。
第二個案例：換成 Composer 2，效果會點
接着我又換咗一個模型，用 Cursor 最近推出嘅 Composer 2 再跑一次。
佢都做出咗兩個頁面，整體風格同我提供嘅設計語言 Markdown 都算似，顏色方向冇走樣。
但實際睇落，呢一輪輸出明顯保守啲，內容都少啲。尤其喺摺疊屏展開態嘅處理上，頁面雖然做出咗，但冇特別強嘅摺疊屏特徵，左邊圖標偏細，資訊量都唔夠。
呢個其實都令我更加清楚感受到，模型能力同執行策略嘅差異係好明顯嘅。
呢度一方面係 Composer 2 本身嘅表現，另一方面亦都同我當時冇用 plan 模式有關。冇事先將頁面結構、資訊層級同內容範圍規劃清楚，AI 最後通常就更容易淨係畀出一個「睇得嚇」嘅版本，而唔係一個「夠完整」嘅版本。
所以，如果你真係想用 Figma MCP 生成更成熟嘅設計，唔單止模型要揀啱，提示詞嘅深度同工作流安排都好重要。
第三個案例：由兒童理髮店 Landing Page 一路做到 React 頁面
第三個案例係我自己好鍾意嘅一次測試，因為佢唔單止停留喺設計稿層面，而係將「設計到頁面」嘅鏈路 run 通咗。
我叫 AI 用 Figma MCP 做一個「小鳥兒童理髮店」嘅 Landing Page，並且最終生成可以真係展示嘅網頁。呢個頁面入麪包含服務項目、理髮流程、門店環境、家長評價、提前預約、常見問題等模塊，整體係一個好完整嘅營銷落地頁結構。
其中頁面用到嘅圖片，係 Cursor 叫 NanoBanana 生成嘅。最後生成出嚟嘅三張圖，頭兩張我覺得已經相當唔錯，第三張就差啲。之後我又叫 AI 將呢啲圖片取代到當前頁面度，取代原本 Figma MCP 返嘅遠端圖片資源，並適當加啲 motion 動畫效果。
咁樣一來，最後出嚟嘅頁面就唔單止係「有設計稿」，而係真係更接近一個可以交付嘅前端頁面。
呢個案例之前，我先叫 GPT-5.4 參考多鄰國官網，抽取出佢嘅視覺語言，用 Figma MCP 生成咗一套完整嘅設計系統。佢唔單止創建咗組件庫、變體同設計規範，仲嘗試拉取真實嘅 Logo、字體同顏色資產，將呢啲資訊統一放咗入一個新嘅 Figma 檔案度。
後面我再叫佢根據呢套風格去延伸兒童理髮店頁面，成個結果就會穩定好多。
我當時仲叫佢進一步將頁面做成高保真版本。
過程中有一張卡片用咗橘色元素，我覺得同整體氣質唔係好夾，就自己手動調整咗背景同文字顏色。
呢個細節我覺得好真實，亦都好重要：AI 已經可以將 80% 甚至更多嘅結構同視覺方向做出嚟，但最後嗰一點審美判斷，好多時都係由人嚟拍板會穩陣啲。
等 Figma 頁面做完之後，我又開咗一個 Cursor Agent 頁面，將某個圖層嘅連結透過 copy link to selection 複製入去，叫 AI 直接根據呢個連結生成 React 應用。佢隨即調用 get_design_context in Figma 開始寫 code，好快就將頁面搭出嚟。
呢個過程中，AI 仲主動提醒我：有啲插圖同圖標係用 Figma MCP 返嘅遠端資源連結，呢類資源唔一定長期穩定，所以最好換成自己生成或者自己託管嘅素材。
第四個案例：幫現有項目補設計系統
頭兩個案例更加係喺「生成新頁面」，跟住呢個案例就更加接近好多人真實工作嘅場景：
我已經有一個現有項目，可唔可以叫 Figma MCP 直接幫我補齊設計系統、優化視覺組件，甚至繼續擴展頁面？
我先叫 AI 睇我現有嘅 code 檔案，問佢從呢個項目出發，可以透過 Figma MCP 先做啲咩組件。
GPT-5.4 畀咗啲建議之後，我就叫佢先做一個 Voice Studio 主界面，並將結果直接生成到 Figma Canvas 度。
呢個過程中，即使你冇事先開新頁面，其實都冇問題，因為佢自己就會開新頁。
生成結果出嚟之後，佢仲會自己截圖檢查。發現某啲區域嘅高度唔啱，佢會繼續調整。
之後我再進一步提示佢，將呢啲視覺組件升級成更規範嘅 Figma 設計系統，並補一頁完整嘅 Mimo Voice Studio Web 端界面。
最終佢唔單止畀咗一個 cover 頁面，仲整理出一整套基礎樣式集，將顏色、字體、字號、actions、feedback 等組件都系統咁列曬出嚟，後面仲繼續擴展成多個 Web 頁面、桌面端設置頁面同手機端展示頁面。
從結果上嚟睇，呢個案例最有價值嘅，唔係佢「畫得有幾靚」，而係佢幫我將原本零碎嘅設計語言拆成結構清楚、可重用、可維護嘅體系。佢會創建變量集合、顏色系統、語義間距、語義文字樣式、陰影樣式同組件庫。呢種程度嘅拆分，對後續功能增加、頁面調整同跨頁面保持一致好有幫助。
第五個案例：直接改現有頁面風格
最後我再試咗一個更加貼近「修改需求」嘅場景。
我拎咗一開始透過 Figma AI 做嘅一個頁面，叫 AI 繼續調整，並將佢改成瑞士設計風格。最開始佢話我知，喺讀取頁面之後觸發咗 Starter Plan 嘅調用上限，所以冇辦法繼續做。後來我升級咗 plan，頭幾個案例都係喺升級之後完成嘅。
重新開始之後，AI 會先生成第一版，然後我再根據結果截圖，叫佢繼續改。例如有一塊區域明顯比較空，我就叫佢針對呢個問題再調一次。最後佢確實做出咗一啲改善。
當然，坦白講，呢種「現有頁面風格改造」嘅場景，AI 目前仲未係每一步都做得特別完美。
有啲地方你手動微調嚇，效果可能會更好，成本都更可控。畢竟而家調用呢啲模型唔平。
不過從另一個角度睇，呢個都已經夠曬說明問題：即使我本身唔擅長 Figma，藉助 Figma MCP，我都可以將「頁面風格調整」「結構延伸」「設計系統補齊」呢啲原本門檻好高嘅事推鬱佢。
我對 Figma MCP 而家嘅判斷
如果要我總結一句話，我會話：Figma MCP 而家已經由「得意嘅嘗試」走到咗「開始實用」嘅階段。
當然，現階段佢都遠未到「完全取代設計師」或者「完全自動化交付」嘅程度。模型之間差異好大，提示詞質量影響好大，訂閲成本都要考慮，最後嘅人類審美判斷同交付把關依然好重要。
但如果你嘅目標唔係「一鍵完美出圖」，而係「提高設計同開發之間嘅協作效率」，咁 Figma MCP 已經好值得認真去試。
廣告
過去我已經創作咗 400+ 篇AI主題原創內容，我對繼續寫作充滿信心，因為呢個係我嘅興趣，我好鍾意呢件事。
如果你鍾意我嘅文章同影片，歡迎加入我嘅知識星球，我會分享最新嘅 AI 資訊、原始碼，答你嘅問題。我哋下次再見啦！
最近文章，請睇呢度：
Google Stitch 大升級 + AI Studio Build 實測：設計到應用一條龍，太勁了
MiniMax M2.7 深度實測：Agent 能力強，OpenClaw 搭配體驗拉滿
GPT-5.4 變強咗幾多？我實測後只想話：一邊驚艷，一邊抓狂
Qwen3.5 小模型實測：0.8B 到 35B-A3B，本地推理/視覺/OCR/編碼到底有幾勁？
大家好，我是 Kate。
這段時間，Figma MCP 有了一個非常值得關注的升級。以前我們更多是把它當成“設計信息讀取工具”或者“網頁轉圖層工具”來看，但這次升級之後，它已經開始朝着真正的“AI 設計執行接口”演進了。現在，你可以直接讓 AI Agent 在 Figma 畫布上工作，通過 use_figma 這樣的工具，在現有設計系統的基礎上生成、修改和補全設計資源。
博客文章：https://www.figma.com/blog/the-figma-canvas-is-now-open-to-agents/
這件事真正有意思的地方在於，它不再只是把一個靜態網頁或者 HTML 截圖轉換成圖層，而是開始具備“理解設計系統並在畫布中操作”的能力。你可以通過 Claude Code、Codex，或者其他支持 MCP 的客戶端，把設計、上下文、組件庫和代碼流程串在一起。對很多設計師、前端開發者、獨立開發者來說，這個變化是很關鍵的。
從“轉圖層”到“直接設計”
Figma MCP 其實已經存在一段時間了。之前比較典型的工具是 generate_figma_design，它可以把實時應用或者網站的 HTML 轉成可編輯的 Figma 圖層。這已經很有用了，因為它能幫助我們快速把線上界面拉回到設計稿裏繼續編輯。
但這次真正讓我覺得它變強的，是全新的 use_figma。它的邏輯不再只是“讀取”和“轉換”，而是讓 AI 根據你現有的設計系統，直接在 Figma 畫布上執行設計動作。換句話說，AI 不只是看圖說話，而是真的開始在設計環境裏動手了。
Figma 和合作夥伴這次還放出了 9 個 Skills。
https://www.figma.com/community/skills
配合支持視覺能力的 AI Agent 使用時，這些 Skills 會通過截圖、自我修復、反覆校正的方式，不斷細化輸出結果。也就是說，AI 不是一次性吐出一個結果就結束了，而是可以一邊看、一邊改、一邊迭代到更接近你預期的狀態。
另外，這次 Figma 還開放了對 Code Connect、Figma Draw 和 FigJam 等界面的訪問。這意味着 MCP 的使用場景不再只侷限在最基礎的畫布編輯，而是逐漸往更完整的設計協作鏈路延展。
使用門檻和安裝方式
當然，這裏也有一個現實問題，就是配額和訂閲。
Figma 官方 MCP 對免費用戶提供的工具調用次數非常有限，基本是每月最多 6 次。這個數量如果只是體驗一下，勉強可以；但如果你真的想讓 AI 在 Figma Canvas 裏持續幫你做設計，那這個額度肯定是不夠的。要認真使用，還是得考慮訂閲 Dev 或 Full Seat 這一類方案。
安裝本身倒不復雜。如果你用的是 Cursor，可以直接在 Marketplace 裏找到 Figma 並安裝。如果你是在 Claude Code 裏使用，就通過命令安裝官方的 Figma MCP。安裝完成之後，需要做一次身份驗證。
如果是在 Codex 裏使用，流程也比較清晰：先添加相關 Skills，然後在設置中添加 MCP Server，再安裝並認證 Figma 服務器。整個過程不算繁瑣，關鍵是把認證和權限都配好，後面才能順暢地讓 AI 調用。
Figma MCP 的核心工具到底能做什麼
Figma MCP 真正的價值，不在於“它能不能連上”，而在於它連上之後到底能做什麼。
get_design_context 可以獲取當前 Figma 選中內容的上下文，默認還能輸出 React 和 Tailwind 方向的信息。這一點對設計轉代碼特別有幫助，因為它不是隻給你一張圖，而是把設計上下文儘量轉換成可以繼續開發的結構。
generate_figma_design 更偏向於把網頁捕獲後導入或轉化成 Figma 設計稿，適合做“從網頁回到設計”的事情。
get_variable_defs 用來讀取設計裏已經使用的變量，比如顏色、間距這類設計令牌。
get_code_connect_map 則可以把 Figma 節點 ID 和代碼庫裏的組件映射起來，這對於設計系統和工程體系打通很有價值。
use_figma 是這次的重點。它允許 AI 直接在畫布中做設計動作。search_design_system 可以搜索已經連接的組件庫，create_new_file 則能讓 AI 在 Figma 裏直接新建文件，甚至不一定需要你手動先給一個固定連結。
如果再結合 Figma Make 一起使用，整個鏈路就會變得更完整：既能生成頁面，也能在設計系統框架下繼續往代碼側銜接。
第一個案例：讓 Opus 4.6 生成摺疊屏閲讀 App
接下來我做了幾個真實測試，先看第一個案例。
我在 Cursor 裏用的是 Opus 4.6，讓它根據一份設計系統文檔，生成一個可摺疊手機閲讀應用的新 Figma 頁面。
這裏我特意打開了 plan 模式，讓它先做完整規劃。它先拆了六個階段，然後才開始真正執行。
從執行過程來看，AI 會先檢查 Figma 是否已經認證，再通過 create_new_file 新建文件，接着調用 use_figma 在 Figma Canvas 中進行設計。之後它會去創建設計 Token、整理顏色變量集合、檢查字體，再開始逐屏生成界面。
有意思的是，它不是畫完就結束，而是會在生成後截圖驗證。雖然個別內容，比如書名和作者，並沒有完全一一對應，但從整體結果來看，畫面的氣質已經非常接近一套真正的產品設計稿了。整體風格偏淡雅，內屏展開後的主頁、書架頁、沉浸式閲讀頁都做出來了，外屏摺疊態甚至還模擬了 Wi-Fi、電量和時間這些細節。
最讓我滿意的是，它並不是毫無根據地“自由發揮”，而是基本遵循了我最開始給它的設計系統語言。它生成出來的頁面，在配色、字體選擇和界面氣質上都比較統一。這意味着 AI 真正開始具備“在規則中創作”的能力，而不是隨便拼貼幾個元素。
我把 Stitch 的設計語言餵給 AI，結果比我預期更像
這個案例裏還有一個很關鍵的前置步驟。
我在上一期視頻裏講過 Google 的 Stitch，當時我讓 Stitch 生成過一套可摺疊安卓閲讀應用的設計語言。
Google Stitch 大升級 + AI Studio Build 實測：設計到應用一條龍，太強了
我這次做的，是把那一份設計語言提取出來，翻譯整理成 DESIGN.md，再丟回 Cursor，讓 Opus 4.6 根據這份設計系統繼續生成 Figma 頁面。
最後出來的效果讓我印象挺深。它不僅保留了原始設計語言裏的配色傾向，連排版間距和整體風格也都相當接近 Stitch 最初給出的視覺方向。換句話說，AI 不只是會“做設計”，而且開始能“沿着已有的設計語言繼續往下長”。
這對團隊協作很重要。因為很多時候我們並不需要 AI 完全從零開始重新發明一套界面，我們更需要的是它在已有風格之上高效延展。
第二個案例：換成 Composer 2，效果會怎樣
接着我又換了一個模型，用 Cursor 最近推出的 Composer 2 再跑了一次。
它也做出了兩個頁面，整體風格和我提供的設計語言 Markdown 還是比較像的，顏色方向沒有跑偏。
但實際看下來，這一輪輸出明顯更保守，內容也更少。尤其是在摺疊屏展開態的處理上，頁面雖然做出來了，卻沒有特別強的摺疊屏特徵，左側圖標偏小，信息量也不夠。
這其實也讓我更清楚地感受到，模型能力和執行策略的差異是很明顯的。
這裏一方面是 Composer 2 本身的表現，另一方面也和我當時沒有使用 plan 模式有關。沒有先把頁面結構、信息層級和內容範圍規劃清楚，AI 最後通常就更容易只給出一個“能看”的版本，而不是一個“足夠完整”的版本。
所以，如果你真的想拿 Figma MCP 生成更成熟的設計，不只是模型要選對，提示詞的深度和工作流安排也很重要。
第三個案例：從兒童理髮店 Landing Page 一路做到 React 頁面
第三個案例是我自己非常喜歡的一次測試，因為它不只是停留在設計稿層面，而是把“設計到頁面”的鏈路跑通了。
我讓 AI 用 Figma MCP 做一個“小鳥兒童理髮店”的 Landing Page，並且最終生成可以真實展示的網頁。這個頁面裏包含服務項目、理髮流程、門店環境、家長評價、提前預約、常見問題等模塊，整體是一個很完整的營銷落地頁結構。
其中頁面裏用到的圖片，是 Cursor 調用 NanoBanana 生成的。最後生成出來的三張圖裏，前兩張我覺得已經相當不錯，第三張稍微差一些。之後我又讓 AI 把這些圖片替換到當前頁面中，替換掉原本 Figma MCP 返回的遠程圖片資源，並適當加入一些 motion 動畫效果。
這樣一來，最後出來的頁面就不只是“有設計稿”，而是真的更接近一個可以交付的前端頁面。
這個案例之前，我先讓 GPT-5.4 參考多鄰國官網，抽取它的視覺語言，用 Figma MCP 生成了一套完整的設計系統。它不僅創建了組件庫、變體和設計規範，還嘗試拉取真實的 Logo、字體和顏色資產，把這些信息統一放進一個新的 Figma 文件裏。
後面我再讓它基於這套風格去延展兒童理髮店頁面，整個結果就會穩定很多。
我當時還讓它進一步把頁面做成高保真版本。
過程中有一張卡片用了橘色元素，我覺得和整體氣質不夠搭，就自己手動調了一下背景和文字顏色。
這個細節我覺得很真實，也很重要：AI 已經可以把 80% 甚至更多的結構和視覺方向做出來，但最後那一點審美判斷，很多時候還是人來拍板會更穩。
等 Figma 頁面做完之後，我又開了一個 Cursor Agent 頁面，把某個圖層的連結通過 copy link to selection 複製進去，讓 AI 直接根據這個連結生成 React 應用。它隨即調用 get_design_context in Figma 開始寫代碼，很快就把頁面搭出來了。
這個過程中，AI 還主動提醒我：有些插圖和圖標用的是 Figma MCP 返回的遠程資源連結，這類資源不一定長期穩定，所以最好換成自己生成或自己託管的素材。
第四個案例：給現有項目補設計系統
前面兩個案例更多是在“生成新頁面”，接下來這個案例則更接近很多人真實工作中的場景：
我已經有一個現有項目了，能不能讓 Figma MCP 直接幫我補齊設計系統、優化視覺組件，甚至繼續擴展頁面？
我先讓 AI 看我現有的代碼文件，問它從這個項目出發，可以通過 Figma MCP 先做哪些組件。
GPT-5.4 給了一些建議之後，我就讓它先做一個 Voice Studio 主界面，並把結果直接生成到 Figma Canvas 裏。
這個過程中，即使你沒有提前新建頁面，其實也問題不大，因為它自己就會新建。
生成結果出來以後，它還會自己截圖檢查。發現某些區域的高度不對，它會繼續調整。
之後我進一步提示它，把這些視覺組件升級成更規範的 Figma 設計系統，並補一頁完整的 Mimo Voice Studio Web 端界面。
最終它不僅給出了一個 cover 頁面，還整理出一整套基礎樣式集，把顏色、字體、字號、actions、feedback 等組件都系統地列出來，後面又繼續擴展成多個 Web 頁面、桌面端設置頁面和手機端展示頁面。
從結果上看，這個案例最有價值的，不是它“畫得多好看”，而是它幫我把原本零散的設計語言拆成了結構清楚、可複用、可維護的體系。它會創建變量集合、顏色系統、語義間距、語義文字樣式、陰影樣式和組件庫。這種程度的拆分，對後續功能增加、頁面調整和跨頁面保持一致性都很有幫助。
第五個案例：直接改現有頁面風格
最後我還試了一個更貼近“修改需求”的場景。
我拿一開始通過 Figma AI 做的一個頁面，讓 AI 繼續調整，並把它改成瑞士設計風格。最開始它告訴我，在讀取頁面之後觸發了 Starter Plan 的調用上限，所以沒辦法繼續做。後來我升級了 plan，前面幾個案例也都是在升級之後完成的。
重新開始之後，AI 會先生成第一版，然後我再根據結果截圖，讓它繼續修。比如有一塊區域明顯比較空，我就讓它針對這個問題再調一次。最後它確實做出了一些改進。
當然，坦白說，這種“已有頁面風格改造”的場景，AI 目前還不是每一步都做得特別完美。
有些地方你手動微調一下，效果可能會更好，成本也更可控。畢竟現在調用這些模型並不便宜。
不過從另一個角度看，這也已經足夠說明問題了：即使我本身並不擅長 Figma，藉助 Figma MCP，我也可以把“頁面風格調整”“結構延展”“設計系統補齊”這些原本門檻很高的事情推進起來。
我對 Figma MCP 現在的判斷
如果要我總結一句話，我會說：Figma MCP 現在已經從“有意思的嘗試”走到了“開始實用”的階段。
當然，現階段它也遠沒有到“完全替代設計師”或者“完全自動化交付”的程度。模型之間差異很大，提示詞質量影響很大，訂閲成本也要考慮，最後的人類審美判斷和交付把關依然很重要。
但如果你的目標不是“一鍵完美出圖”，而是“提高設計與開發之間的協作效率”，那 Figma MCP 已經非常值得認真去試了。
廣告
過去我已創作了 400+ 篇AI主題原創內容，我對繼續寫作充滿信心，因為這是我的愛好，我非常熱愛這件事。
如果喜歡我的文章和視頻，歡迎加入我的知識星球，我會分享最新的 AI 資訊、源代碼，回答你的問題。我們下次再見啦！
最近文章，請看這裏：
Google Stitch 大升級 + AI Studio Build 實測：設計到應用一條龍，太強了
MiniMax M2.7 深度實測：Agent 能力強，OpenClaw 搭配體驗拉滿
GPT-5.4 變強了多少？我實測後只想說：一邊驚豔，一邊抓狂
Qwen3.5 小模型實測：0.8B 到 35B-A3B，本地推理/視覺/OCR/編碼到底有多強？