2025 肯定要認識 MCP - 以 Cursor + Figma MCP = Self page builder

Cursor + Figma MCP = Self page builder

MCP，全稱「模型上下文協議」（Model Context Protocol），是一種開放標準，旨在讓人工智慧（AI）模型能夠輕鬆連接到外部數據源和工具，例如資料庫、API 和應用程式。它透過一個統一的協議，作為 AI 與外部系統之間的橋樑，使 AI 能夠即時存取數據並執行操作，而無需為每個系統單獨開發適配代碼。

簡單來說，MCP 的核心目標是解決重複開發的問題，讓 AI 模型可以更靈活、高效地與不同的外部資源整合。它就像是 AI 世界的「通用接口」，提升了 AI 應用的實時性和適應性。

---

這邊先採用 Cursor + Figma MCP 的方向來實現自己的實際威力！

請先到這邊建立自己的 Token

https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens

Settings > Security tab > Personal access tokens section, then click Generate new token.

這個就是你的 Token 請妥善保留。

---

node.js 環境請安裝建立好，

npx figma-developer-mcp --figma-api-key=<KEY>

啟動正確就會看到如下的畫面資訊

Configuration:
- FIGMA_API_KEY: ****G9Uy (source: cli)
- PORT: 3333 (source: default)

Initializing Figma MCP Server in HTTP mode on port 3333...
HTTP server listening on port 3333
SSE endpoint available at http://localhost:3333/sse
Message endpoint available at http://localhost:3333/messages

---

Cursor

回到 cursor 在右上角設定的地方，找一下 MCP 的位置， 如果不想要使用 global 設定，也可以在自己的專案設定

.cursor/mcp.json

裡面設定一下

{
  "mcpServers": {
    "Figma MCP": {
      "url": "http://localhost:3333/sse",
    }
  }
}

設定完之後，就可以回到 Cursor setting 裡面，按下

Figma MCP -> enable

如果沒有看到 Figma MCP 的項目，表示你並沒有將上面的這個 json 設定完成，或者設定完了你並沒有儲存，記得要儲存。

如果再不行，請整個 Cursor 退出重開。

如果成功接上了，你可以看到， Figma MCP 是呈現『綠燈』的狀態 而 termail 應該會顯示 New SSE connection established 這樣的資訊。

如果有顯示表示正確成功了。

接著可以找一個 figma 檔案進行試試看建立一個前端的頁面試試看，在終端機應該會顯示這樣的資訊 ...

Fetching all layers of node 1008-23466 from file xxxxxxxxx at depth: all layers Calling https://api.figma.com/v1/files/xxxxxxxx/nodes?ids=xxxxxx

如果有這類的資訊，才表示 Cursor 真正有跟 Figma 是有進行確認串接，並且兩邊有進行溝通。

這樣切版才會漂亮。

如此一來請好好享受你的前端人生，慢走！