Cursor + MasterGo 前端一键生成页面

0 阅读2分钟

前言

这段时间cursormcp 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 配置:

{
  "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 配置:

{
  "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. 4. 配置完成点击刷新,重启服务,服务前图标亮起,代表启动成功

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

生成

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

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

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

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

最终效果:

总结

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