antd-skills

内容来源：SKILL.md（标准 Skill 格式） · 原始地址 · 查看安装指南

原始内容

---
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：是

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 文件进行自定义配置：

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 从设计稿生成代码：

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

版本

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