如果你用 AI coding agent（Cursor、Claude Code、Windsurf、Codex）去由設計做 UI，你多數都撞過同一個牆：將一張截圖貼入 chat 對簡單元件仲算得，但一遇到真實項目就會散。agent 會推測；推測通常錯；你再修正；token 一直燒；最後索性自己重做。
其實有更好嘅流程。先用 Codia AI 將截圖轉成可編輯、分好圖層嘅 Figma file，再做一輪簡短整理。之後再將 Figma MCP server 接去你個 agent。咁個 agent 讀到嘅就唔再係平面圖片，而係真正嘅圖層結構同文字，再加上你整理時補上嘅 Variables 同 components。輸出質素會高好多，迭代次數會少好多，整個工作感覺都冇咁似同工具搏鬥。
可以用 Codia Screenshot to Figma 把截圖和 UI 圖片轉成可編輯的 Figma 圖層，再繼續重設計、比較或交付。
乜嘢係 Figma MCP Server？
Figma MCP server 係 Figma file 同支援 Model Context Protocol 嘅 AI agent 之間嘅官方橋樑。佢會將你嘅 Figma file、components、Variables 同 design tokens 以結構化資料形式提供俾 agent 直接讀取，而唔係逼 agent 由 screenshot 反推一切。
到重建步驟時，可以打開 Codia Screenshot to Figma，先把參考圖轉成可編輯圖層，再繼續調整設計。
今日支援 MCP 嘅編輯器有：VS Code、Cursor、Windsurf、Claude Code、Codex。
MCP 解決咩問題
你如果喺 Cursor 或 Claude Code 貼一張截圖，然後話「幫我整呢個」，agent 會做以下嘢：
- 用 vision 睇圖片
- 猜 layout 結構
- 猜 spacing
- 猜顏色
- 猜 components
- 根據呢啲猜測去寫 code
每個「猜」都會疊加 token 成本同拉低質素。真實 design file 已經將呢啲資訊 作為資料 存咗喺入面，唔係淨係做成 pixels。MCP 就係將呢啲資料暴露出嚟。
Codia 喺呢個流程入面解決咩問題
MCP 需要一個 Figma file 先至有用。如果你手上冇 Figma file——只得一張你想 build 嘅 reference screenshot——MCP 幫唔到你，又要返去貼圖。
Codia 就係補返呢個缺口。Screenshot → Codia → 分好圖層、可編輯嘅 Figma file（唔再係一張平面圖）→ 喺 Figma 做一輪簡短整理（幫關鍵圖層改名、整 components、套 Variables、喺重要位置加 Auto Layout）→ MCP-ready。
三步流程
第一步：用 Codia 將截圖轉換
拎你嘅 reference screenshot——競品頁、靈感圖、現有 production screen——用 Codia AI 轉成 Figma：
- 將 PNG、JPG 或 WebP 截圖上傳去 Codia Figma plugin 或 web app
- 執行轉換（大部分畫面幾分鐘內就可以開始編輯）
- 喺 Figma 開啟結果
輸出係一個 Figma frame：可編輯嘅文字圖層（會識別字體、字號同顏色）、形狀、各自做獨立圖片圖層嘅相片同 icons，仲有分好組、有層級嘅圖層結構。Auto Layout 只會出現喺 Codia 偵測到類似 flex 排版嘅部分行同列；大部分結果都係絕對定位，而且 Codia 唔會建立 components、Variables，亦唔會幫圖層起有語意嘅名。重點係：佢有 結構——真正嘅圖層而唔係像素——呢個就係下一步整理嘅基礎。
有關轉換本身，可以睇 Screenshot to Figma: The Complete Guide。
第二步：為 MCP 清理 Figma file
MCP 對乾淨嘅 Figma file 回報特別大。做一輪簡短整理：
- Apply Variables 去顏色。原始 hex value 只會畀 agent 字串；Variables 先會畀佢 tokens。agent 生成出嚟嘅 code 就會跟你 design system，而唔係自己亂作一套。
- 補上 Auto Layout，用喺應該 responsive 嘅 container 上——Codia 只係喺部分行同列用咗，其餘要自己檢查。MCP 會將呢啲直接反映成 agent 對版面行為嘅理解。
- 用有意義嘅名字命名 components。
PrimaryButton、NavItem、PricingCard，唔好叫Group 47。agent 會用呢啲名稱寫 code。 - 將重複元素整成 components，唔好淨係散落做 ad-hoc 副本。MCP 會將 components 當成一等概念暴露。
Codia 幫你慳返嘅係幾個鐘嘅手動描圖——你由可編輯、分好組嘅圖層開始，唔使成個畫面重畫——但慳唔到呢輪整理。佢只會用 group、text、image 呢類通用名稱，唔會建立 components 或 Variables，Auto Layout 亦只會加喺偵測到類似 flex 排版嘅行或列。正正係呢輪整理，先令個 file 變成 MCP-ready。
第三步：連接 MCP 到編輯器並生成
喺你揀嘅 editor 入面安裝同設定 Figma MCP server。官方 setup guide：Figma MCP server guide。
然後喺 prompt 入面引用 Figma file 或 selection：
"Use the Figma file [link or selection ID] to build a React component matching this design exactly. Use the design system Variables. Match the spacing tokens."
咁 agent 就有咗：
- 真實 layer hierarchy
- Auto Layout 提供嘅真實 spacing value
- Variables 提供嘅真實 color token
- 真實 component definition
- 可選擇嘅 selection screenshot（方便視覺確認）
輸出會比「直接貼 screenshot」精準得多。
點解呢條 pipeline 比「貼 screenshot 入 chat」更好
| Approach | Agent 拎到乜 | 輸出質素 | Token 成本 |
|---|---|---|---|
| 直接貼 screenshot 入 chat | Pixels + 你嘅 prompt | 低至中，靠好多推測 | 高，因為要不斷修正 |
| Codia → 整理 → MCP → agent | 可編輯圖層 + 你整理出嚟嘅 components、Variables + screenshot | 中至高，少咗好多推測 | 較低，因為修正少 |
| 同上，而且整理時對齊你嘅 design system | 同上，再加 design system data | 高 | 最低 |
實際上：agent 收到嘅結構越多係數據而唔係像素，UI 生成任務需要嘅「幫我改呢個」迭代就會比 screenshot-only prompt 越少，token 支出都相應下降。
Cursor 入面一步步做
Cursor 具體例子：
- 喺 Figma 打開你喺第 2 步整理好嘅 Codia 生成 file，揀你想 build 嘅 frame。
- 喺 Cursor 安裝 Figma MCP server（Settings → MCP → Add Server）。
- 喺 Cursor chat 寫：
"Using the Figma MCP server, fetch the selected frame from my Figma file and generate a React + Tailwind component matching the design exactly. Use Variables as Tailwind theme tokens." - agent 會 call MCP tool，攞到結構化 data 同 selection screenshot。
- 佢會生成 component。 第一版通常已經比 screenshot prompt 近好多。
- 再 iterate，用同一個 Figma source 提出更具體修改。
配合 Claude Code
流程一樣，只係工具唔同。Claude Code 原生支援 MCP。Figma MCP server 嘅安裝方式都一樣，prompt 寫法亦都一樣。
如果你本身已經用 Claude Code 做 backend work，加埋 Figma MCP server 之後，同一個 agent 都可以根據你 Codia 轉出嚟嘅 Figma file 來 build UI。
配合 Windsurf
都係同樣做法。Windsurf 支援 MCP，所以 Figma MCP server 接入方式同 Cursor 或 Claude Code 一樣。
常見陷阱
跳過 Variables。 如果 Figma file 全部都係 raw hex value，MCP 會回傳 raw string 畀 agent。加返 design system Variables，先可以令輸出跟住你品牌，而唔係「差唔多似」你品牌。
唔用 Auto Layout。 冇 Auto Layout，MCP 只能描述位置，唔能夠表達 responsive 意圖。Auto Layout 會令 agent 知道「呢個係有 16px gap 嘅 flex row」——呢啲先係可用資訊。
一個 prompt 要求太多。 「整成個 dashboard」太大。"Build the sidebar component matching the Figma selection" 會好好多。先由 component 開始，再逐步組裝。
喺 Figma 揀得唔精準。 MCP 會拎你揀嘅範圍。揀得含糊，context 就含糊。要精準揀你想要嗰個 frame。
Screenshot prompt 同 MCP 混埋一齊。 如果你已經有 MCP，就用 MCP。唔好同時又貼 screenshot，因為 agent 會見到兩個真相來源，最後揀對自己最方便嗰個。
超越單次畫面：建立 component library
呢條 pipeline 可以擴展：
- 用 Codia 轉一批代表性 screenshots
- 喺 Figma 入面 componentize 結果
- 套用 Variables 同 design system
- 用 MCP 生成對應嘅 code component library
批次轉換可以用 Visual Struct API —— 佢嘅批次 endpoint 可以一次過處理大量圖片，處理完會用 webhook callback 通知你。
乜情況唔應該用呢條 pipeline
- 簡單 buttons 或 icons。 有時直接貼圖畀 agent 會快啲。
- 你已經喺 Figma 原生有 design。 跳過 Codia，直接去 MCP。
- 唔需要 design fidelity 嘅 code generation。 如果「大概似樣」就得，screenshot path 可能已經夠。
FAQ
要唔要俾錢先用到 Figma MCP server？
官方 Figma MCP server 係 Figma platform 嘅一部分；關於 MCP 可用性，請參考 Figma 嘅 plan tiers。
agent 會睇到真正嘅 Figma file 定只係 API？
MCP server 會俾 agent 你 Figma file 入面嘅結構化資料（layers、name、position、Variables、components），亦可以回傳 selection screenshot 做視覺確認。
我可唔可以用自己嘅 Figma file（唔係 Codia 轉出嚟）？
可以——MCP 對任何結構良好嘅 Figma file 都有效。Codia 只係處理你只有 screenshot、冇既有 Figma source 嘅情況。
如果我轉出嚟嘅 Figma file 好亂，點算？
無論點都預留一輪簡短整理：Codia 畀你嘅係可編輯、分好組嘅圖層，但命名、components 同 Variables 要靠你自己。幫關鍵圖層改名、將重複元素整成 components、套 Variables，再喺重要位置加 Auto Layout。agent 輸出質素會跟住 file 質素走。
呢個方法同 Cursor 嘅 Auto / Claude / GPT models 配唔配合？
配合。MCP 係 model-agnostic；server 會將結構化資料提供俾 editor 正在用嗰個 model。
呢個同 Figma Make 有咩分別？
Figma Make 係喺 Figma 入面由 prompt 生成 UI；Codia + MCP pipeline 係用你嘅 Figma file 做 design source of truth，喺 Figma 之外生成 code。工具唔同，輸出亦唔同。