定位：视觉决策层，接在工程规范之上

这份 skill 管「长什么样」，其他 skill 管「怎么实现」。

• 它和 ui-ux-decision-guide（控件选型）不重叠：那个管「弹窗还是抽屉」，这个管「弹窗圆角多少、阴影多深」
• 它和 react-frontend-architecture（工程结构）不重叠：那个管目录分层，这个管 token 取值

核心纪律：查不到依据就说不确定，不要编一个"好看"的数字。

一、十类规则的影响优先级

做 UI 时按这个顺序检查。 优先级低的做再好，优先级高的不合格就是白做。

冲突时的裁决：可访问性 > 视觉美观。对比度不够的"好看"是缺陷，不是风格。

二、设计 tokens（后台系统的基础表）

所有视觉决策落在 token 上，不在组件里写裸值。

2.1 颜色

主色 brand        #1677ff（AntD 默认）或品牌色
语义色
  success         #52c41a
  warning         #faad14
  error           #ff4d4f
  info            #1677ff

中性色（文字 4 级）
  text-primary    #000000e0   正文
  text-secondary  #000000a6   次要说明
  text-tertiary   #00000073   占位、禁用
  text-disabled   #00000040

边框 2 级
  border          #d9d9d9
  border-secondary#f0f0f0

背景 3 级
  bg-container    #ffffff     卡片
  bg-layout       #f5f5f5     页面
  bg-elevated     #ffffff     弹层

语义色不能当分类色用——红色永远表示"坏"。

2.2 主色的 10 级色阶

// AntD 自带生成器，不要手调
import { generate } from '@ant-design/colors'
const palette = generate('#1677ff')   // [ '50', '100', ... '1000' ]

2.3 字号阶梯

12  辅助信息、表格内标签
14  正文默认（后台系统主字号）
16  强调正文、表单输入
20  页面内区块标题
24  页面标题
32  数据大屏主数字

后台系统正文用 14，不是 16。 16 是营销页的默认值，后台信息密度高，14 更合适。但移动端必须 ≥16（防 iOS 放大）。

字重只用三档：400（正文）/ 500（强调）/ 600（标题）。不要出现 300 或 700+。

2.4 间距（4 的倍数）

4   元素内极小间距（图标与文字）
8   紧密相关元素
12  表单字段内部
16  常规间距（卡片 padding）
24  区块间距
32  大区块分隔
48  页面级分隔

没有 5px、10px、15px。 全用 4 的倍数，视觉节奏才稳。

2.5 圆角

2   标签、徽章
4   小元素
6   按钮、输入框（默认）
8   卡片、弹窗
12  大容器（抽屉顶部，移动端 sheet）

同一层级用同一个圆角——按钮 6、输入框 6、卡片 8，不要混。

2.6 阴影（3 级，不要更多）

--shadow-1: 0 1px 2px rgba(0,0,0,.03), 0 1px 6px -1px rgba(0,0,0,.02);   /* 卡片默认 */
--shadow-2: 0 6px 16px rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12);  /* 悬停、下拉 */
--shadow-3: 0 9px 28px 8px rgba(0,0,0,.05), 0 6px 16px rgba(0,0,0,.08);  /* 弹窗、抽屉 */

不要用大范围模糊的"毛玻璃大阴影"——后台系统里会显得脏。

三、三个调节参数

定视觉方向时用这三个维度，比"好看一点""现代一点"可执行。

后台系统的默认值

密度 8    —— 后台是数据处理工具，信息密度高
对比 6    —— 白底常规，不用过度设计
动效 4    —— 只做必要的状态反馈

用法

新项目开工时，先确认这三个值，再定 token：

"这是个数据监控台" → 密度 9 / 对比 8 / 动效 3
"这是给客户看的 SaaS 后台" → 密度 6 / 对比 5 / 动效 5
"这是内部运维工具" → 密度 9 / 对比 4 / 动效 2

四、设计系统持久化（MASTER.md）

设计决策必须写入文件，否则跨会话就丢了，每个页面各定一套。

