Google Antigravity 接通 Figma 三分鐘出 code，離正式上線仲有幾關
由接駁設定到 responsive、無障礙同正式上線差距
Google Antigravity 經 MCP 接通 Figma，的確可以將幾張設計稿快速砌成識得轉頁嘅 React 網頁。XDA 作者個例子由落指令到 localhost 跑得郁，只用咗大約三分鐘。不過先講清楚：呢次係第三方用一個細規模 onboarding 畫面試玩，成果適合做 prototype 或開發起步，未足以證明複雜產品都可以同樣快手交貨。
接駁只係幾個設定
原文用 Figma desktop MCP：先喺 Antigravity 2.0 入面開 Settings、Customizations，去 MCP Store 加入 Figma Dev Mode MCP；跟住更新同開住 Figma desktop app，切去 Dev Mode，再啟用 desktop MCP server。兩邊連上之後，Antigravity 就可以讀取揀中嘅 frame、元件、變數同 layout 資料。Figma 而家建議用 remote MCP，不過原文全程用本機版本，Figma app 同相關檔案都要保持開住。
圖片：Figma
Figma 帳戶權限同用量有限制
MCP 唔會繞過 Figma 原有權限，登入帳戶本身睇唔到嘅檔案，agent 一樣攞唔到。XDA 作者提醒，desktop 做法牽涉付費方案嘅 Dev 或 Full seat；Figma 最新官方表再分得仔細啲：View、Collab 同 Starter 額度相當低，部分情況每月最多得 6 次讀取；Professional、Organization 或 Enterprise 嘅 Dev／Full seat，每日先可以讀取 200 至 600 次。小量試玩未必即刻撞牆，團隊日日生成同反覆對稿就要計清楚。
三分鐘整到嘅其實有幾多
作者揀咗四個手機 frame，包括 splash screen、練習頁、登入頁同訪客頁，叫 Antigravity 按設計 token 砌成互動網頁。agent 自己開 Vite React project、裝 Tailwind，再用 state 串起四頁同返回按鈕。呢個成果算快，不過 viewport 直接鎖死喺 390×844，登入亦只係畫面同轉頁狀態，未有真正身份驗證、後端資料或者錯誤處理。作者雖然形容佢係「real app」，但以功能完整度嚟講，距離正式推出仲遠。
視覺相似度唔等於 code 質素
作者再叫 Antigravity 對照 Figma 同瀏覽器畫面，agent 發現漸變位置、字體大小、字距同非對稱 layer offset 有偏差，連原稿用漸變 SVG、成品改用 CSS 圖形都捉到。呢種自動 design QA 幾實用，尤其可以先掃走肉眼容易漏嘅細節。不過作者講嘅「約 90% 準確」只係個人判斷，冇跨裝置比較、像素差異數據或者重複測試，唔應該當成固定命中率。
原稿愈有結構，輸出先愈穩
作者嘗試抽取 design token 時，因為 Figma 檔案只係直接填色，冇用 Variables，所以工具回傳唔到 token。Antigravity 最後由已生成嘅 code 反推色彩同間距，再砌出 token 檔同 Tailwind 設定。呢招方便，但 agent 其實係推斷設計規則，命名同分類未必符合團隊原意。Figma 官方建議先整理 components、Variables、Auto Layout、語意清楚嘅 layer 名，再用 Code Connect 對應現有元件；否則模型好多時只可以估。
Responsive 同無障礙要另外落功夫
鎖死 390×844 可以令 demo 好睇，轉去細屏幕、平板、桌面或者放大字體就未必頂得住。正式開發要再測 breakpoint、內容溢出、橫屏、動態高度同不同語言字數。原文亦冇交代鍵盤操作、焦點次序、表單 label、screen reader 語意、色彩對比、減少動畫設定同觸控範圍；呢啲唔會單靠設計稿自動補齊，仍然要按 WCAG 做人工檢查同自動測試。
可部署同適合正式推出仲差一輪工程
Figma 官方講得好直接：MCP server 提供結構化設計 context，最後嘅 code 由 AI agent 生成，官方冇保證係 production-ready。團隊仲要檢查元件有冇重複、狀態管理、API、身份驗證、輸入驗證、依賴套件、安全、測試、效能同錯誤處理。Antigravity 嘅 MCP、指令同檔案操作預設可以設成逐次詢問；處理公司設計系統或客戶 repository 時，權限最好收窄到指定 server、工具同 project。用佢起稿同對視覺差異幾吸引，正式推出仍然要前端工程師逐關驗收。
參考來源
- XDA Developers — I connected Google Antigravity to Figma with MCP, and it turns my designs into working code in minutes — original report
- Google Antigravity：Model Context Protocol 文件 — 核對 Antigravity 2.0 MCP Store、Figma Dev Mode MCP 支援同設定位置。
- Figma：設定 desktop MCP server — 核對 Figma desktop app、Dev Mode、本機 server 同選取／連結讀取方式。
- Figma：MCP rate limits 與存取權限 — 核對方案、seat、讀取額度同檔案權限限制。
- Figma：MCP 點解唔會直接交 production-ready code — 官方釐清 MCP 主要提供設計 context，最終 code 由 AI agent 按項目要求生成。
- Figma：整理設計檔以改善輸出 — 支援 components、Variables、Auto Layout、語意命名同 Code Connect 嘅建議。
- W3C：WCAG 2 Overview — 無障礙檢查同驗收標準背景。
- Google Antigravity：Agent Permissions — 核對 MCP、指令、檔案同網址操作嘅 Ask／Allow／Deny 權限設定。
本文根據原文及公開資料整理；資料有出入時，以原文及官方資料為準。
