Cursor Talk To Figma MCP 安装与配置指南

Cursor Talk To Figma MCP 安装与配置指南

cursor-talk-to-figma-mcp Cursor Talk To Figma MCP 项目地址: https://gitcode.com/gh_mirrors/cu/cursor-talk-to-figma-mcp

1. 项目基础介绍

Cursor Talk To Figma MCP 是一个开源项目，它实现了 Cursor AI 与 Figma 之间的 Model Context Protocol（MCP）集成。通过这个集成，Cursor 能够与 Figma 进行通信，读取设计并程序化地修改它们。该项目主要使用 JavaScript、HTML 和 TypeScript 编程语言。

2. 项目使用的关键技术和框架

• Model Context Protocol (MCP): 一种允许 Cursor AI 与 Figma 通信的协议。
• WebSocket: 用于在 MCP 服务器和 Figma 插件之间建立通信的协议。
• TypeScript: 提供类型系统的 JavaScript 超集，增强了项目的可维护性和可读性。
• Node.js: 服务器端 JavaScript 运行环境，用于运行 MCP 服务器。

3. 项目安装和配置准备工作

在开始安装之前，请确保您的系统中已安装以下软件：

• Node.js: 您可以从 Node.js 官网 下载并安装。
• Git: 用于克隆和操作开源项目代码。

项目安装步骤

步骤 1: 克隆项目

首先，您需要在本地克隆项目代码：

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

步骤 2: 安装依赖

进入项目目录后，安装项目依赖：

cd cursor-talk-to-figma-mcp
npm install

步骤 3: 配置 MCP 服务器

在 ~/.cursor/mcp.json 文件中添加 MCP 服务器的配置。如果该文件不存在，则需要创建它：

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

步骤 4: 启动 WebSocket 服务器

在项目目录中，运行以下命令启动 WebSocket 服务器：

npm run socket

步骤 5: 安装 Figma 插件

1. 打开 Figma，选择“插件” > “开发” > “新插件”。
2. 选择“链接现有插件”。
3. 选择项目目录中的 src/cursor_mcp_plugin/manifest.json 文件。

现在，Figma 插件应该已经可用于您的开发插件中了。

步骤 6: 使用插件

1. 在 Figma 中运行 Cursor MCP 插件。
2. 通过加入一个特定频道，将插件连接到 WebSocket 服务器。
3. 使用 Cursor 通过 MCP 工具与 Figma 进行通信。

请遵循项目中的“最佳实践”指南，确保在发送命令前加入频道，获取文档信息，检查当前选择，并根据需要使用正确的工具进行操作。

以上就是 Cursor Talk To Figma MCP 的详细安装和配置指南。按照这些步骤操作，即使是编程小白也能成功安装和配置该项目。

cursor-talk-to-figma-mcp Cursor Talk To Figma MCP 项目地址: https://gitcode.com/gh_mirrors/cu/cursor-talk-to-figma-mcp