@mastergo/vibe-mcp

@mastergo/vibe-mcp

MasterGo MCP 客户端 - 连接 MasterGo 本地服务和 IDE / CLI 的桥梁

通过 MCP 协议从本机 MasterGo MCP 服务获取代码

快速开始 · 功能特性 · 可用工具

功能特性

• 🔌 一键安装：使用 npx 无需手动下载
• 📡 MCP 协议：完美集成 Cursor 等支持 MCP 的 IDE
• 🔐 本地安全连接：默认连接本机 MasterGo MCP 服务，无需在 IDE 中配置 access key
• 🛠️ 全能工具箱：包含代码获取、设计稿生成、变量管理、双向同步等 10+ 个专业工具
• 📦 资源访问：通过 URI mastergo://get_code/{content_id} 访问代码

快速开始

1. 配置 MCP

例如：编辑 ~/.cursor/mcp.json（如果文件不存在则创建）：

{
  "mcpServers": {
    "mastergo": {
      "command": "npx",
      "args": [
        "-y",
        "@mastergo/vibe-mcp"
      ]
    }
  }
}

2. 重启IDE / CLI

重启Cursor、VSCode、Trae 等 IDE 或者 CLI 工具，或重新加载 MCP 服务器配置。

3. 开始使用

在IDE / CLI 中，您可以：

方式 1：将设计稿给其他人（研发）拉取代码到本地

在 MasterGo 中选中一个元素，复制的指令然后给到其他人来获取代码。

无需启动 MasterGo，直接在 IDE 中输入该指令即可获取代码。

mastergo://getCode/{contentId}

方式 2：使用 AI 工具进行设计稿与代码的双向交互

直接在对话框输入指令，AI 会自动识别并调用工具：

• "获取 MasterGo 中选中的图层代码" (get_selection_code)
• "使用 MasterGo design 工具设计一个深色模式的统计仪表盘" (design)
• "修改设计稿选中的图层，改为红色背景" (agent_update_node)
• "将我选中的图层删除" (agent_remove_node)
• "将我选中的图层，同步到本地代码" (agent_sync_design)
• "对比本地代码与设计稿的差异" (get_design_diff)
• "获取当前文件变量，并创建一套语义变量" (get_variables / update_variables)

方式 3：加载核心规范工具

在对话中直接要求调用：

• get_guidelines
  • 推荐用法： 当你需要让 LLM 严格遵守 MasterGo 的转译规范、组件导入规则、变量规则和最终硬闸门时，应优先调用该工具加载规则，而不是引用旧的资源 URI。

可用工具

🔍 获取与比对

get_selection_code

获取 MasterGo 中当前选中图层（或指定图层）的代码。支持根节点完整保存，以及子节点自动合并到本地基准 HTML 文件。

• 参数: projectDir (必填), targetNodeId (可选), syncToBase (可选, 默认 true)
• 示例: "获取当前选中图层的代码"

get_design_diff

获取最新设计稿代码与本地 .mastergo 目录中旧代码的差异 (Diff)。用于全量或局部同步。

• 参数: projectDir (必填), targetNodeId (可选), filePath (可选)
• 示例: "对比最新设计稿，看看有哪些改动"

get_code

通过 contentId 获取特定代码并保存到本地。

• 参数: contentId (必填), projectDir (必填), outDir (必填), documentId (可选)
• 示例: "从频道 demo-123 获取代码"

get_code_list

列出所有可用的代码列表。

• 参数: 无
• 示例: "查看我可以拉取的代码列表"

get_library_list

获取当前文件已加载/已订阅的团队库列表（名称、ID、组件数、样式数）。

• 参数: 无
• 示例: "列出当前可用的团队库"

get_component_info

拉取指定团队库组件数据并落盘到本地 .mastergo/library/<teamLibraryId>/<teamLibraryName>/，用于组件库页面生成。每次指定团队库调用都会重新远端拉取并覆盖本地快照。

• 参数: projectDir (必填), teamLibraryId (可选), teamLibraryName (可选), includePropertyDetails (可选, 默认 true)
• 示例: "使用 Ant Design UIKit 团队库，拉取组件信息"

组件库页面生成标准流程：

• 调用 get_library_list 确认团队库；
• 调用 get_component_info 重新远端拉取并覆盖落盘 index.md、components/*.json、icons.json、variable.json；
• 先读 index.md 了解文件位置，再直接读取 components/*.json 作为 <ui-component> 来源，读取 icons.json 作为 <ui-icon> 来源；其中 <ui-component> 的 props 仅允许由组件详情文件里的 props 推导（禁止臆造）。

get_variables

获取当前 MasterGo 文件中的全部本地变量。只读取当前文件，不读取远程团队库。

• 参数: projectDir (必填)
• 示例: "获取当前文件的全部变量"
• 返回: documentName、documentId、variables
• 落盘: 将 variables 字段内容写入 .mastergo/variable/{documentId}.json

update_variables

创建、修改或删除当前 MasterGo 文件变量。

• 固定流程: 先调用 get_variables 落盘；创建一套变量时先 update_variables 提交基础变量，再 get_variables 刷新 ID，然后 update_variables 提交语义/引用变量，最后再次 get_variables
• 参数: projectDir (必填), filePath / variables / operations 三选一；也可传 documentId 让工具读取 .mastergo/variable/{documentId}.json
• 规则: 首次调用会自动加载 variable-update 规则；已有变量修改必须保留 id
• 示例: "把当前变量文件提交到 MasterGo"

🎨 生成与设计

design

根据自然语言需求生成符合 MasterGo 规范的 HTML+CSS 代码。

• 参数: requirement (必填)
• 示例: "帮我设计一个深色模式的登录页面"

agent_create_page

将生成的 HTML 代码发送到 MasterGo 并创建新页面。

• 参数: code (可选), filePath (可选), projectDir (必填), saveCodeToLocal (可选)
• 规则: 首次提交前会自动加载 page-generate 规则，并要求基于规则自检后再次提交。
• 示例: "在 MasterGo 中创建一个新页面，代码在 ./temp.html"

agent_create_component

创建一个 MasterGo 母版组件或组件集（变体）。

• 参数: code (必填)
• 示例: "将这段 HTML 创建为 MasterGo 组件"

🛠️ 操作与更新

agent_update_node

将修改后的 HTML 代码发回 MasterGo 进行局部更新。这是默认修改工具。只要是在现有节点上做修改，就优先使用它。注意：必须包含 data-node-id。

• 参数: code (必填), targetNodeId (可选), documentId (可选)
• 示例: "更新选中的按钮颜色为蓝色"

agent_sync_design

将本地完整的静态 HTML 文件内容全量同步覆盖到 MasterGo 画布。

• 参数: filePath (必填), targetNodeId (必填, 根节点 ID), documentId (可选)
• 示例: "同步本地 index.html 到设计稿根节点"

agent_remove_node

在 MasterGo 中删除指定的或当前选中的图层。

• 参数: targetNodeId (可选), documentId (可选)
• 示例: "删除选中的图层"

许可证

MIT

贡献

欢迎提交 Issue 和 Pull Request！

Made with ❤️ by MasterGo Team