impeccable-design

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 端用浅色主题