AI炼丹日志-22 - MCP 自动操作 Figma+Cursor 自动设计原型
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 帮忙规整了目录：
