基于Cursor+MasterGo的MCP服务的AI编程

一、准备工作

1、登陆自己的masterGo账号，登陆位置（https://mastergo.com/）

2、下载并安装好cursor工具，没有安装的点击链接进行下载（https://cursor.com/cn）

二、MarsterGo相关配置

1、升级企业版：登陆到marsterGo后点击自己团队的标签弹出升级版本列表选择企业版免费试用即可。

2、企业版本开通成功之后默认就会进去企业的空间

3、创建团队：参考下图流程完成团队创建

4、在团队中创建一个项目，如下图

5、进入项目后导入设计图

6、创建用户token，并保存token待用

三、MCP服务配置

1、打开cursor，点击进入设置后找到设置中的“Tools&MCP”选项进入查看配置，具体操作参考图片内容。

配置文件内容如下

{

"mcpServers": {

"mastergo-magic-mcp": {

"command": "npx",

"args": [

"-y",

"@mastergo/magic-mcp",

"--token=你的token",

"--url=https://mastergo.com"

],

"env": {

"NPM_CONFIG_REGISTRY": "https://registry.npmjs.org/"

}

}

}

}

|

2、配置完成后保存配置回到绘制页面查看服务左侧原点为绿色即为正常

自此，MCP服务配置完成！

注：一定要检查自己在团队中的角色，一定要有编辑权限，不然的话配置正确也无法正常访问的（如下图）。

四、实际应用

1、创建项目，整个项目的创建流程和运行流程是和常规的项目创建和运行操作一致的，比如vue你就直接命令创建、uni-app就直接在hbiulder x上创建项目就可以了，创建项目之后通过cursor打开创建的项目即可。

2、预设项目的规则文件，点击设置后选择“Rules and Commands”选项，找到“Project Rules”添加即可。（如下图）

3、打开masterGo，找到自己创建的项目，进入项目后找到自己想要还原的页面，找到页面容器。鼠标右键选择“复制/粘贴”中的“复制容器链接”。

4、获取到容器链接之后即可在cursor中直接在输入框中粘贴链接，并要求“根据设计图内容还原项目中的XX页面，....（其他要求）”，直接发送给cursor让他处理就可以了。如果生成后的效果和设计图有差异的话告知cursor让他做修改即可，下面是整个页面的开发过程。

至此，整个配置加应用的流程就结束了，

我们来看下效果吧：

设计图内容：

还原的页面内容：

写在最后：

截止目前为止我们分享了前端页面的几种生成模式，包括图片、figma+MCP+cursor（可以查看：Cursor+MCP To figma（cursor中使用figma的mcp服务快速还原页面）这篇）和本次的MasterGo+MCP+cursor。到目前为止在前端开发上面已经提供了多条线路可以帮助大家完成前端开发工作，减轻工作量的同时能够有效的提升开发效率。

当然作为一个二把刀的前端我在前端上面的造诣肯定是不如各位前端大佬的，并且我们目前对于cursor这一个AI工具的应用还是相对浅薄的，有好多有趣的新奇的功能可能都还没有试过。所以我们需要的是更多人加入到我们的行列一起来探索AI编程的正确打开方式。