Cursor + MasterGo 前端一键生成页面

前言

这段时间cursor的mcp server大热，各大厂商也积极接入该协议，mcp server 是官方文档，我们看看 mastergo 官方的解释

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

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

废话不多说，让我们开始实战

配置

1. 更新cursor到最新版本，依次打开File->Preferences->Cursor Settings，在设置页面选择Features，并勾选Emable auto-run prompt

1. 打开mastergo用户安全设置，生成令牌

1. 然后点击MCP标签，点击Add new global MCP server新增 MCP 服务，设置如下

windows 配置：

perl 复制代码

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

mac 配置：

perl 复制代码

{
  "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/"
      }
    }
  }
}

1. 配置完成点击刷新，重启服务，服务前图标亮起，代表启动成功

🎈 windows 下启动服务可能会打开一个终端窗口，关闭终端页面，会导致服务关闭，如果没有上述现象，则不用在意

生成

打开 cursor，新建文件夹 test，文件 index.html，打开 index.html 并开启对话窗口，模式选择Agent

使用官方示例在对话框输入以下内容

perl 复制代码

https://mastergo.com/file/155675508499265?page_id=158%3A0002&state=LanHuVX&layer_id=158%3A0222 生成html

cursor 生成相关 html 代码，还原度还是挺高的，图片可能无法显示，可以让 cursor 用开源图片替代

最终效果：

总结

随着 mcp 服务的兴起，各种开发工具跟智能 ide 的结合将越来越普遍，掌握这些开发方法，一些情况下还是很方便的，不过经过测试，复杂页面生成效果还不是很理想，目前还是在 html 页面生成，随后有时间尝试一下 .vue 文件生成