design-to-code-workflows

SKILL.md 节选

# Design to Code 工作流程

本 skill 提供设计到代码转换的完整工作流程，通过 MCP 服务器的 3 个工具支持从 Figma 设计文件和截图生成 React、Svelte 或 Vue 组件。

## 可用的 MCP 工具

本插件通过 MCP 服务器提供以下 3 个工具：

### 1. `parse_figma` - 解析 Figma 设计

从 Figma JSON 导出中提取组件信息。

**输入参数**：
```json
{
  "json": "Figma JSON 导出内容（字符串格式）",
  "framework": "react | svelte | vue（默认: react）"
}
```

**返回内容**：
- `framework`: 目标框架
- `components`: 提取的组件列表（名称、类型、尺寸）
- `colors`: 设计中使用的颜色
- `typography`: 字体设置（字体族、大小、粗细）

**使用场景**：
- 从 Figma 导出 JSON 文件后解析设计结构
- 提取设计系统的颜色和字体信息
- 为代码生成准备组件规格

### 2. `analyze_screenshot` - 分析截图

分析 UI 截图的布局并提取 UI 元素。

**输入参数**：
```json
{
  "imagePath": "截图文件的路径",
  "framework": "react | svelte | vue（默认: react）"
}
```

**返回内容**：
- `framework`: 目标框架
- `layout`: 布局结构（类型、子元素列表）

**使用场景**：
- 从设计稿截图快速生成代码
- 逆向工程现有 UI
- 快速原型设计

**注意**：截图文件需要是可访问的本地路径。

### 3. `generate_component` - 生成组件代码

根据布局规格生成代码组件。

**输入参数**：
```json
{
  "layout": {
    "type": "容器类型（如 container）",
    "children": [
      { "type": "text", "content": "内容" },
      { "type": "button", "label": "标签" }
    ],
    "styles": { "key": "value" }  // 可选
  },
  "framework": "react | svelte | vue（默认: react）",
  "includeA11y": true  // 是否包含无障碍性特性（默认: true）
}
```

**返回内容**：
- `code`: 生成的组件代码
- `framework`: 使用的框架
- `a11yCompliant`: 是否符合无障碍性标准

**使用场景**：
- 从解析的 Figma 数据生成代码
- 从分析的截图生成代码
- 从自定义布局规格生成代码

## 完整工作流程

### 工作流程 1：Figma 设计转代码

**步骤 1：导出 Figma 设计**

引导用户：
1. 在 Figma 中打开设计文件
2. 选择要转换的 Frame 或 Component
3. 右键 → "Copy as" → "Copy as JSON"
4. 将 JSON 内容粘贴给你

**步骤 2：解析 Figma JSON**

使用 `parse_figma` 工具：
```javascript
const parsedDesign = await parse_figma({
  json: "用户粘贴的 JSON 内容",
  framework: "react"  // 或用户选择的框架
});
```

**步骤 3：生成组件代码**

使用解析结果生成代码：
```javascript
const component = await generate_component({
  layout: parsedDesign.components[0],
  framework: "react",
  includeA11y: true
});
```

**步骤 4：优化和调整**

- 显示生成的代码
- 询问用户是否需要调整
- 可以添加样式、状态管理、交互逻辑
- 确保无障碍性特性完整

**输出**：生产就绪的 React/Svelte/Vue 组件，包含：
- 语义化 HTML
- ARIA 标签
- 键盘导航支持
- 适当的样式

---

### 工作流程 2：截图转代码

**步骤 1：获取截图**

引导用户：
1. 提供 UI 截图的路径
2. 或上传截图文件
3. 确认要使用的框架

**步骤 2：分析截图布局**

使用 `analyze_screenshot` 工具：
```javascript
const analysis = await analyze_screenshot({
  imagePath: "/path/to/screenshot.png",
  framework: "svelte"
});
```

**步骤 3：生成组件代码**

基于分析结果生成代码：
```javascript
const component = await generate_component({
  layout: analysis.layout,
  framework: "svelte",
  includeA11y: true
});
```

**步骤 4：完善组件**

- 检查生成的代码
- 添加缺失的交互逻辑
- 优化响应式布局
- 验证无障碍性

**输出**：可用的组件代码，基于截图中的视觉设计。

---

### 工作流程 3：自定义布局生成

**步骤 1：理解需求**

询问用户想要创建什么类型的组件：
- 表单组件

SKILL.md 不止这些内容，安装后可阅读全文。

技能包内容

共 1 个文件，合计 10.3 KiB