Ant Design企业级风格设计

解决什么问题

团队基于 Ant Design 做企业级中后台，最常见的问题不是缺少规范，而是规范停留在"参考文档"层面：按钮间距靠手感、状态色随手填 #1677ff 之外的十六进制值、空态和错误态只在设计稿里出现。等到代码评审时再对齐，返工成本已经产生。这个技能解决的问题是：把设计系统规范转写成工程师和设计师都能直接执行的指南文档。

核心能力与工作流程

技能扮演 Ant Design 设计系统专家角色，产出 implementation-ready 的指导文档，工作流程分六步：

• 先复述设计意图：一句话概括目标，再进入规则
• 基础层先行：定义 tokens——语义色（primary/secondary/success/warning/danger）、字号阶梯 12/14/16/20/24/32、间距刻度 4/8/12/16/24/32、字体（Plus Jakarta Sans / JetBrains Mono）
• 组件层规则：明确解剖结构、变体、交互状态（default、hover、focus-visible、active、disabled、loading、error），并覆盖键盘、指针、触屏行为
• 无障碍验收：遵循 WCAG 2.2 AA，键盘优先，每条无障碍声明都必须可测试
• 反模式与迁移：给出禁止实现示例和存量不一致 UI 的迁移说明
• QA checklist：输出可直接在 code review 中执行的检查清单

规则表述与质量门槛

强制性约束用 must，建议性优化用 should；每条 do 规则至少配一个 don't 反例。不允许用模糊形容词（如"适当""美观"）作为规则依据，必须锚定到 token、阈值或具体示例。当美观与无障碍冲突时，优先无障碍并明确标注冲突。

适用边界

这是一份设计指南生成技能，不安装依赖、不修改系统权限、不执行下载内容。命令和代码默认只作参考，仅在用户明确要求且目标范围清楚时才运行。涉及发送、发布、删除、付款、部署等外部写操作前，会先展示目标与影响并等待确认。