Skip to main content
MCP Practices

Qoder CN + MasterGo MCP: Generate Frontend Code from Designs

Design-to-code (D2C) scenarios—such as generating frontend code from designs in the MasterGo platform—present several challenges. Traditional development approaches often deliver low style fidelity, require complex multi-platform adaptation, and incur high code maintenance costs. The MCP Server intelligently parses design structure and style rules to automatically generate frontend code that complies with enterprise design specifications. This enables high-fidelity visual restoration and seamless multi-platform adaptation while reducing manual effort for repetitive coding and improving long-term code maintainability.

Video Demo

MCP Configuration and Designs

MCP Server Configuration Information 
{
  "mcpServers": {
    "mastergo-magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@mastergo/magic-mcp",
        "--token=<MG_MCP_TOKEN>",
        "--url=https://mastergo.com"
      ],
      "env": {}
    }
  }
}
Designs and MasterGo MCP Source Code

Step One: Add MCP Server

  3. Click the MCP Square tab, locate MasterGo Design And Writing Tool, and click Install.
  4. After the installation is complete, click the Edit button. Then, on the Modify MCP Server page that appears, use your MasterGo personal access token to replace MG_MCP_TOKEN in the Parameters section.To obtain MG_MCP_TOKEN:
  5. Go to https://mastergo.com.
  6. Open Personal Settings.
  7. Click the Security Settings tab.
  8. Under Personal Access Token, click Generate Token.
  9. After configuration, the switch turns on by default. The icon displays as This indicates a successful connection and normal operation.

Step Two: Generate Frontend Code Using MCP Tools

  1. Switch the intelligent session to Agent mode and enter a prompt in the dialog box. Note: Replace the URL in the prompt with the actual URL of your design draft. 
    Generate frontend code based on this MasterGo design: https://<YOUR_URL>
    1. When invoking the MCP tool, the system displays multiple prompts. Wait for your confirmation before proceeding. After the interaction finishes, review the generated code to verify it meets your expectations and requirements.
  2. The following table compares the results. | Design| Generated Effect | |---|---|
Overview
Guides
Tutorials
Support
Developer Reference