前言 #
在跟 AI 溝通前端時，多多少少都會遇到 AI 做出來的畫面，跟自己想的不太一樣。有時候就算已經截圖丟給它，還是做不出想要的效果，甚至抓錯物件。前端畫面越複雜，AI 就越容易出錯。
在有 AI Agent 之前，有在設計前端的人應該多少都聽過 Figma。現在有些前端工作可以交給 AI Agent，把設計稿丟給它照著刻。但有在開發、設計前端的都知道，不會只靠設計稿加一句 Prompt 就能處理完，中間還是會來回確認 UI 細節和互動方式。
這時候能讓 AI Agent 和 Figma 互相溝通的 MCP 就派上用場了。今天介紹的不是 Figma 官方 MCP Server，而是 GitHub 上的 cursor-talk-to-figma-mcp。它可以在本機建立 MCP Server，不會使用 Figma 官方 MCP 的讀取額度，使用上主要會消耗 AI 本身的 Token。
從 GitHub Clone 專案下來 #
安裝與使用很簡單，照著 cursor-talk-to-figma-mcp GitHub 的 README 做就可以。啟動時會用到 bun，需要另外安裝；不想自己處理，也可以直接請 AI 幫忙。
專案上有影片的使用教學
簡單來說，就是在本機運行 MCP Server，把 Figma 操作變成 Codex 可以呼叫的 tool；bun socket 再依照 Channel，把指令送到已開啟的 Plugin。Channel 可以想成這次連線的房間號碼。
整個架構大概長這樣：
這個流程只使用本機 Server 與 Plugin，不會扣 Figma 官方 MCP 的讀取額度。
Codex 的 tool call 會經過 MCP Server、bun socket 和 Channel，最後由 Figma Plugin 讀取或修改目前開啟的檔案。
不會扣 Figma MCP 額度？ #
這套方式不會呼叫 Figma 官方 MCP Server，所以不會扣官方 MCP 的讀取額度，Codex 的 Token 就是依照你的 Agent 用量去計算。
根據 Figma MCP 的存取限制，免費方案讀取工具每月最多只能呼叫 6 次。你沒看錯就是這麼少 XD
實際操作 cursor-talk-to-figma-mcp 畫面 #
Codex 使用的是 config.toml，個人設定預設放在 ~/.codex/config.toml，也可以在專案內放 .codex/config.toml。設定可以寫成：Codex MCP 文件
對應的設定可以寫成：
[mcp_servers.cursor-talk-to-figma-mcp]
command = "bun"
args = [
"run",
"/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"
]
/path/to/...要換成自己 clone 專案的位置。
然後在專案目錄啟動 WebSocket Server：
bun socket啟動後看到 WebSocket server running，就代表 Relay 已經在等待連線。
在專案目錄執行
bun socket，啟動 WebSocket Server。
接著在 Figma 開啟 Talk to Figma Plugin。網頁版和 Desktop App 都可以使用。
在 Figma 的 Tools 裡搜尋並啟動
Talk To Figma MCP Plugin。
啟動後確認 Plugin 已連線，並記下畫面上的 Channel。這個 Channel 就是 Codex 和 Figma 溝通時使用的連線房間。
Plugin 連線成功後，會顯示目前使用的 Channel。
Codex 讀取 Figma 節點後，可以看到圖層、文字和樣式等資訊。
連線成功後，可以直接在 Figma 裡看到 AI 修改後的畫面。
要注意 Channel 是否有對到 #
Figma Plugin 重新連線後，Channel 可能會改變，所以每次使用都要重新確認。Codex 要先透過 join_channel 加入，才有辦法讀取或修改目前開啟的檔案。
這個流程也很適合整理成 Skill，讓 Agent 按照這個順序執行：
- 用 Figma 網頁版或 Desktop App 開啟要修改的檔案。
- 啟動
Talk to FigmaPlugin。 - 複製目前顯示的 Channel。
- 先請 Codex 執行
join_channel。 - 讀取目前頁面或選取節點，確認真的連到了正確的檔案。
- 確認後才開始建立或修改畫面。
在正式修改前，先讀取一次目前頁面與選取的節點非常重要。這樣可以確認 Codex 連線到正確的檔案，避免 AI 在錯誤的檔案中建立大量圖層。
結語 #
對我來說，cursor-talk-to-figma-mcp 就像是把 Codex 的手延伸到 Figma 裡，讓它可以直接協助調整設計稿。當前端頁面比較複雜，或是 AI 多次修改仍然無法處理特定細節時，這種方式就很有幫助。你可以更精準地要求 Agent 修改某個物件或區域。
不過，這套 MCP 也相當消耗 Token。每個物件都需要透過 JSON 格式呼叫 Figma 工具進行讀取或修改，因此當畫面很複雜，又需要進行多次大幅調整時，Context Window 很快就會被占滿。
我自己的做法是，會先在前端設計一個階段後，再用 MCP 反畫回去 Figma，然後再進行更精細的前端流程調整，除了比較省 Token外，整體速度也比較快。畢竟在前端初期的定版階段，不太需要用到 MCP，直接請 Agent 去做就好了。