MCP服务
GemDesign MCP 介绍
设计到交付，从未如此简单
专为 GemDesign 订阅用户打造的 MCP 服务（Model Context Protocol） 现已上线，让设计资产与开发工作流无缝衔接。
获取完整项目结构
获取 GemDesign 项目应用的完整页面列表。
获取页面代码
一键获取各页面高保真 HTML 代码，含完整 DOM 结构、样式类名及布局信息。
基于 MCP 的无限可能
获得上述原始设计数据后，您可以在 Cursor、Trea、Claude Code 或其他支持 MCP 的 AI coding 工具中，使用大模型能力实现更高效的开发场景：
一键获取生产级代码 —— 原型结构自动转换为 React/Vue 等前端代码，组件层级、样式系统完整保留 无缝对接现有架构 —— AI 自动识别项目技术栈，智能适配编码规范，无需手动重写 实时同步设计变更 —— 原型迭代后，代码层自动增量更新，告别"设计开发两张图"的永恒痛点
这不仅是设计稿的导出，而是设计与开发在 AI 工作流中的真正融合。您的创意从语言描述，到高保真原型，再到可运行的代码框架，形成完整闭环。
GemDesign MCP 安装与配置
Step 01
打开最新版 Trae ，在 IDE 模式中，打开 设置 ，选择 MCP
在 MCP 设置窗口，选择 手动添加
Step 02
登录 GemDesign ，在 “头像菜单 - MCP令牌” 中，生成MCP令牌
Step 03 复制以下 json 代码
{
"mcpServers": {
"GemDesign": {
"command": "npx",
"args": ["-y", "@gemcoder/gemdesign-mcp-server@latest"],
"env": {
"GEMDESIGN_API_KEY": "请替换为GemDesign上生成的MCP令牌"
}
}
}
}
粘贴到 手动配置 窗口中，将代码中 GEMDESIGN_API_KEY 字段引号内文字，替换为 Step 02 中生成的 MCP令牌 ，然后点击 确认 。
等待自动安装完成即可。
GemDesign MCP 使用案例
通过 coding 工具（如 Trae, Cursor 等）使用 gemdesign-mcp-server 的具体场景和提示词示例。
1. 基础工具说明
| 工具名称 | 参数 | 功能描述 |
|---|---|---|
list_pages | appuuid | 获取指定应用下的所有页面列表及基本信息（appuuid可从网址中获取） |
get_page_content | appuuid, pageuuid | 获取指定页面的完整 HTML 源码（pageuuid可从上述应用页面列表返回中获取） |
download_asset | url, destination | 获取指定url的资源（如图片、字体等）并保存到本地 |
2. 使用场景示例
场景一：浏览项目结构
目标：查看一个 GemDesign 应用中包含哪些页面。
用户提示词 (Prompt)：
"帮我看看 appuuid 为
19932xxxxxxxxx78784的项目里都有哪些页面？"
AI 动作：
AI 会调用 list_pages(appuuid="19932xxxxxxxxx78784")。
预期输出：
AI 将列出该应用下的所有页面名称和对应的 pageuuid。
场景二：分析特定页面的实现
目标：获取某个页面的 HTML 并让 AI 分析其布局或组件。
用户提示词 (Prompt)：
"我想看看 App
19932xxxxxxxxx78784中，页面 ID 为20182xxxxxxxxx54112的 HTML 源码，并帮我分析一下它是如何实现响应式导航栏的。"
AI 动作：
- 调用
get_page_content(appuuid="19932xxxxxxxxx78784", pageuuid="20182xxxxxxxxx54112")。 - 阅读返回的 HTML。
- 提供分析报告。
场景三：项目还原与迁移
目标：将 GemDesign 中的页面内容还原到本地开发项目中。
用户提示词 (Prompt)：
"请获取 App
19932xxxxxxxxx78784中Home页面（UUID:20182xxxxxxxxx54112）的 HTML，并根据这些内容在我的本地src/components目录下创建一个 React 组件。"
AI 动作：
- 调用
get_page_content获取源码。 - AI 将 HTML 转换为 JSX/React 组件。
- AI 提示您确认并写入文件。
场景四：全量项目审计
目标：一次性了解整个项目的页面分布。
用户提示词 (Prompt)：
"先列出 App
19932xxxxxxxxx78784的所有页面，然后随机选两个页面获取它们的 HTML 内容，总结一下这个项目的整体设计风格。"
AI 动作：
- 调用
list_pages获取列表。 - 自动从列表中选取两个
pageuuid。 - 连续调用两次
get_page_content。 - 综合分析并给出风格总结。
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 动作：
- 调用
get_page_content获取page-detail-info的源码。 - 分析其 Tailwind CSS 样式、布局结构和业务逻辑（如保费标准表格、FAQ 折叠等）。
- 生成一个生产级别的
.vue组件文件。
预期输出：
AI 会输出一段完整的 Vue 3 代码，并主动将其保存为本地文件（如 InsuranceIntroduction.vue）。该代码将具备：
- 数据驱动: 提取静态内容为 Vue 的
ref或reactive对象。 - 响应式布局: 自动处理移动端与桌面端的适配。
- 交互功能: 完美还原 FAQ 切换等 JS 交互效果。