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 帮忙规整了目录：