Ant Design（React）—— 实用前端设计技能

当你使用 Ant Design（antd） 构建 React UI，并希望快速产出风格统一、视觉不丑的界面时，请使用本技能。

适用场景

• 项目技术栈为 React + Ant Design
• 你需要设计或实现包含以下元素的页面：Layout、Menu、Form、Table、Modal、Drawer、Steps、Tabs、Pagination
• 你需要实现 theme tokens（颜色、圆角、字体排印、间距）
• 你期望采用可预测的 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（全局）及组件级覆盖方式应用主题与 tokens。
7. 验证以下状态：
   • 空状态（Empty states）
   • 加载状态（Loading states）
   • 错误状态（Error states）
   • 移动端响应式（至少确保 360px 宽度下的布局合理性）

组件模式（可复用的设计心智模型）

Layout

• 使用 Layout 配合可折叠的 Sider，Header 承载顶部操作，Content 支持滚动。
• 将页面标题与主操作按钮置于 Flex（或 Space）行内布局中。

Forms

• 保持表单垂直排列；标签对齐方式需一致。
• 使用 Form + Form.Item 的内置校验规则；仅在必要时才编写自定义校验逻辑。
• 编辑流程中使用 Form.useForm() 与 form.setFieldsValue() 管理表单数据。

Tables（CRUD 场景）

• 列布局建议：
  • 左侧：标识符 / 名称
  • 中间：关键属性字段
  • 右侧：操作列（Edit/Delete）
• 始终指定 rowKey。
• 真实项目中应使用服务端分页。

Modals / Drawers

• Modal 适用于短表单。
• Drawer 更适合长表单，或需要保留上下文信息的场景。

主题配置 / Tokens（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 并保持 tokens 一致性：

const isDark = true;

组件级覆盖

通过 components. 对特定组件进行微调（如 Button、Input、Table 等）。

参考资料

• 阅读 README.md 获取完整“操作指南”（含环境搭建 + 设计模式 + 示例代码）。
• 若需以 LLM 为优先的契约式开发（将 UI 描述为结构化数据，再确定性生成代码），请使用 protocols/ 目录。
• 查阅 references/tokens.md 获取主题 tokens 的速查手册。
• 查阅 references/components.md 获取典型页面模板（CRUD、Settings、Wizard）的实践配方。
• 若需开箱即用的 AntD 页面示例，请参考 examples/ 目录。
• 若需可立即运行的 Vite + React + AntD 脚手架项目，请使用 starter/ 目录。

约束条件（Guardrails）

• 默认假设项目使用 Ant Design v5+（基于 tokens）。若实际为 v4（基于 Less 变量），请立即中止并确认。
• 优先使用内置组件与标准模式，避免过度依赖自定义 CSS。
• 避免过度定制主题：仅设置少量核心 tokens；仅在必要时才对特定组件进行样式覆盖。