---
slug: "antd-skills"
source_type: "skill_md"
source_url: "https://cdn.jsdelivr.net/gh/chen8254d/antd-skills@main/SKILL.md"
repo: "https://github.com/chen8254d/antd-skills"
source_file: "SKILL.md"
branch: "main"
---
---
name: Ant Design 规范助手
description: 智能化的 Ant Design 开发助手，提供代码生成、规范检查、最佳实践指导、Figma 设计稿转代码等功能
version: 1.0.0
author: Chen8254d
---

# Ant Design 规范助手

智能化的 Ant Design 开发助手，提供代码生成、规范检查、最佳实践指导、Figma 设计稿转代码等功能。

## 命令列表

### 🎨 Figma 设计稿转代码（D2C）

| 命令 | 触发方式 | 描述 | 输出 |
|------|----------|------|------|
| Figma 转代码 | `@antd:figma [Figma链接]` | 从 Figma 设计稿生成 Ant Design 代码 | 代码文件 + `figma-analysis.md` |

**使用示例**：
```
@antd:figma https://www.figma.com/file/xxxxx/Design?node-id=123:456
```

### 代码生成

| 命令 | 触发方式 | 描述 |
|------|----------|------|
| 创建页面 | `@antd:create page [类型]` | 创建标准页面模板（admin/list/form/detail/modal/drawer） |
| 插入组件 | `@antd:component [名称]` | 插入标准组件，自动填充推荐属性 |
| 应用模式 | `@antd:pattern [模式]` | 应用页面模式（fullscreen-modal/drawer-layout/skeleton-page） |

### 规范检查（带报告输出 📄）

| 命令 | 触发方式 | 描述 | 输出文件 |
|------|----------|------|----------|
| 检查当前文件 | `@antd:check current` | 检查当前文件的规范符合度 | `antd-check-report.md` |
| 检查整个项目 | `@antd:check all` | 批量扫描项目文件，生成规范报告 | `antd-project-report.md` |
| 自动修复 | `@antd:fix [类型]` | 自动修复问题（imports/props/layout/style/all） | - |

### 文档查询

| 命令 | 触发方式 | 描述 |
|------|----------|------|
| 查看文档 | `@antd:docs [组件]` | 查看组件文档和最佳实践 |
| 搜索模式 | `@antd:search pattern [关键词]` | 搜索页面模式 |
| 查看配置 | `@antd:config` | 查看/修改当前配置 |

### 智能辅助（带报告输出 📄）

| 命令 | 触发方式 | 描述 | 输出文件 |
|------|----------|------|----------|
| 分析代码 | `@antd:analyze` | 分析当前代码上下文 | `antd-analysis.md` |
| 获取建议 | `@antd:suggest` | 获取智能优化建议 | - |
| 批量创建 | `@antd:batch create [数量] [类型]` | 批量创建页面/组件 | - |
| 版本迁移 | `@antd:migrate v4-to-v5` | Ant Design v4 到 v5 迁移 | `antd-migration-report.md` |

## 支持的页面类型

- `admin` - 管理后台首页（数据看板）
- `list` - 列表页面（ProTable）
- `form` - 表单页面（分步表单）
- `detail` - 详情页面
- `modal` - 弹窗组件
- `drawer` - 抽屉组件

## 支持的页面模式

- `fullscreen-modal` - 全屏弹窗
- `drawer-layout` - 抽屉布局
- `skeleton-page` - 骨架屏加载
- `split-panel` - 分栏面板
- `tabs-layout` - 标签页布局
- `steps-wizard` - 步骤引导
- `dashboard` - 数据看板
- `crud-list` - CRUD 列表

## 规范检查范围

- **语法级** - 组件导入、属性类型、必需属性
- **规范级** - 布局使用、间距规范、颜色规范
- **性能级** - 重渲染检查、组件大小、代码分割
- **体验级** - 加载状态、错误边界、交互反馈

## 配置

在项目根目录创建 `.antdskillsrc` 文件进行自定义配置：

```yaml
antdVersion: "5.x"
language: "typescript"
styleType: "css-in-js"
useProComponents: true
```

## 📄 输出文件说明

以下命令会生成 Markdown 格式的报告文件：

| 命令 | 输出文件 | 说明 |
|------|----------|------|
| `@antd:check current` | `antd-check-report.md` | 单文件规范检查报告，包含评分、问题列表、修复建议 |
| `@antd:check all` | `antd-project-report.md` | 项目整体规范报告，包含所有文件的检查结果统计 |
| `@antd:analyze` | `antd-analysis.md` | 代码分析报告，包含组件使用、代码结构、优化建议 |
| `@antd:migrate v4-to-v5` | `antd-migration-report.md` | 迁移报告，包含自动修复项和手动处理清单 |
| `@antd:figma [url]` | `figma-analysis.md` | 设计稿分析报告，包含组件识别、样式映射、生成文件列表 |

## 🔗 Figma MCP 集成

本 Skills 支持通过 Figma MCP 从设计稿生成代码：

1. **获取设计稿数据**：自动调用 Figma API 获取设计稿结构
2. **组件识别**：将 Figma 元素映射为 Ant Design 组件
3. **样式提取**：将设计稿颜色、字体、间距映射为 Design Token
4. **代码生成**：生成符合规范的 React + Ant Design 代码
5. **图片下载**：自动下载设计稿中的图片资源

## 版本

- 当前版本：1.0.0
- 支持 Ant Design：4.x / 5.x
- 支持语言：TypeScript / JavaScript
- 支持 Figma MCP：是