在当今AI技术飞速发展的时代，当设计师精心打造的高保真设计图与先进的 AI 代码生成技术相互碰撞之时，一场意义深远、影响广泛的关于设计 —— 开发流程的革命竟在不知不觉中悄然发生！

Cursor+Claude3.7+Mastergo-MCP 组成的「智能铁三角」，首次实现从设计稿到可运行代码的无缝跃迁。无论是交互逻辑的精准转化，还是跨平台适配的智能优化，这套工具链正以「零代码」姿态重构设计开发协作范式 —— 你只需画出想象，剩下的交给 AI！

一、配置教程，简单几步轻松搞定

1. 添加、配置 MCP 服务

前置条件：需要先登录masterGo账号，并生成个人访问令牌

登录地址：
https://mastergo.com/login

在 Cursor 中添加 MCP 服务是第一步。这需要找到 mcp.json 文件并进行编辑，路径是Cursor-首选项-Cursor Settings，这里需要注意的是--token=MG_MCP_TOKEN，替换成你个人的MasterGo个人令牌，完成后保存文件。接着，返回 Cursor Settings，此时，配置好的 MCP 服务会亮起绿灯，说明配置已就绪。

配置信息：

mac系统：

{
  "mcpServers": {
    "mastergo-magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@mastergo/magic-mcp",
        //"--rule=如果使用图片，则下载到本地并使用相对路径",
        "--token=MG_MCP_TOKEN",
        "--url=https://mastergo.com"
      ],
      "env": {
        "NPM_CONFIG_REGISTRY": "https://registry.npmjs.org/"
      }
    }
  }
}

windows系统：

{
  "mcpServers": {
    "mastergo-magic-mcp": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@mastergo/magic-mcp",
        //"--rule=如果使用图片，则下载到本地并使用相对路径",
        "--token=MG_MCP_TOKEN",
        "--url=https://mastergo.com"
      ],
      "env": {
        "NPM_CONFIG_REGISTRY": "https://registry.npmjs.org/"
      }
    }
  }
}

配置说明：

rule规则可以添加多个，只要按照--rule=xxx的规则去填写即可，示例中提供的规则已注释，如有需要，可以去掉注释即可。

--rule=如果使用图片，则下载到本地并使用相对路径

二、实机演示：效果惊艳！

为了让大家能以更为直观清晰的方式感受这一组合的强大与效能，我们准备了一场实机演示。此刻，我们让功能强大的 AI 协助我们完成一项任务。即从精心绘制的设计图起步，凭借其先进的算法以及智能的交互能力，生成精确且符合要求的 HTML 代码。

首先，在设计图中，右击设计图容器，复制浏览器中显示的链接地址；

告诉AI：①设计稿的 URL 链接地址，②生成HTML；

开始调用 MasterGo-mcp 服务；

开始下载图片，我们添加了 rule 规则（“如果使用图片，则下载到本地并使用相对路径”），mcp 将会按照此规则下载图片

成功完成，现在，让我们一同来对 HTML 的生成情况检查一番，来看看呈现出的效果以及 HTML 代码的具体情形。

效果惊艳，此时我们已经收获了一张对设计稿完美复刻的 HTML 页面，大功告成！

三、结语：

从像素到代码的智能翻译，不仅是工具的升级，更是工作流的颠覆。Cursor 的代码生成能力、Claude3.7 的语义理解、Mastergo-MCP 的实时协作，共同构建了「设计即代码」的未来雏形。这场变革不是取代设计师或开发者，而是让创意突破实现瓶颈，让设计师和开发者专注于更复杂的逻辑创新。

王剑编程网

分享专业编程知识与实战技巧

Mastergo-MCP:让AI用高保真设计图生成代码!

一、配置教程，简单几步轻松搞定

1. 添加、配置 MCP 服务

二、实机演示：效果惊艳！

三、结语：