跳到主要内容

MCP服务

GemDesign MCP 介绍​

设计到交付，从未如此简单

专为 GemDesign 订阅用户打造的 MCP 服务（Model Context Protocol） 现已上线，让设计资产与开发工作流无缝衔接。

获取完整项目结构

获取 GemDesign 项目应用的完整页面列表

获取页面代码

一键获取各页面高保真HTML 代码，含完整 DOM 结构、样式类名及布局信息

基于 MCP 的无限可能​

获得上述原始设计数据后，您可以在 Cursor、Trae、Claude Code 或其他支持MCP AI coding 工具中，使用大模型能力实现更高效的开发场景：

一键获取生产级代码 —— 原型结构自动转换为React/Vue 等前端代码，组件层级、样式系统完整保留。 无缝对接现有架构 —— AI 自动识别项目技术栈，智能适配编码规范，无需手动重写。 实时同步设计变更 —— 原型迭代后，代码层自动增量更新，告别"设计开发两张图"的永恒痛点。

这不仅是设计稿的导出，而是设计与开发在 AI 工作流中的真正融合。您的创意从语言描述，到高保真原型，再到可运行的代码框架，形成完整闭环。

GemDesign MCP 安装与配置​

Step 01

打开最新版 Trae ，在 IDE 模式中，打开 设置 ，选择 MCP。

MCP 设置窗口，选择 手动添加。

Step 02

登录 GemDesign ，在 "头像菜单 - GemDesign令牌" 中，生成GemDesign令牌。

Step 03

复制以下 json 代码：

{
  "mcpServers": {
    "GemDesign": {
      "command": "npx",
      "args": ["-y", "@gemcoder/gemdesign-mcp-server@latest"],
      "env": {
        "GEMDESIGN_API_KEY": "请替换为GemDesign上生成的GemDesign令牌"
      }
    }
  }
}

粘贴到手动配置 窗口中，将代码中 GEMDESIGN_API_KEY 字段引号内文字，替换为Step 02 中生成的 GemDesign令牌 ，然后点击确认。

等待自动安装完成即可。

GemDesign MCP 使用案例​

通过 coding 工具（如 Trae, Cursor 等）使用 gemdesign-mcp-server 的具体场景和提示词示例。

1. 基础工具说明​

工具名称参数功能描述
list_pagesappuuid获取指定应用下的所有页面列表及基本信息（appuuid可从网址中获取）。
get_page_contentappuuid, pageuuid获取指定页面的完整HTML 源码（pageuuid可从上述应用页面列表返回中获取）。
download_asseturl, destination获取指定url的资源（如图片、字体等）并保存到本地。

2. 使用场景示例​

场景一：浏览项目结构​

目标：查看一个GemDesign 应用中包含哪些页面。

用户提示(Prompt)

"帮我看看 appuuid 19932xxxxxxxxx78784 的项目里都有哪些页面？"

AI 动作：AI 会调用 list_pages(appuuid="19932xxxxxxxxx78784")。

预期输出：AI 将列出该应用下的所有页面名称和对应pageuuid。

场景二：分析特定页面的实现​

目标：获取某个页面的 HTML 并让 AI 分析其布局或组件。

用户提示(Prompt)

"我想看看 App 19932xxxxxxxxx78784 中，页面 ID 20182xxxxxxxxx54112 的HTML 源码，并帮我分析一下它是如何实现响应式导航栏的。"

AI 动作：

  1. 调用 get_page_content(appuuid="19932xxxxxxxxx78784", pageuuid="20182xxxxxxxxx54112")。
  2. 阅读返回的HTML。
  3. 提供分析报告。

场景三：项目还原与迁移​

目标：将 GemDesign 中的页面内容还原到本地开发项目中。

用户提示(Prompt)

"请获取App 19932xxxxxxxxx78784 的Home 页面（UUID: 20182xxxxxxxxx54112）的 HTML，并根据这些内容在我的本地src/components 目录下创建一个React 组件。"

AI 动作：

  1. 调用 get_page_content 获取源码。
  2. AI 将HTML 转换为JSX/React 组件。
  3. AI 提示您确认并写入文件。

场景四：全量项目审计​

目标：一次性了解整个项目的页面分布。

用户提示(Prompt)

"先列出App 19932xxxxxxxxx78784 的所有页面，然后随机选两个页面获取它们的 HTML 内容，总结一下这个项目的整体设计风格。"

AI 动作：

  1. 调用 list_pages 获取列表。
  2. 自动从列表中选取两个 pageuuid。
  3. 连续调用两次 get_page_content。
  4. 综合分析并给出风格总结。

3. 常见问题排查​

  • 认证失败：如果AI 提示 Invalid AccessToken，请检查GEMDESIGN_API_KEY 环境变量是否正确配置。
  • 找不到应用：请确保 appuuid 是正确的。您可以在GemDesign 项目应用网址中找到它。

4. 进阶提示词技巧​

您可以要求AI 结合多个工具进行复杂任务，例如：

"将 GemDesign 中的所有按钮组件提取出来，并生成一份样式规范文档。"

5. 真实案例实践：从设计到还原​

步骤一：探索项目结构​

用户提示：

"帮我看看 appuuid 19932xxxxxxxxx78784 的项目里都有哪些页面？"

AI 动作：AI 调用 list_pages 工具，获取该应用下的页面清单。

预期输出：在该项目中找到了以下 5 个页面：

  • 首页/Landing (ID: page-home-001)
  • 产品列表页 (ID: page-product-list)
  • 详情介绍页 (ID: page-detail-info)
  • 个人中心 (ID: page-user-center)
  • 关于我们 (ID: page-about-us)

步骤二：指定页面和技术栈还原​

用户提示：

"获取 详情介绍页 的HTML，参考它给我还原生成一个Vue 3 响应式页面。"

AI 动作：

  1. 调用 get_page_content 获取 page-detail-info 的源码。
  2. 分析其Tailwind CSS 样式、布局结构和业务逻辑（如保费标准表格、FAQ 折叠等）。
  3. 生成一个生产级别的 .vue 组件文件。

预期输出：AI 会输出一段完整的 Vue 3 代码，并主动将其保存为本地文件（InsuranceIntroduction.vue）。该代码将具备：

  • 数据驱动: 提取静态内容为 Vue ref 或 reactive 对象。
  • 响应式布局: 自动处理移动端与桌面端的适配。
  • 交互功能: 完美还原 FAQ 切换等JS 交互效果。