如果你用 AI coding agent（Cursor、Claude Code、Windsurf、Codex）去由設計做 UI，你多數都撞過同一個牆：將一張截圖貼入 chat 對簡單元件仲算得，但一遇到真實項目就會散。agent 會推測；推測通常錯；你再修正；token 一直燒；最後索性自己重做。
其實有更好嘅流程。先用 Codia AI 將截圖轉成結構化 Figma file。之後再將 Figma MCP server 接去你個 agent。咁個 agent 讀到嘅就唔再係平面圖片，而係有結構嘅 layout data、Variables、components 同 design tokens。輸出質素會高好多，迭代次數會少好多，整個工作感覺都冇咁似同工具搏鬥。
可以用 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（有 Variables、Auto Layout、命名 components）→ MCP-ready。
三步流程
第一步：用 Codia 將截圖轉換
拎你嘅 reference screenshot——競品頁、靈感圖、現有 production screen——用 Codia AI 轉成 Figma：
- 上傳去 Codia Figma plugin 或 web app
- 執行轉換（乾淨 full screen 大約 10 秒）
- 喺 Figma 開啟結果
輸出會係真正嘅 Frames、真正嘅文字圖層、符合情況嘅 Auto Layout，同埋重複元素嘅 components。重點係：佢有 結構，而呢樣就係 MCP 會消化嘅內容。
有關轉換本身，可以睇 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 上。MCP 會將呢啲直接反映成 agent 對版面行為嘅理解。
- 用有意義嘅名字命名 components。
PrimaryButton、NavItem、PricingCard，唔好叫Group 47。agent 會用呢啲名稱寫 code。 - 將重複元素組成 components，唔好淨係散落做 ad-hoc instances。MCP 會將 components 當成一等概念暴露。
如果你係由 Codia 轉出嚟嘅 file 開始，呢啲好多時已經做咗大半——轉換本身已經有 Auto Layout、命名元素、同埋重複 pattern grouping。呢五分鐘只係 polish。
第三步：連接 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 | 結構化 layout + Variables + components + screenshot | 中至高，少咗好多推測 | 低，因為修正少 |
| Codia → MCP → agent + 乾淨 Figma file | 同上，再加 design system data | 高 | 最低 |
真實影響：用完整 pipeline 嘅團隊，喺 UI 生成任務上，通常會比 screenshot-only prompt 少約 50–70%「幫我改呢個」迭代。token 支出都相應下降。
Cursor 入面一步步做
Cursor 具體例子：
- 喺 Figma 打開 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 —— 每批最多 1,000 張圖片。
乜情況唔應該用呢條 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 好亂，點算？
花五分鐘清理：命名 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。工具唔同，輸出亦唔同。