Skill：使用说明

本文档介绍如何在 Trae IDE 中配置和使用 GemDesign Project Builder Skill。该 Skill 能够深度利用 GemDesign MCP 服务，帮助您一键将设计原型还原为高质量React/Vue 项目代码。

什么是 Skill

Trae 中，Skill 是一种特殊的指令集，它告诉AI 如何执行特定的复杂任务。通过配置这个 Skill，您可以让AI 按照最佳实践，自动处理从获取设计稿到生成代码的全过程，包括：

• 智能选择技术栈（React/Vue + 组件库）
• 自动处理图标库和图表库的映射
• 自动下载并引用设计稿中的图片资源
• 遵循统一的编码规范

如何配置 Skill

请按照以下步骤在 Trae 中添加此 Skill。

第一步：打开 Skill 设置

1. 在 Trae 的侧边栏或设置菜单中找到 Skill 选项
2. 点击 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. 获取页面列表

mcp_GemDesign_list_pages({ appuuid: "<app-uuid>" })

### 2. 获取页面 HTML 内容

mcp_GemDesign_get_page_content({ appuuid: "<app-uuid>", pageuuid: "<page-id>" })

### 3. 获取图片文件

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>` 标签，提取所有图片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，并按照文档中定义的流程开始工作。