Cursor Talk To Figma MCP 實測心得

先說我的感想：設計師還是非常重要的，美感不是一天養成🥺

最近想重新設計工作室的網站，剛好看到社群在討論 Figma MCP，就想試試看： 如果讓語言模型接上 MCP，能不能幫我生出一版「令人驚豔」的網站設計？

於是我開啟 Cursor，讓它接上 Figma MCP plugin，結果⋯⋯只能說，是一次相當悽慘的體驗。

整個過程我沒有自己動手設計畫面，只有在 .cursor/ 底下放了一些工作室品牌定義檔，包含主色、輔色、偏好等，然後對 Cursor 說：「幫我設計羊姥苑工作室的網站」，然後... 就沒有然後了(誤

如果你不知道 MCP 是什麼？

MCP（Model Context Protocol）是一種讓 AI 模型能夠即時地存取外部工具或資料的協定。你可以把它想成「給 AI 一個工具箱」，模型只要透過自然語言，就可以呼叫 API 或觸發動作。

這裡也有更清楚的解釋：https://www.bnext.com.tw/article/82706/what-is-mcp

前置準備

1. 安裝 Bun

MAC / Linux

curl -fsSL https://bun.sh/install | bash

Windows

powershell -c "irm bun.sh/install.ps1|iex"

2. 打開 Figma 安裝 Cursor Talk To Figma Plugin

3. 安裝 cursor talk to figma mcp

bunx cursor-talk-to-figma-socket

應該會看到這樣的回應

WebSocket server running on port 3055
New client connected

4. 回到 Figma Plugin 按下 Connect 確認連線成功

並且把這一段複製下來我們準備拿到 Cursor 設定使用

５. 打開 Cursor 設定 mcp.json

把剛剛複製的那段 code 貼過來

回到 MCP Servers 就會看到新增成功的 TalkToFigma 了
如果沒有亮綠燈的話，請關掉 Cursor 重新開啟，或者是重新整理試試

恭喜，現在你的 Cursor Talk To Figma 已經設定成功了！

接著就可以在 Cursor 用 Agent 下指令操作 Figma 
必須先告訴 Cursor 頻道是哪一個（一樣是從前面的 Figma Plugin 獲取）

操作流程

💬 我是怎麼跟 Cursor 說的

• 依照 .cursor/spec 裡面的網站架構設計羊姥苑工作室網站
• 左上角加上 logo
• 畫面上需要增加適合情境的插圖

🔍 Cursor 實際做了什麼？

• 把語句拆解為一連串 MCP /call 呼叫
• 畫面也會在 Figma 中即時更新，像是自己在那邊慢慢排版一樣
• 每次改動都會對應到一次 MCP /call 呼叫，從 Cursor 右側也可以看到完整紀錄

⚠️ 限制 / 踩雷處：

• 如果同一句話裡描述邏輯太複雜，會出現「只做一半」的情況
• 用來排版 layout 可以，但是產生設計以及圖片的能力不足

結語

這次實驗的結果，老實說不太理想。

雖然 MCP 能讓模型精確控制版面配置，但實際上生成出來的畫面仍非常粗糙，距離一個「可用的設計」還有一大段距離。

目前它頂多能幫你把結構搭起來，像是「左邊放 logo、右邊兩顆按鈕」，這種區塊級的排版；但當需要涉及美術圖、視覺語言、動線與互動節奏時，它還是無法勝任。

這不是設計師的替代品，而是另一種「草稿起點」的工具。

讓不熟 Figma 的人可以快速生成一個初稿，然後交由設計師來延伸與修正。這樣的協作方式，也許是它目前比較實際的定位。

同場加映 - Cursor Talk To Figma MCP 與 Figma AI 生成結果對比

Cursor Talk To Figma MCP	Figma AI