核心用法
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 配置，导致样式失效
- 主题过度定制：覆盖过多组件级样式，维护成本激增，违背技能初衷
- 表格性能：大数据量时未启用服务端分页/虚拟滚动，引发渲染卡顿
- 表单验证冗余：自定义验证替代内置规则，增加代码复杂度与测试负担