如果你正在用 AI 程式碼代理（Cursor、Claude Code、Windsurf、Codex）根據設計做 UI，大概也撞過大家都會撞到的牆：把截圖貼進聊天裡，做簡單元件還行，一旦碰到真正的畫面就立刻失手。代理會猜，猜錯了你就修，token 一直燒，最後只好放棄手工重做。
其實有更好的流程。先用 Codia AI 把截圖轉成結構化 Figma 檔，再把 Figma MCP server 接到你的代理上。這時代理讀到的是結構化的版面資料、Variables、元件與設計 tokens，而不是被壓扁的圖片。輸出品質會提高，反覆修正的次數會下降，整個工作流程也不再像在跟工具對抗。
可以用 Codia Screenshot to Figma 把截圖和 UI 圖片轉成可編輯的 Figma 圖層，再繼續重設計、比較或交付。
什麼是 Figma MCP Server？
Figma MCP server 是 Figma 檔案與支援 Model Context Protocol 的 AI 代理之間的官方橋接。它會把你的 Figma 檔案、元件、Variables 與設計 tokens，以代理可以直接讀取的結構化資料形式公開，而不是逼代理從截圖反向推回所有內容。
到重建步驟時，可以打開 Codia Screenshot to Figma，先把參考圖轉成可編輯圖層，再繼續調整設計。
目前支援 MCP 的編輯器有：VS Code、Cursor、Windsurf、Claude Code、Codex。
MCP 解決的是什麼問題
當你把截圖貼進 Cursor 或 Claude Code，然後說「幫我做這個」，代理會這樣做：
- 用視覺能力看圖片
- 猜版面結構
- 猜間距
- 猜顏色
- 猜元件
- 根據這些猜測寫程式碼
每一次「猜」，都是 token 成本累積、品質下滑的地方。真實設計檔會把這些資訊以 資料 的形式保存，而不是以像素形式保存。MCP 就是把這些資料公開出來。
這個流程裡 Codia 解決的是什麼問題
MCP 需要有 Figma 檔才有用。如果你沒有 Figma 檔，手上只有想要做出來的參考 UI 截圖，MCP 就幫不上忙。你還是得回到貼圖片那一步。
Codia 補上了這個缺口。截圖 → Codia → 結構化 Figma 檔（含 Variables、Auto Layout、命名元件）→ 可供 MCP 使用。
三步驟流程
第 1 步：用 Codia 轉換截圖
把你的參考截圖 - 競品頁、靈感圖、既有正式畫面 - 交給 Codia AI 轉成 Figma：
- 上傳到 Codia Figma 外掛或 Web App
- 執行轉換（乾淨的整頁畫面大約 10 秒）
- 在 Figma 中開啟結果
輸出會是實際的 Frame、實際的文字圖層、對應區塊的 Auto Layout，以及重複元素的元件。最重要的是，它有 結構，這正是 MCP 會消化的內容。
關於轉換本身的更多細節，請參考 Screenshot to Figma: 完整指南。
第 2 步：把 Figma 檔整理成適合 MCP 的樣子
MCP 對乾淨的 Figma 檔特別有感。花五分鐘做這些事：
- 把 Variables 套到顏色上。 原始 HEX 值只會給代理字串；Variables 才會給它 tokens。這會讓代理輸出使用你的設計系統，而不是自己發明一套。
- 確認所有應該可響應的容器都有 Auto Layout。 MCP 會直接把這點傳進代理對版面行為的理解裡。
- 把元件命名得有意義。
PrimaryButton、NavItem、PricingCard，不要叫Group 47。生成的程式碼會使用這些名稱。 - 把重複元素整理成元件，而不是零散實例。 MCP 會把元件當成第一級概念。
如果你是從 Codia 轉換出的檔案開始做，這些工作大多已經完成了 - 轉換本身就會建立 Auto Layout、命名元素，並整理重複模式。這五分鐘只是最後潤飾。
第 3 步：把 MCP 接到編輯器並產生程式碼
在你選擇的編輯器裡安裝並設定 Figma MCP server。官方設定指南：Figma MCP server guide。
接著在 prompt 裡引用 Figma 檔或選取範圍：
「使用這個 Figma 檔案 [連結或選取 ID] 建立一個與此設計完全一致的 React 元件。請使用設計系統的 Variables，並對齊間距 tokens。」
這時代理就有：
- 真實的圖層階層
- 來自 Auto Layout 的真實間距數值
- 來自 Variables 的真實顏色 tokens
- 真實的元件定義
- 必要時也能拿到所選區域的截圖（用於視覺確認）
輸出會比單純「貼截圖」的基線更貼近設計。
為什麼這條流程比「把截圖貼進聊天」更好
| 方法 | 代理拿到什麼 | 輸出品質 | Token 成本 |
|---|---|---|---|
| 把截圖貼進聊天 | 像素 + 你的 prompt | 低到中，需要大量推測 | 高，修正很多 |
| Codia → MCP → 代理 | 結構化版面 + Variables + 元件 + 截圖 | 中到高，推測較少 | 低，修正較少 |
| Codia → MCP → 代理 + 乾淨的 Figma 檔 | 上述內容再加上設計系統資料 | 高 | 最低 |
實務上的影響很明顯：採用完整流程的團隊，跟只靠截圖 prompt 相比，在 UI 生成任務上通常會少掉約 50–70% 的「幫我修這裡」反覆修正。token 花費也會跟著下降。
在 Cursor 裡的操作步驟
以下是一個 Cursor 的實作範例：
- 在 Figma 裡，打開 Codia 生成的檔案，選取你要做的 frame。
- 在 Cursor 裡，安裝 Figma MCP server（Settings → MCP → Add Server）。
- 在 Cursor 的聊天裡，輸入：「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.」
- 代理呼叫 MCP 工具，取得結構化資料與該選取範圍的截圖。
- 它會產生元件。 第一次輸出的結果會比直接丟截圖近得多。
- 依照同一份 Figma 來源反覆調整。
搭配 Claude Code
流程相同，只是工具不一樣。Claude Code 原生支援 MCP。Figma MCP server 的安裝方式也一樣。prompt 的寫法也一樣。
如果你本來就用 Claude Code 做後端工作，加入 Figma MCP server 之後，同一個代理就能直接從你 Codia 轉換出的 Figma 檔建立 UI。
搭配 Windsurf
一樣的概念。Windsurf 的 MCP 支援讓 Figma MCP server 可以像在 Cursor 或 Claude Code 裡一樣接上去。
常見陷阱
跳過 Variables。 如果你的 Figma 檔到處都是原始 HEX 值，MCP 只會把字串回傳給代理。請套用你設計系統的 Variables - 這就是「接近品牌色」和「正確品牌色」的差別。
忘了 Auto Layout。 沒有 Auto Layout，MCP 只能描述位置，無法傳達響應式意圖。加上 Auto Layout 後，就會變成「這是一個 16px 間距的 flex row」這類可操作資訊。
一次要求太多。 「把整個 dashboard 做出來」太大了。「做出和 Figma 選取區相符的 sidebar 元件」會好很多。先在元件層級組裝，再往上拼。
在 Figma 裡選取不精準。 MCP 取的是你選的內容。選取模糊，情境就模糊。請精準選你要的 frame。
把截圖 prompt 和 MCP 混在一起。 如果你已經設好 MCP，就直接用它。不要又貼截圖、又給 MCP 參考，代理會看到兩個真相來源，然後挑它覺得方便的那個。
不只是單一畫面：建立元件庫
這條流程是可以擴展的：
- 用 Codia 批次轉換一組代表性的截圖
- 在 Figma 裡把結果元件化
- 套用你的 Variables 與設計系統
- 用 MCP 產生對應的程式碼元件庫
批次轉換可使用 Visual Struct API - 單批次最多 1,000 張圖片。
什麼情況下不該用這條流程
- 簡單按鈕或圖示。 有時候直接把截圖貼給代理反而更快。
- 你已經有原生 Figma 設計。 直接跳過 Codia，馬上接 MCP。
- 不需要高設計還原度的程式碼生成。 如果「大致長得對」就可以，截圖路徑可能已經夠用。
FAQ
Figma MCP server 要付費嗎？
官方 Figma MCP server 是 Figma 平台的一部分；請查看 Figma 的方案層級，確認 MCP 是否可用。
代理看到的是實際 Figma 檔，還是只有 API？
MCP server 會把 Figma 檔中的結構化資料（圖層、名稱、位置、Variables、元件）提供給代理，也能回傳選取範圍的截圖供視覺確認。
我可以搭配自己的 Figma 檔使用嗎（不是 Codia 轉的）？
可以。MCP 適用於任何結構良好的 Figma 檔。Codia 的角色，是在你只有截圖、沒有既有 Figma 來源時，幫你補上那座橋。
如果我轉出的 Figma 檔很亂怎麼辦？
花五分鐘整理：把元件命名、套用 Variables、確認 Auto Layout。代理輸出的品質會跟檔案品質一起成長。
這能搭配 Cursor 的 Auto / Claude / GPT 模型嗎？
可以。MCP 與模型無關；server 會把結構化資料提供給編輯器目前使用的模型。
這和 Figma Make 比起來如何？
Figma Make 是在 Figma 內用 prompt 產生 UI；Codia + MCP 流程則是把 Figma 檔當成設計真實來源，在 Figma 外產生 程式碼。工具不同，輸出也不同。