MCP

基本介紹

官方地址：

• https://modelcontextprotocol.io/introduction
  “MCP 是一種開放協議，旨在標準化應用程序向大型語言模型（LLM）提供上下文的方式。可以把 MCP 想象成 AI 應用程序的 USB-C 接口。就像 USB-C 提供了一種標準化的方式，讓你的設備能夠連接各種外設和配件一樣，MCP 也提供了一種標準化的方式，讓 AI 模型能夠連接不同的數據源和工具。”

● MCP 主機（MCP Hosts）：像 Claude Desktop、IDE 或 AI 工具等程序，它們希望通過 MCP 訪問數據。
● MCP 客戶端（MCP Clients）：維護與服務器 1:1 連接的協議客戶端。
● MCP 服務器（MCP Servers）：輕量級程序，它們通過標準化的模型上下文協議（Model Context Protocol）公開特定的功能。
● 本地數據源（Local Data Sources）：你的計算機上的文件、數據庫和服務，MCP 服務器可以安全地訪問這些數據。
● 遠程服務（Remote Services）：通過互聯網可用的外部系統（例如 API），MCP 服務器可以與其連接。

https://www.anthropic.com/news/model-context-protocol

基本介紹

插件的倉庫：https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp

項目實現了 Cursor AI 與 Figma 之間的「模型上下文協議（Model Context Protocol，簡稱 MCP）」集成，使得 Cursor 能夠與 Figma 進行通信，從而以編程方式讀取和修改設計內容。

項目架構

● src/talk_to_figma_mcp/ - TypeScript MCP server for Figma integration，TS的MCP服務，用于集成 Figma
● src/cursor_mcp_plugin/ - Figma plugin for communicating with Cursor，用來 Figma 和 Cursor 交互的
● src/socket.ts - WebSocket server that facilitates communication between the MCP server and Figma plugin，走ws協議，將 MCP 的服務和 Figma 的插件結合起來

環境依賴

對于這個項目，前置依賴需要 bun，我們需要先安裝 bun，才可以進行后續的使用

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

安裝完畢如下：

配置環境

我們需要克隆這個項目

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp
cd  cursor-talk-to-figma-mcp

確認克隆完畢（后續需要用到）

通過 bun 安裝依賴：

bun setup

依賴完畢：

啟動插件

通過 bun 工具，啟動服務

bun socket

此時控制臺會等待，啟動到3055端口：

PS：啟動插件服務，這里不用執行，后續會配置到 Cursor 中

bunx cursor-talk-to-figma-mcp

確認可以正常運行之后，就可以中斷服務了：

安裝 Figma 插件

打開一個項目，選擇：
● Plugins - Development - Import plugin from manifest.json

可以看到如圖的菜單項目：

我們選擇 你剛才克隆的項目的：
● src 目錄 - manifest.json

PS：別選錯了，是 cursor_mcp_plugin 目錄！

選擇完畢后，頁面會接著就會出現如下的彈窗，我們需要點擊 Connect：

配置Cursor

復制下面的 JSON（其實就是剛才的啟動命令）：

{"mcpServers": {"TalkToFigma": {"command": "bunx","args": ["cursor-talk-to-figma-mcp"]}}
}

復制到 mcp.json 中：

此時可以查看MCP的工具目錄，就可以看到順利連接到了 Figma：

測試效果

回到 Cursor 中，進行對話：

talk to Figma 

接著根據提示，會要求 Channel ID

我們復制這個ID，并發給 Cursor，這樣 Cursor 就會自動連接并獲取項目的信息：

我們可以要求是中文（英語也一樣，看個人習慣）

我們提出一些要求讓它進行工作：

可以看到 Figma 已經開始排版了：

經過一系列的溝通：

同時我讓 Cursor 幫忙規整了目錄：