design-system/<project-slug>/
├── MASTER.md              全局唯一真相
└── pages/
    ├── dashboard.md       页面级覆盖
    └── order-list.md

MASTER.md 的最小内容

# <项目名> 设计系统

## Dials
密度 8 / 对比 6 / 动效 4

## 颜色
主色 #1677ff   语义色 见 AntD 默认
中性色 见 token 表

## 字号
12 / 14 / 16 / 20 / 24 / 32，正文 14

## 间距
4 的倍数，卡片 padding 16，区块间距 24

## 圆角
按钮 6 / 卡片 8 / 弹窗 8

## 风格
AntD 默认（圆角 6、蓝色主调、克制阴影）

## 禁止
- 玻璃拟态
- 自定义字体
- 超过 3 档阴影

检索规则

1. 先读 MASTER.md
2. 有 design-system/<project>/pages/<当前页>.md → 用覆盖
3. 否则用 MASTER

改 MASTER 必须显式确认，不能静默覆盖——里面可能有用户或同事定过的决策。

五、后台系统只有 4 种可用风格

不要从"79 种设计风格"里挑，后台系统能用的就这些：

明确不要用的

判断标准：这个风格能让用户连续看 8 小时不累吗？

六、配色方法（四步）

① 定主色
   有品牌色用品牌色；没有就用 #1677ff
   用 @ant-design/colors 的 generate() 生成 10 级

② 语义色固定
   success #52c41a / warning #faad14 / error #ff4d4f / info 主色
   这些不随品牌变

③ 中性色
   文字 4 级 + 边框 2 级 + 背景 3 级（见 2.1）
   不要自己调灰，用 AntD 的 opacity 体系

④ 检查对比度
   正文对背景 ≥ 4.5:1
   大字（≥18px 或 ≥14px 加粗）≥ 3:1
   用 WebAIM Contrast Checker 验

深色模式的独立色板

不要把浅色模式反色：

深色下饱和色要降一档，否则刺眼。

七、字体与数字排版

7.1 后台系统用系统字体

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
             "PingFang SC", "Microsoft YaHei", sans-serif;

不要引入自定义字体：多一个网络请求、有 FOUT、中文子集化很麻烦。品牌站才需要。

7.2 数字要用等宽

.tabular { font-variant-numeric: tabular-nums; }

表格里的金额、数量、ID 必须用，否则数字宽度不一，列对不齐。

7.3 中英混排

• 中文行高 1.6–1.75（英文 1.4–1.5）
• 中英文之间不加空格（前端渲染时浏览器会处理，不要在文案里手打）
• 数字与中文之间要有间距（用 CSS letter-spacing 或直接排版时留）

八、AntD token 定制（可直接用）

<ConfigProvider
  theme={{
    token: {
      colorPrimary: '#1677ff',
      borderRadius: 6,
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif',
      fontSize: 14,
      controlHeight: 32,
      wireframe: false,
    },
    components: {
      Table: { headerBg: '#fafafa', rowHoverBg: '#f5f9ff', cellPaddingBlock: 12 },
      Card:  { paddingLG: 16 },
      Button:{ controlHeight: 32, paddingInline: 16 },
    },
  }}
>

密度高时：controlHeight: 28、cellPaddingBlock: 8、fontSize: 13。 品牌化时：borderRadius: 8、controlHeight: 36、fontSize: 15。

九、交付前检查清单

按优先级顺序过一遍，前面不过不要看后面。

可访问性（P1）

• 所有正文对比度 ≥ 4.5:1，大字 ≥ 3:1
• focus ring 可见，没被 outline: none 去掉
• 所有交互元素键盘可达，Tab 顺序合理
• 图标按钮有 aria-label
• 图片有 alt（装饰性图 alt=""）

触摸与交互（P2）

• 点击区 ≥ 44×44（移动端）/ ≥ 32×32（桌面）
• 相邻点击区间距 ≥ 8px
• 所有异步操作有 loading 反馈
• 没有只靠 hover 才显示的关键信息

