关键词

MasterGo 集成设计数据访问AI 设计工具DSL 提取代码生成上下文

项目简介

MasterGo Magic MCP 是一个独立的 MCP (Model Context Protocol) 服务，旨在连接 MasterGo 设计工具与人工智能模型。它允许 AI 模型直接从 MasterGo 设计文件中检索 DSL 数据，并执行相关操作。

主要功能点

  • 获取设计数据 (DSL): 允许 AI 模型获取 MasterGo 设计文件的详细结构和属性数据 (DSL)，帮助理解设计布局和元素。
  • 获取元数据: 提供设计站点或页面的高层配置和元信息，适用于构建完整网站或进行整体分析。
  • 获取组件文档: 根据设计数据中引用的组件链接，帮助 AI 模型获取对应的组件使用文档，辅助生成符合规范的前端代码。
  • 作为 AI 的上下文提供者: 将 MasterGo 的设计信息转化为 AI 模型可以理解和利用的上下文，增强 AI 在设计相关任务上的能力。

安装步骤

  1. 确保您的系统已安装 Node.js 环境。
  2. MasterGo Magic MCP 可以直接通过 npx 运行，无需额外安装依赖。

服务器配置

该 MCP 服务器通常由支持 MCP 协议的 LLM 客户端（如 Cursor, Cline 等）按需启动和管理。客户端需要在其配置中指定启动该服务器的命令和参数。

以下是配置时需要提供的关键信息：

  • 服务器名称 (server name): 例如 'mastergo-magic-mcp' 或 '@master/mastergo-magic-mcp'，用于在客户端中标识此服务。
  • 启动命令 (command): 启动 MCP 服务器的可执行命令。对于此项目，通常是 'npx'。
  • 启动参数 (args): 传递给启动命令的参数列表。
    • '-y': (可选) 自动确认 npx 的安装提示。
    • '@mastergo/magic-mcp': 要运行的 npm 包名称。
    • '--token=<您的 MasterGo API Token>': 必需参数，用于访问 MasterGo API 的个人访问令牌。请将 '<您的 MasterGo API Token>' 替换为您实际获取的 Token。
    • '--url=<MasterGo API 地址>': (可选) MasterGo API 的基础 URL。通常默认为 'https://mastergo.com'。
    • '--rule=<规则名称>': (可选) 可以多次使用，添加自定义设计规则，这些规则会包含在获取 DSL 数据的结果中，指导 LLM 生成代码。
    • '--debug': (可选) 启用调试模式，输出更多信息。

基本使用方法

您无需手动启动此 MCP 服务器。当您在支持 MCP 协议的 LLM 客户端中进行与 MasterGo 设计相关的操作时（例如，请求基于设计稿生成代码），客户端会根据其配置自动启动 MasterGo Magic MCP 服务器，并通过标准输入/输出与服务器进行通信。

LLM 客户端随后会通过 JSON-RPC 协议调用服务器暴露的工具（如 'mcp__getDsl'、'mcp__getMeta'、'mcp__getComponentLink'），获取所需的设计数据和信息，并将其作为 LLM 的上下文。LLM 利用这些上下文来理解设计意图、访问设计元素详情，并执行相应的任务（例如，生成代码、回答设计相关问题）。

您只需在您的 LLM 客户端中正确配置此 MCP 服务器的启动信息，并确保 MasterGo API Token 有效即可。

信息

分类

开发者工具

访问项目