在 Cursor 和 Trae 中配置 MasterGo 与 Figma MCP 详解

土豆1250
2,713 阅读6分钟

前言

大家好，我是土豆，欢迎关注我的公众号：土豆学前端

在当今快速发展的设计领域，利用 AI 工具提升效率已成为大势所趋。MasterGo 和 Figma 作为主流的设计工具，结合 Cursor 和 Trae 这类 AI 驱动的编辑器，可以通过模型上下文协议（MCP）实现更智能化的设计工作流。本文将详细介绍如何在 Cursor 和 Trae 中配置这两个设计工具的 MCP，并特别提醒 Talk to Figma MCP 的特定配置要求。

什么是 MCP？

模型上下文协议（MCP）是一种开放协议，旨在让 AI 模型能够理解和访问外部知识库或服务，从而扩展其功能。通过 MCP，Cursor 和 Trae 等 AI 编辑器可以连接到 MasterGo 和 Figma 等设计工具，实现读取设计数据、甚至在一定程度上操作设计元素等功能。

在 Cursor 和 Trae 中配置 MasterGo MCP

MasterGo 官方提供了一个名为 mastergo-magic-mcp 的独立 MCP 服务，它允许 AI 模型直接从 MasterGo 设计文件中获取 DSL（领域特定语言）数据。

配置步骤如下：

  1. 获取 MG_MCP_TOKEN：

    • 访问 MasterGo 官网。
    • 进入个人设置。
    • 点击安全设置选项卡。
    • 找到个人访问令牌，点击生成令牌。请妥善保管此令牌，后续配置需要用到。

  2. 在 Cursor 中配置 MasterGo MCP：

    • 打开 Cursor 的 MCP 配置文件。根据 Cursor 文档，通常是 ~/.cursor/mcp.json。
    • 在 mcpServers 对象中添加 MasterGo MCP 的配置。示例如下： 
      {
  "mcpServers": {
    "mastergo-magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@mastergo/magic-mcp",
        "--token=<你的MG_MCP_TOKEN>",
        "--url=https://mastergo.com"
      ],
      "env": {}
    }
  }
}
      请将 <你的MG_MCP_TOKEN> 替换为您在上一步获取的真实令牌。

  3. 在 Trae 中配置 MasterGo MCP：

  4. 重启编辑器生效。

  5. 使用 MasterGo MCP 的重要步骤：复制设计文件链接

    • 在 MasterGo 中打开您希望 AI 进行操作或读取的设计文件。
    • 从浏览器地址栏或通过 MasterGo 的“分享”功能复制该设计稿的完整链接。
    • 在 Cursor 或 Trae 中与 AI 交互时，当需要 AI 访问您的 MasterGo 设计稿时，请将此复制的链接粘贴到聊天中。这是让 AI 知道具体操作哪个设计文件的关键步骤。

在 Cursor 和 Trae 中配置 Talk to Figma MCP

Talk to Figma MCP 是一个允许 AI 与 Figma 通信以读取设计和以编程方式修改它们（包括创建元素、设置样式、操作布局等）的项目。

配置步骤如下：

  1. 环境准备：

    • 安装 Bun (一个 JavaScript 和 TypeScript 的运行时和工具包)。
    • 下载 Talk to Figma MCP 项目代码 (例如从 GitHub 克隆 sonnylazuardi/cursor-talk-to-figma-mcp - 项目地址)。

  2. 安装依赖并设置：

    • 在项目目录中运行 bun setup。这通常会安装依赖并可能尝试自动在 Cursor 中配置 MCP。

  3. 启动 WebSocket 服务器：

    • 在项目目录中运行 bun start 或 bun run src/socket.ts (具体命令请参考项目文档)。这将启动一个 WebSocket 服务器，用于 Figma 插件和 MCP 之间的通信。

  4. 安装 Figma 插件：

    • 打开 Figma 桌面应用。
    • 进入 插件 > 开发 > 新建插件 (Plugins > Development > New Plugin)。
    • 选择 "链接现有插件" (Link existing plugin) 或 "Import plugin from manifest"。
    • 选择项目中的 src/cursor_mcp_plugin/manifest.json 文件 (路径可能因项目版本而略有不同，请参照具体项目说明)。
    • 插件安装成功后会出现在 Figma 的开发插件列表中。

  5. 在 Cursor 中配置 Talk to Figma MCP (手动方式)：

    • 如果 bun setup 未能自动配置，需要手动编辑 Cursor 的 MCP 配置文件 (~/.cursor/mcp.json)。
    • 在 mcpServers 对象中添加 Talk to Figma MCP 的配置。示例如下： 
      {
  "mcpServers": {
    "TalkToFigma": {
      "command": "bun",
      "args": [
        "/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts" // 替换为你的实际项目路径
      ]
    }
  }
}
      或者，根据最新的项目文档，可能是： 
      {
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": [
        "cursor-talk-to-figma-mcp@latest"
      ]
    }
  }
}
      请务必参考你所使用的 Talk to Figma MCP 项目的最新文档以获取准确的配置信息。

  6. 在 Trae 中配置 Talk to Figma MCP：

    • 与 MasterGo MCP 类似，将 Cursor 中的配置内容添加到 Trae 的 mcp.json 文件中。

重要提醒：Talk to Figma MCP 的频道号配置

与 MasterGo MCP 不同，Talk to Figma 的 MCP 调用需要在 Figma 中获取频道号 (channel ID)，然后在 Cursor 或 Trae 的聊天中粘贴该频道号，才能正常调用 MCP 功能。

  • 操作流程：
    1. 启动 WebSocket 服务器。
    2. 确保 MCP 服务器在 Cursor/Trae 中已安装并运行。
    3. 打开 Figma 并运行之前安装的 Cursor MCP 插件。
    4. 在 Figma 插件中，通常会有一个加入频道 (join_channel) 的操作，执行此操作后会生成或显示一个频道 ID。
    5. 将此频道 ID 复制。
    6. 在 Cursor 或 Trae 的聊天界面中，当需要与 Figma 交互时，粘贴此频道 ID。

这个步骤至关重要，否则 Talk to Figma MCP 将无法正确连接和执行操作。

MCP 功能的当前局限性与潜力

需要明确的是，无论是 MasterGo MCP 还是 Talk to Figma MCP，目前都不能完全精确地还原复杂的设计图。AI 在理解渐变、复杂阴影、特殊效果以及像素级完美对齐方面仍有提升空间。

然而，这些 MCP 工具的强大之处在于它们可以有效地添加和搭建设计的基本布局结构。例如，AI 可以根据你的指令创建画板、矩形、文本框，并设置它们的基础属性（如尺寸、颜色、位置）。这意味着你可以快速生成设计的骨架，然后在此基础上进行手动的微调和样式优化，从而显著提高设计初期阶段的效率。你只需进行简单的修改，就可以快速完成最终的样式布局。

总结

通过合理配置 MasterGo MCP 和 Talk to Figma MCP，设计师可以在 Cursor 和 Trae 等 AI 编辑器中获得更流畅、更智能的设计体验。虽然目前 MCP 技术尚不能完全替代人工的精细调整，但其在快速构建基础布局、自动化重复任务方面的潜力巨大，无疑将成为未来设计工作流中不可或缺的一环。请务必注意 Talk to Figma MCP 关于频道号的特殊配置要求，以及 MasterGo MCP 需要提供设计文件链接的步骤，以确保其正常工作。

avatar
文章
阅读
粉丝