MasterGo + MCP，借助 AI 实现设计稿转代码

最近 MasterGo 发布了 MCP Server，这样就可以在 Cursor 中获取到画布数据，然后利用 Agent 去生成代码了。

我们直接看一下生成 HTML 的效果。

如何使用

生成 Token

首先需要一个 Token 提供给 MCP 访问对应的画布数据。

打开 MasterGo
点击右上角头像
点击个人设置
进入设置页后点击右侧的安全设置
然后生成令牌

安装 MasterGo MCP

我这里使用 Cursor 作为例子，理论上只要支持 MCP 的应用，都可以安装 MasterGo MCP。

打开 Cursor
进入 Cursor 的偏好设置页面
进入 MCP 配置页面
点击 "Add new global MCP Server"

然后 cursor 会创建一个名为 mcp.json 的文件，利用该文件去配置 MCP Server。

复制下面的代码到 mcp.json 中，并且替换其中的 Token 为上一步在 MG 生成的 Token。

替换掉 mg_token 为你自己的 Token 比如 mg_xse1da89123n

json 复制代码

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

如果你已经配置过 MCP Server 了，那么只需要把 MasterGo 的 MCP Server 追加一下到 JSON 中即可。

json 复制代码

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

然后保存，重启一下 Cursor。当你能看见 MasterGo MCP 提供的 tools 的时候，就代表你安装成功了。

有可能你会出现 client close 的情况，此时需要确认一下 node 的版本（需要大于 18），网络问题（能否访问到对应 npm 源），系统问题（Windows 可能需要用 cmd）。

不过，一般都是 @mastergo/magic-mcp 这个 npm 包下载失败导致的。

MasterGo MCP Tools

我们简单看下 MasterGo MCP 提供的两个 Tools。

getDSL
getComponentLink

DSL，简单理解就是 MasterGo 画布的数据结构。前端在开发页面的时候，只要设计师提供的设计稿足够规范，理论上我们的页面结构就可以和设计稿一致。

因此，如果 AI 能获取到画布的 DSL 数据，那么就可以让 AI 做转换，生成指定的代码。

DSL 生成页面

选中画布中对应的图层，并且复制对应的容器链接
粘贴容器链接到 Cursor 中，并且启用 Agent 模式
生成代码

可以看到，Cursor 在收到我们的命令，根据文件链接生成 HTML 之后，会自动调用 MasterGo MCP 提供的 getDSL 工具，获取到对应图层的 DSL，然后根据 DSL 再去生成对应的 HTML 数据。

下面就是本次生成的结果。

MasterGo 提供的 DSL 是无关具体平台的，因此只要有 DSL 理论上可以让大模型转换成 React、Vue 还是 Flutter，理论上都是完全可行的。

getComponentLink

上面介绍了一下 getDSL，用于获取图层数据。那么 getComponentLink 的又是什么？

在上面生成 HTML 的流程中有一个致命的问题，是生成的代码不包含和组件无关，如果想生成一份基于 Ant Design 的前端代码，只使用 getDSL 是无法做到的。

为了使用组件，我们就需要告知大模型，这块的图层，需要使用生成组件代码，而不是 HTML 代码。

我们可以在设计稿中，给组件设置对应的组件文档链接，并让大模型在获取到 DSL 的之后去调用获取组件的文档，并让其依照文档生成对应的组件代码，而不是 HTML 代码。

Button 组件文档信息

好，此时我们再去实验一下生成组件的效果。

选中一个容器，并且复制容器链接

需要注意的是，这个图层里面使用的组件，都是已经配置好组件链接的组件。

在 Cursor 中告知大模型去生成前端组件。
效果展示

结尾

这里我抛砖引玉的介绍了一下 MasterGo MCP 目前的一些基本玩法，实际上还可以自己再去定义一些规则，比如生成 tailwind，生成 CSS 变量，或者基于 DSL 写代码转换成对应的 tsx，然后再利用大模型去优化代码等等。