灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_通义灵码_智能编码助手

在 Design to Code（通过前端设计稿生成前端代码）场景中（如通过 MasterGo 平台实现设计稿智能生成代码），传统开发模式常面临样式还原度低、多端适配繁琐及代码维护成本高等挑战。MCP服务通过智能解析设计稿结构与样式规则，自动生成符合企业设计规范的前端代码，实现高保真视觉还原与多端适配，减少人工编写重复代码的工作量，保障代码可维护性。

视频演示

MCP 配置与设计稿

MCP 服务配置信息

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

设计稿与 MasterGo MCP 源码

MasterGo MCP 源码

步骤一：添加 MCP 服务

单击 IntelliJ IDEA 侧边栏的通义灵码图标进入智能会话。
本文使用 IntelliJ IDEA 进行演示，其他 IDE 的灵码图标位置可能稍有不同，您可参见下载和安装进入智能会话。
在智能会话页面，您可通过以下两种方式进入MCP 服务页面。
- 方式一：单击欢迎语中的MCP 工具链接进入 MCP 服务页面。
- 方式二：单击右上角头像，并在下拉菜单中选择个人设置，然后在个人设置页面单击MCP 服务下的条形框。
单击 MCP 广场页签，然后查找 MasterGo 设计写作工具，并单击安装。
安装完成后单击编辑按钮，然后在弹出的修改 MCP服务页面，使用您的 MasterGo 个人访问令牌替换参数中的MG_MCP_TOKEN。
获取 MG_MCP_TOKEN 方法：
1. 访问 https://mastergo.com。
2. 进入个人设置。
3. 单击安全设置选项卡。
4. 找到个人访问令牌，单击生成令牌。
配置完成后，开关默认打开状态，并且图标显示为，表示连接成功可正常使用。

步骤二：使用 MCP工具生成前端代码

切换智能会话为智能体模式，并在对话框中输入提示词。注意将提示词中的 URL 替换为您的实际设计稿地址。
```
根据这个mastergo的设计图实现前端代码：https://<YOUR_URL>
```
在调用MCP工具时，系统将会出现多次提示，需等待您的确认后方可继续进行后续操作。交互完成后，您可以审查生成的代码，确保其符合预期并满足您的需求。
效果对比如下所示。
设计稿
生成效果