Figma 推出 Dev Mode MCP Server：讓 Cursor、Claude 直接讀懂設計稿

過去讓 AI 幫著寫前端程式碼，最常見的操作就是截一張設計圖扔給 Cursor 或 ChatGPT。結果通常很尷尬：AI 寫的程式碼確實能跑，但它根本不知道你團隊的元件庫叫什麼，硬生生手寫一堆樣式，把設計系統踩得稀爛。

Figma 試圖徹底終結這種看圖猜意圖的做法。官方正式推出了 Figma MCP server 的公開測試版，把 Figma 的設計上下文直接搬進了開發者的程式碼編輯器。

讓 Cursor 直接看懂你的設計系統

這次接入用的是 Model Context Protocol，也就是目前大火的 MCP 標準協議。只要你在 Cursor、Windsurf、Claude Code 或者 VS Code 的 Copilot 裡配好這個服務，AI 就能直接讀取當前設計稿裡的真實結構。

目前這個測試版提供了三項核心工具，分別用於調取程式碼、截圖以及變數定義。開發者只要在 Figma 裡選中某個圖層或提供節點 ID，AI 就能獲取對應的上下文。

這和單純扔一張截圖有本質區別。如果團隊在 Figma 裡做好了設計系統，AI 拿到的就不是一串十六進位制色值，而是具體的變數名稱；配合 Figma 的 Code Connect 功能，AI 甚至能直接拿到對應程式碼元件的檔案路徑，而不是自己胡亂新建一個。

除了底層後設資料，Figma 還會把視覺截圖和互動虛擬碼搭配著餵給大模型。比如在需要表達多屏聯動或動態效果時，它能輸出結合 React 和 Tailwind 的程式碼原型，幫 AI 搞清楚元件在真實狀態下的運轉邏輯。

目前所有擁有 Figma Dev 席位或 Full 席位的使用者都可以接入測試。官方表示，後續還會推出無需依賴桌面客戶端的遠端伺服器支援，並進一步最佳化 Code Connect 的配置流程，加入對網格和設計標註的深度支援。

為什麼重要

對於每天跟前端打交道的開發者和獨立創作者來說，這個功能的價值非常實在。以前用 AI 寫 UI，一半時間花在改元件引用和補全設計變數上，現在只要你的設計檔案規範，AI 生成的程式碼就能直接複用現有資產，不再是隨手拋棄的一次性玩具。只要你手裡有對應的席位，完全值得今天就在 Cursor 裡配置起來試試。

對行業來說，這也是 MCP 生態落地的一個風向標。當 Figma 這種設計領域的絕對壟斷者選擇擁抱開放協議，而不是把開發者死死圈在自己的生態裡，實際上把壓力給到了其他工具。它向整個行業證明，給大模型接入真實業務上下文，才是提升程式碼可用性的唯一齣路。

我們認為 Figma 這一步走得相當聰明。它沒有執著於在自己的畫布裡硬造一個程式碼編輯器，而是退後一步，把自己變成 Cursor 和 Claude 的上下文供應商，牢牢卡住了設計資產這個源頭。不過看起來這也帶來了一個隱形門檻：這套流程的威力完全取決於團隊設計系統的治理水平，如果日常設計稿裡全是一團亂麻的圖層和硬編碼顏色，AI 哪怕接入了 MCP，也只會以更高的效率寫出一堆精美的垃圾程式碼。