Qoder CN+Mastergo MCP：实现设计稿生成前端代码

​

视频演示

​

MCP 配置与设计稿

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

• MasterGo MCP 源码

​

步骤一：添加 MCP 服务

1. 单击 MCP 广场页签，然后查找 MasterGo 设计写作工具，并单击安装。
   
2. 安装完成后单击编辑按钮，然后在弹出的修改 MCP服务页面，使用您的 MasterGo 个人访问令牌替换参数中的MG_MCP_TOKEN。获取 MG_MCP_TOKEN 方法：
3. 访问 https://mastergo.com。
4. 进入个人设置。
5. 单击安全设置选项卡。
6. 找到个人访问令牌，单击生成令牌。

3. 配置完成后，开关默认打开状态，并且图标显示为

，表示连接成功可正常使用。

​

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

1. 切换智能会话为智能体模式，并在对话框中输入提示词。注意将提示词中的 URL 替换为您的实际设计稿地址。
   Copy

   根据这个mastergo的设计图实现前端代码：https://<YOUR_URL>
   
   
2. 在调用MCP工具时，系统将会出现多次提示，需等待您的确认后方可继续进行后续操作。交互完成后，您可以审查生成的代码，确保其符合预期并满足您的需求。
   
3. 效果对比如下所示。 | 设计稿
   
   | 生成效果 | |---|---|