MasterGo MCP
MasterGo 的 MCP 协议集成，让 AI 通过标准化接口读取设计稿的间距、色值、字号等参数，实现”设计稿 → 前端代码”的精准还原
简介
MasterGo MCP 是国产设计工具 MasterGo 通过 MCP（Model Context Protocol）协议对外暴露设计数据的集成方式。它使得 Cursor 等 AI IDE 能够直接读取设计稿中的结构化参数——包括间距、色值、字号、组件层级等——而不仅仅依赖截图或人工标注。这种”设计即数据源”的模式，是 AI 辅助设计还原（Design-to-Code）工作流中的关键基础设施。
关键信息
- 类型：工具 / 集成协议
- 领域：设计工具、AI 辅助前端开发
- 底层协议：MCP 模型上下文协议
- 相关工具：Cursor、Codex、Figma
- 核心价值：让 AI 能”看到”设计稿的精确参数，而不仅是视觉表面
核心特性
设计参数标准化输出
MasterGo MCP 将设计稿中的关键信息通过 MCP 协议暴露给 AI：
- 间距与布局：元素之间的精确间距、对齐方式、栅格信息
- 色值与样式：精确的 HEX/RGB 色值、渐变参数、阴影效果
- 字号与排版：字体大小、行高、字重、段落间距
- 组件层级：嵌套关系、分组结构、图层顺序
与 AI IDE 的协作模式
在实际工作流中，MasterGo MCP 的典型使用方式是：
- 设计师在 MasterGo 中完成设计稿
- 开发者在 Cursor 中通过 MCP 连接 MasterGo
- AI 读取设计稿参数，结合本地参考截图，生成前端代码
- 两种参考来源互补：MCP 提供精确参数，截图提供视觉直觉
”设计稿 + MCP” 的协作优势
与纯截图驱动相比，MCP 带来的核心提升：
- 参数精度更高：不再需要 AI “猜”间距和色值
- 减少来回修改：第一版还原度显著提升
- 设计稿变更可追踪：参数变化比视觉变化更容易比对
不同素材中的观点
- 2026-05-28-woshipm-ai-design-restoration-block-refinement：作者在还原后台 Dashboard 的实战中使用 Cursor + Node.js + MasterGo MCP + Codex 组合。核心经验是两种参考一起喂比只给其中一种要稳很多——MCP 提供设计稿的精确参数（间距、色值、字号），本地参考截图提供视觉上下文。只给链接时 AI 理解不稳定，只给截图时 AI 容易只学个表面。两者结合后，第一轮还原能保住约 70% 的结构和氛围。同时，AI 读取 MCP 参数后对装饰背景图的定位仍有困难，需要人工给出明确数值作为补充指令。
实用信息
- 安装方式：需要在 Cursor 等 AI IDE 中配置 MCP 连接，具体配置方式参考 MasterGo 官方 MCP 文档
- 基本用法：1) 在 MasterGo 中准备好设计稿；2) 在 AI IDE 中通过 MCP 连接 MasterGo；3) 给 AI 指令让它读取特定设计稿的参数；4) 结合本地参考截图生成前端代码
- 适用场景：设计稿到前端代码的还原（Design-to-Code）、UI 组件精确复刻、后台管理系统页面还原
- 局限性：对装饰性背景图的定位仍有困难，需要人工补充明确数值；复杂叠加组件需要拆散后逐个还原