基于 Ant Design v5 的 React UI 开发技能，提供标准化组件模式、主题令牌配置与 CRUD/表单/布局等高频场景的最佳实践。
说明：
## 核心用法
Ant Design Skill 是面向 React 前端开发的实用设计技能，专注于使用 Ant Design v5（antd）快速构建一致、美观的用户界面。其核心定位是**“非丑陋的默认方案”**——在不需要重度定制的前提下，通过标准化模式产出专业级 UI。
**技术栈前提**：React + Ant Design v5+（基于 CSS-in-JS 的 Design Tokens 体系）。若检测到 v4（Less 变量），需暂停并确认版本。
**标准开发流程**：
1. **确认版本**：锁定 antd v5+ 以使用 Token 体系
2. **选择页面模式**：CRUD 列表、向导（Steps）、设置页、Dashboard
3. **搭建布局骨架**：`Layout` + `Sider` + `Header` + `Content` + `Menu`
4. **构建核心交互**：表单（Form + 验证规则）、表格（Table + 服务端分页）、弹层（Modal/Drawer）
5. **完善反馈机制**：`message`、`notification`、`Modal.confirm`
6. **应用主题令牌**：通过 `ConfigProvider` 全局配置或组件级覆盖
7. **验证三态**：空状态、加载状态、错误状态 + 移动端适配（360px 基准）
**关键模式**：
– **表单**：垂直布局 + `Form.useForm()` 管理编辑流，内置验证优先
– **表格**：左标识、中属性、右操作列；强制 `rowKey`；服务端分页
– **主题**：`theme.defaultAlgorithm`/`darkAlgorithm` + 精简 Token 集合，避免过度定制
## 显著优点
– **开箱即用的规范性**：沉淀了 CRUD、Dashboard、Wizard 等高频场景的成熟模式，减少设计决策负担
– **Token 体系现代化**：v5 的 Design Tokens 支持算法化主题（明暗切换）、组件级细粒度覆盖，告别 Less 变量时代
– **可复制的心智模型**：Layout/Form/Table/Modal 等模式提供“脑内代码片段”，提升开发效率
– **生态完备**：配套 README、protocols（LLM-first 契约）、tokens 手册、components 食谱、examples 示例库、starter 脚手架
## 潜在缺点与局限性
– **版本锁定风险**：v5 Token 体系与 v4 不兼容，遗留项目迁移成本高
– **设计灵活性边界**：强调“非丑陋的默认”而非“高度定制”，强视觉品牌需求可能受限
– **AntD 生态依赖**：组件库体积、样式侵入性、升级节奏完全绑定 antd 官方
– **移动端深度适配有限**：仅要求“360px 布局 sanity”，复杂移动端交互需额外方案
## 适合人群
– **中后台前端开发者**：需快速交付管理后台、数据密集型界面
– **全栈工程师**：React 技术栈，追求 UI 一致性而不愿投入设计资源
– **LLM 辅助编程场景**：protocols 目录支持“描述即代码”的确定性生成
## 常规风险
– **版本误判**：未确认 antd 版本即应用 Token 配置，导致样式失效
– **主题过度定制**：覆盖过多组件级样式，维护成本激增，违背技能初衷
– **表格性能**：大数据量时未启用服务端分页/虚拟滚动，引发渲染卡顿
– **表单验证冗余**：自定义验证替代内置规则，增加代码复杂度与测试负担
会员专属
