📦 Ant Design Skill — 高效构建 React UI 的 Ant Design 技能
v0.1.0该技能提供了使用 Ant Design v5+ 构建 React UI 的高效指导，包括布局、表单、表格、模态窗口、主题配置等，帮助开发者快速创建一致性和美观的 UI 界面。
by 详细分析 ▾
运行时依赖
版本
ant-design-skill v0.1.0 - 首次发布，提供详细指南用于构建使用 Ant Design 的 React UI。- 覆盖默认工作流：页面模式、布局、表单、表格、模态窗口/抽屉和主题。- 包括实用的组件使用模式和通过 ConfigProvider 和令牌（AntD v5+）的主题配置。- 提供设置、令牌、组件和项目示例的参考和资源。- 推荐防护措施：使用内置模式，尽量少的主题配置，并在开始前确认 AntD 版本。
安装命令
点击复制技能文档
当您使用 Ant Design (antd) 构建 React UI 并希望快速获得一致、美观的屏幕时，请使用此技能。
使用场景
- 项目使用 React + Ant Design
- 您需要设计/实现以下页面：Layout、Menu、Form、Table、Modal、Drawer、Steps、Tabs、Pagination
- 您需要实现主题令牌（颜色、圆角、字体、间距）
- 您需要可预测的 UI 模式（CRUD 屏幕、仪表盘、设置页面）
默认工作流程（按此顺序执行）
1) 确认技术栈：React + antd 版本（假设 v5+）。
2) 选择页面模式：
- CRUD 列表（Table）+ 筛选条件（Form）+ 操作（Modal/Drawer）
- 向导（Steps）
- 设置（Form + Cards）
- 仪表盘（Grid + Cards + Charts）
3) 首先构建布局骨架：
- Layout + Sider + Header + Content
- 使用 Menu 进行导航
4) 构建主要交互组件：
- 表单：Form、Form.Item、Input、Select、DatePicker、Switch
- 表格：Table + 列定义 + 行操作
5) 添加反馈循环：
- message、notification、Modal.confirm
6) 通过 ConfigProvider（全局）和组件级覆盖应用主题/令牌。
7) 验证：
- 空状态
- 加载状态
- 错误状态
- 移动端响应式（至少：360px 布局检查）
组件模式（可复制的思维模型）
Layout
- 使用
Layout配合Sider（可折叠）、Header用于顶部操作、Content可滚动。 - 将页面标题 + 主要 CTA 放在
Flex（或Space）行中。
Forms
- 保持表单垂直对齐；标签对齐一致。
- 使用
Form+Form.Item规则进行验证；除非必要，否则避免自定义验证。 - 使用
Form.useForm()和form.setFieldsValue()处理编辑流程。
Tables (CRUD)
- 列：
- 始终使用
rowKey。 - 实际应用中使用服务端分页。
Modals/Drawers
- Modal 用于简短的表单。
- Drawer 用于较长的表单或需要保留上下文时。
主题 / 令牌（AntD v5）
Ant Design v5 使用 Design Tokens 和 CSS-in-JS。
全局主题
将您的应用包裹在 ConfigProvider 中：
import { ConfigProvider, theme } from 'antd';
export function AppProviders({ children }: { children: React.ReactNode }) { return ( {children} ); }
深色模式
使用 theme.darkAlgorithm 并保持令牌一致：
const isDark = true;
组件级覆盖
使用 components. 进行特定调整（Button、Input、Table 等）。
参考资料
- 阅读 README.md 获取完整的"操作指南"（设置 + 模式 + 示例）。
- 当您需要 LLM 优先的契约时使用
protocols/（将 UI 描述为数据，然后确定性生成代码）。 - 阅读
references/tokens.md获取令牌烹饪书。 - 阅读
references/components.md获取实用页面配方（CRUD、Settings、Wizard）。 - 当您需要可直接复制的 AntD 屏幕时使用
examples/。 - 当您需要可运行的 Vite + React + AntD 骨架时使用
starter/。
防护措施
- 假设使用 Ant Design v5+（令牌）。如果项目是 v4（Less 变量），请停止并询问。
- 优先使用内置组件和模式，而不是自定义 CSS。
- 避免过度主题化：设置少量令牌，仅在需要时覆盖组件。