設計師的 MCP：將 Figma、令牌和程式碼連接到 Claude 和 Cursor

簡而言之，MCP 是什麼

MCP 官方文件將其描述為一種開源標準，用於將 AI 應用程式連接到外部系統，例如文件、資料庫和工具。它自己的例子之一是 Claude Code 從 Figma 設計產生整個 Web 應用程式。對設計師來說，重要的是：人工智慧不再需要猜測你的設計是什麼樣子。它可以直接詢問設計工具。

現今使用 MCP 伺服器的設計工具

截至 2026 年 10 月：

• Figma：MCP 伺服器，為代理程式提供程式碼產生的設計上下文（變數、元件、版面配置），並可將本機內容寫回畫布。 Figma 將其列入入門版和付費版；畫布寫作在測試期間是免費的。
• Penpot: a free, open MCP server that works with any MCP client, including Claude, Cursor, VS Code and OpenAI Codex, and can be self-hosted.
• ExodeUI（我們製作的）：MCP 伺服器，可讓 AI 編碼工具建立和編輯具有狀態和彈簧物理特性的互動式動畫。
• 設計代幣：如果您的代幣以 JSON 的形式存在於儲存庫中，則 AI 編碼工具已經可以將它們作為文件讀取；僅儲存在工具內的代幣才需要專用伺服器。

設計師如何實際使用它

最常見的工作流程是實用的而不是神奇的。開發人員選擇一個框架，並要求人工智慧使用現有的元件庫來實現它。設計師要求人工智慧檢查編碼螢幕是否與設計匹配並列出差異。團隊要求人工智慧更新程式碼庫中元件的令牌。設計師越來越多地使用人工智慧直接在畫布上繪製變體，然後手動完善它們。

連接伺服器

Claude Code透過claude mcp add指令或專案中的.mcp.json檔案新增伺服器，支援遠端HTTP伺服器和本機HTTP伺服器。 Cursor 在其設定中管理 MCP 伺服器，並支援本地（stdio）和遠端伺服器。遠端伺服器通常會要求您使用 OAuth 登入一次。每個供應商都會記錄其伺服器的確切命令或 URL。

需要注意什麼

MCP 為 AI 工具提供了真正的存取權限，因此請像對待任何整合一樣對待它：

• 權限：可以寫入畫布或儲存庫的代理程式也可能會出錯。使用版本歷史記錄並查看變更。
• 隱私：檢查設計資料的去向以及您的計劃是否允許。
• 成本：一些寫入功能在測試版中是免費的，並計劃變得基於使用情況。
• 品質：只有當系統結構良好、具有命名組件和令牌時，人工智慧輸出才會遵循您的設計系統。