| name | impeccable-design |
| description | 框架无关的前端设计语言参考。提供排版、色彩、动效、空间构图的专业设计原则与反模式清单，避免生成千篇一律的"AI 风格"界面。当构建或优化 UI 界面时使用。 |
Impeccable Design
框架无关的设计语言参考，源自 Impeccable 和 UI Design Brain 的核心精华，适配 B 端管理台场景。
本 Skill 提供"设计原则"，具体到 antd 组件如何落地请参考 antd-design-system Skill。
排版
详细参考：reference/typography.md
核心原则
- 层级清晰：使用 5 级字号体系（xs/sm/base/lg/xl），不要在 14-16px 之间密集分布
- 字重即层级：标题 600，正文 400，辅助 400 + 浅色——靠字重和颜色建立视觉层级，而非都加粗
- 行高与间距同源：body
line-height: 1.5（14px × 1.5 = 21px），间距取其倍数保持节奏感
- 数据对齐：表格数字用
font-variant-numeric: tabular-nums 保证列对齐
- 等宽场景：代码片段、路径、命令用等宽字体，其余用系统字体栈
反模式
- 正文字号 < 13px（B 端操作频繁，太小伤眼）
- 标题和正文字重相同（层级模糊）
- 全局都用等宽字体营造"技术感"（读起来很累）
- 在标题上用渐变色文字（装饰性过强，无实际意义）
色彩
核心原则
- 一个强调色 + 中性底色：主色
#4f46e5 用于交互元素，大面积使用中性灰白
- 中性色带色相倾向：不用纯灰
#808080，用带微蓝倾向的 slate 系列（#64748b / #94a3b8）
- 语义化颜色：success=green, warning=orange, error=red, info=blue，不要给每个状态随机分配颜色
- 对比度达标：文字与背景对比度 ≥ 4.5:1（WCAG AA），辅助文字 ≥ 3:1
- 避免纯黑纯白：用
rgba(0,0,0,0.85) 替代 #000，用 #f5f5f5/#fafafa 替代 #fff
反模式
- 紫+蓝渐变背景（AI 标志性风格）
- 深色背景 + 霓虹强调色（看起来酷但不专业）
- 每个 Badge/Tag 一种不同亮色（彩虹标签）
- 灰色文字放在有色背景上（看起来褪色）
空间与布局
核心原则
- 8px 栅格：所有间距是 4/8/12/16/24/32/48px，不出现 5px、7px、15px
- 间距即分组：紧凑间距（4-8px）表示同组元素，宽松间距（24-32px）表示区块分隔
- 不是所有东西都需要卡片包裹：信息密度高的区域直接用分割线或间距区分
- 卡片内层级：图标/图片 → 标题 → 描述 → 标签 → 操作栏，自上而下
- 操作区靠右/靠底：按钮组右对齐，表格操作列固定右侧
反模式
- Card 嵌套 Card（视觉噪音，扁平化处理）
- 所有内容居中对齐（左对齐更适合阅读）
- 等尺寸卡片网格无限重复（单调，考虑混合布局）
- 相同间距平铺所有元素（没有节奏感）
动效
核心原则
- 状态变化才加动效：展开/收起、出现/消失、hover 反馈——不要为了动而动
- 时长适度：微交互 150-200ms，展开/切换 200-300ms，页面过渡 300-400ms
- 缓动函数：使用
ease-out（快进慢出），避免 bounce/elastic（过时）
- 只动 transform 和 opacity：不要动画 width/height/padding（会触发重排）
- 尊重用户偏好：
prefers-reduced-motion: reduce 时关闭非必要动效
B 端场景适用动效
| 场景 | 效果 | 时长 |
|---|
| 按钮 hover | 微弱背景色变化 | 150ms |
| Modal 弹出 | fade + scale(0.95→1) | 200ms |
| Drawer 滑入 | translateX 从右侧滑入 | 250ms |
| 表格行展开 | 高度过渡 | 200ms |
| 页面切换 | fade-in | 200ms |
反模式
- 全局
transition: all 0.3s（性能杀手，对所有属性生效）
- 加载时播放复杂入场动画（B 端用户要的是效率）
- 每个元素都有 hover 放大效果（过度设计）
状态处理
每个界面都要考虑完整的状态矩阵：
| 状态 | 处理方式 |
|---|
| 空状态 | 插图 + 描述文案 + 主操作按钮，正面引导语气 |
| 加载中 | 列表/卡片用 Skeleton 占位（模拟真实布局形状）；页面级用 Spin |
| 错误 | 内联错误提示，失焦时校验；网络错误用全局 notification |
| 禁用 | 视觉灰化但仍可读，Tooltip 说明禁用原因 |
| 成功 | 短暂 message 反馈（3s），不阻断操作流 |
AI 风格检测
生成 UI 后做自检——如果有人说"这一看就是 AI 做的"，那就有问题：
- 紫白配色 + 渐变按钮？ → 改用项目主题色
- 每个区块都是圆角卡片 + 阴影？ → 减少容器层级
- 所有元素等距等大排列？ → 引入视觉层级差异
- 大图标 + 大标题 + 短描述的重复三联体？ → 根据内容调整布局
- 深色背景 + 发光强调色？ → B 端用浅色主题
