（1730期）Ant Design Skill – Ant Design 标准化 UI 开发指南

Ant Design 标准化 UI 开发指南 基于 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 变量），需暂停并确认版本。 标准开发流程： 确认版本：锁定 antd v5+ 以使用 Token 体系 选择页面模式：CRUD 列表、向导（Steps）、设置页、Dashboard 搭建布局骨架：Layout + Sider + Header + Content + Menu 构建核心交互：表单（Form + 验证规则）、表格（Table + 服务端分页）、弹层（Modal/Drawer） 完善反馈机制：message、notification、Modal.confirm 应用主题令牌：通过 ConfigProvider 全局配置或组件级覆盖 验证三态：空状态、加载状态、错误状态 + 移动端适配（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 配置，导致样式失效 主题过度定制：覆盖过多组件级样式，维护成本激增，违背技能初衷 表格性能：大数据量时未启用服务端分页/虚拟滚动，引发渲染卡顿 表单验证冗余：自定义验证替代内置规则，增加代码复杂度与测试负担 原始说明 Skill for efficiently building React UIs using Ant Design v5+ with layouts, forms, tables, modals, theming via ConfigProvider, and consistent component patte...