性能与稳定（P3）

• 图片用 WebP/AVIF，有宽高或 aspect-ratio
• 列表有骨架屏，加载不跳动（CLS < 0.1）
• 路由级代码分割

布局与响应式（P4）

• 无横向滚动
• 不禁用缩放（user-scalable=no 只在特定场景）
• 1280 / 768 / 375 三个宽度都看过

导航（P5）

• 浏览器返回行为符合预期
• 深层页面有面包屑
• 当前所在位置有明确高亮

排版与颜色（P6）

• 正文 ≥ 14px，行高 ≥ 1.5
• 没有组件内写裸 hex
• 数字用 tabular-nums
• 字重不超过 3 档

动效（P7）

• 时长符合分级（上限 400ms）
• 支持 prefers-reduced-motion
• 没有动 width/height

表单与反馈（P8）

• 每个字段有 label
• 错误显示在字段附近
• 有辅助说明（help text）

图表与数据（P9）

• 有图例与 tooltip
• 不只靠颜色区分系列
• Y 轴有单位

十、规则检索（数据驱动，不背规则）

本 skill 的规则库在 data/ 下，用 scripts/search.py 检索。 不要把规则背进上下文，查一次只加载相关的几条。

design-intelligence/
├── SKILL.md              本文件：判据 + 怎么查
├── data/
│   ├── ux-rules.csv        30 条 UX 硬规则（Do/Don't + 正反例 + 严重度）
│   ├── page-layouts.csv    24 种页面布局（admin 8 / pc 8 / mobile 8）
│   ├── colors.csv          15 套配色（按场景与产品类型）
│   ├── typography.csv      12 组字体配对
│   ├── styles.csv          12 种视觉风格（含适用/避免）
│   └── dials.csv           10 组三拨盘预设
└── scripts/search.py     检索（零依赖，仅标准库）

10.1 怎么查

# 列出所有域与条数
python scripts/search.py --list-domains

# 按域查（推荐：一个明确意图 + 2-5 个词）
python scripts/search.py "表单 错误" --domain ux
python scripts/search.py "移动 底部导航" --domain layout
python scripts/search.py "深色 对比度" --domain ux
python scripts/search.py "SaaS 蓝" --domain color
python scripts/search.py "后台 字体" --domain type
python scripts/search.py "电商 App" --domain style

# 按场景过滤（admin / pc / mobile）
python scripts/search.py "登录" --domain layout -c mobile

# 限制条数
python scripts/search.py "动效" --domain ux -n 3

10.2 查询契约（照这个用，不然查不准）

查不到时的正确回答：

规则库里没有「X」的匹配。以下是我基于通用原则的判断（非库内依据）：……

10.3 不可妥协的 4 条（常驻，不查也知道）

这四条违反即缺陷，属于任何场景都不能让步的底线：

其余 26 条（焦点可见、不能只靠颜色、输入框有 label、错误就近、内容不跳动、长 token 断行、状态切换可取消、认证不靠记忆……）全部在 ux-rules.csv 里，评审时按严重度筛一遍：

# 只看 Critical + High
python scripts/search.py "Critical High" --domain ux -n 30

10.4 三种场景的入口

三者的设计目标完全不同：后台求效率与数据密度，前台求转化与品牌，移动端求单手操作与首屏冲击。不要把后台的规范套到官网首页上。

十一、反面清单

1. ❌ 为了"好看"降低对比度
2. ❌ 后台系统用玻璃拟态 / 新拟态 / 粗野主义
3. ❌ 组件里写裸 hex（color: #1890ff）
4. ❌ 间距用 5px / 10px / 15px
5. ❌ 字重出现 300 或 700
6. ❌ 引入自定义字体（后台系统）
7. ❌ 表格数字不用 tabular-nums
8. ❌ 深色模式直接反色
9. ❌ 阴影超过 3 级
10. ❌ 设计决策不落盘，每个页面各定一套
11. ❌ 视觉方向只说"现代一点"而不给参数