Trae + MasterGo 前端一键生成页面前言 MCP 作为一种标准化的上下文管理协议，为设计师和开发团队提供了更

前言

MCP 作为一种标准化的上下文管理协议，为设计师和开发团队提供了更高效的协作方式。通过支持 MCP，MasterGo 不仅打破了工具间的信息孤岛，还为复杂的设计到开发流程提供了强大的技术支撑。

借助 MasterGo MCP Server，设计师和开发团队可以实现更智能的设计到代码转换。MCP Server 提供结构化的布局信息，与 AI 编码工具（如 Cursor / Vscode / Trae）无缝集成，避免了传统设计到开发流程中因页面截图等方式带来的误差，极大提升了工作效率。

前置安装

1. 安装Trae编辑器

在www.trae.ai/ 下载安装包安装Trae编辑器

2. 在Trae插件市场安装Cline

微信截图_20250519094421.png

3. 给Cline 配置大模型

我的配置如下，大家也可以自行配置

4. 安装mastergo-magic-mcp

首先在MasterGo官网（mastergo.com/files/accou… 安全设置中生成令牌并复制

然后在Trae编辑器Cline里配置 mastergo-magic-mcp

在Cline中打开MCP Servers 配置JSON文件，在JSON文件里添加如下mastergo-magic-mcp 配置代码

windows 配置：

    {
      "mcpServers": {
        "mastergo-magic-mcp": {
          "command": "cmd",
          "args": [
            "/c",
            "npx",
            "-y",
            "@mastergo/magic-mcp",
            "--token=<MG_MCP_TOKEN>",
            "--url=https://mastergo.com"
          ]
        }
      }
    }

mac配置：

{
  "mcpServers": {
    "mastergo-magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@mastergo/magic-mcp",
        "--token=<MG_MCP_TOKEN>",
        "--url=https://mastergo.com"
      ],
      "env": {
        "NPM_CONFIG_REGISTRY": "https://registry.npmjs.org/"
      }
    }
  }
}