Skill：使用说明
本文档介绍如何在 Trae IDE 中配置和使用 GemDesign Project Builder Skill。该 Skill 能够深度利用 GemDesign MCP 服务，帮助您一键将设计原型还原为高质量的 React 或 Vue 项目代码。
什么是 Skill？
在 Trae 中，Skill 是一种特殊的指令集，它告诉 AI 如何执行特定的复杂任务。通过配置这个 Skill，您可以让 AI 按照最佳实践，自动处理从获取设计稿到生成代码的全过程，包括：
- 智能选择技术栈（React/Vue + 组件库）
- 自动处理图标库和图表库的映射
- 自动下载并引用设计稿中的图片资源
- 遵循统一的编码规范
如何配置 Skill
请按照以下步骤在 Trae 中添加此 Skill：
第一步：打开 Skill 设置
-
在 Trae 的侧边栏或设置菜单中找到 Skill 选项。
-
点击 Create Skill（创建 Skill）或 + 按钮。
第二步：填写 Skill 内容
在新建 Skill 的编辑窗口中，填写以下信息：
- Skill Name:
gemdesign-project-builder - Description:
从 GemDesign MCP 原型页面构建 React/Vue 项目。根据用户需求选择组件库，根据 HTML 内容选择图标/图表库。 - Content: 复制下方的完整 Markdown 代码块内容：
# GemDesign Project Builder
## 使用场景
当用户要求从 GemDesign MCP 原型页面构建项目时调用此 skill。
## 核心原则
1. **组件库**: 由用户在对话中指定（shadcn/ui、Ant Design、Element Plus、无）
2. **图标库**: 使用 HTML 中的相同图标库（Font Awesome、Heroicons 等）
3. **图表库**: 使用 HTML 中的相同图表库（ECharts、Chart.js 等）
4. **Tailwind**: 无组件库时作为主要样式，有组件库时仅用于自定义组件，且使用v3版本,千万不要使用v4版本
## 用户需求分析
### 1. 组件库选择
| 用户指定 | React | Vue |
| ------------ | ---------------- | ---------------- |
| shadcn/ui | shadcn/ui | - |
| Ant Design | Ant Design | - |
| Element Plus | - | Element Plus |
| 未指定 | 无（自定义组件） | 无（自定义组件） |
### 2. 默认选择策略
**用户什么都不指定时：**
- React: 无组件库 + Font Awesome + ECharts + Tailwind（自定义组件）
- Vue: 无组件库 + Font Awesome + ECharts + Tailwind（自定义组件）
## GemDesign MCP 使用
### 1. 获取页面列表
`typescript
mcp_GemDesign_list_pages({ appuuid: "<app-uuid>" })
### 2. 获取页面 HTML 内容
\`\`\`typescript
mcp_GemDesign_get_page_content({ appuuid: "<app-uuid>", pageuuid: "<page-id>" })
\`\`\`
### 3. 获取图片文件
\`\`\`typescript
mcp_GemDesign_download_asset({ url: "<url>", destination: "保存的文件名（含目录）"})
\`\`\`
### 4. 分析 HTML 内容
检查以下内容：
- 图标库: \`<link rel="stylesheet" href="...font-awesome...">\` 或 \`<i class="fa-...">\`
- 图表库: \`<script src="...echarts...">\` 或 \`echarts.init()\`
- CSS 框架: \`<script src="...tailwind...">\`
- 分析html中的常用组件,如果用户指定了组件库，则需要将html代码映射到对应组件库中的组件
- 图片资源: \`<img src="...">\` 标签，提取所有图片 URL
### 5. 图片资源处理
#### 提取图片 URL
从 HTML 内容中提取所有 \`<img>\` 标签的 \`src\` 属性
#### 下载图片到本地
使用 \`mcp_GemDesign_download_asset\` 下载图片
## 技术栈映射
### 图标库
| HTML 中使用 | React | Vue |
| ------------ | ------------------------------ | ---------------------------- |
| Font Awesome | @fortawesome/react-fontawesome | @fortawesome/vue-fontawesome |
### 图表库
| HTML 中使用 | React | Vue |
| ----------- | ----------------- | ----------- |
| ECharts | echarts-for-react | vue-echarts |
## 工作流程
1. **收集需求**: 询问框架、组件库、项目名称
2. **获取页面**: 使用 MCP 获取页面列表和 HTML 内容
3. **分析 HTML**: 识别图标库、图表库、CSS 框架、图片资源
4. **选择技术栈**: 根据用户需求和 HTML 分析结果
5. **构建项目**: 初始化项目、安装依赖
6. **实现页面**: 循环创建每一个页面
- 对每个页面：重新获取 HTML 内容
- 重新分析该页面的图标、图表、UI 模式、图片
**处理图片资源**:
- 提取所有 \`<img>\` 标签的 src 属性
- 使用 \`mcp_GemDesign_download_asset\` 下载图片到合适目录
- 为图片指定描述性名称
- 根据分析结果重构页面组件
7. **测试验证**: 启动开发服务器，验证页面功能
第三步：保存并激活
点击保存按钮。确保该 Skill 处于启用状态。
如何触发 Skill
配置完成后，您可以在与 Trae 的对话中通过自然语言触发它。
示例提示词：
"使用 GemDesign Project Builder，帮我还原 appuuid 为
xxxx的项目，使用 React 和 Ant Design。"
"基于 GemDesign 原型构建一个 Vue 项目，不需要组件库。"
Trae 会自动识别您的意图，加载 gemdesign-project-builder Skill，并按照文档中定义的流程开始工作。