一套间距

定一组固定数值，别每个地方现拍一个。

页面上所有的间距只从一组固定数值里取。定好之后，间距就不再是每次要做的决定。

你会遇到的现象：

• 页面说不上哪里不对，就是有点乱
• 两个模块的内边距差 2px，看着别扭但找不到原因
• 让 AI 改一处间距，它顺手把别处也改了，值还都不一样

随手定的间距会产生一堆相近但不相等的值：11、13、14、15。这些差别小到看不出是故意的，大到能被感觉到，结果就是「有点乱」但说不清哪里乱。用固定的一组值之后，间距的差别变成了有意义的信号：8 表示紧密相关，24 表示这是两个不同的组。这是格式塔分组原则里的接近性在数值上的落地——靠近的物体会被感知成一组，间距就是它的量化版本。grouping

间距回答的是「这些内容是不是一回事」。8 和 24 之间的距离差，比任何分割线都安静；删掉分割线之后，正是这组数在替分割线表达分组。这也是为什么视觉层级和留白优先的做法都要先有一套间距——没有固定值，分层就无从谈起。

怎么定这组数

五到六个值就够用。多了等于没定，因为总能找到一个「差不多合适」的；少了会不够用，被迫破例。定完之后顺手把每个值该用在哪写进文档，团队和 AI 就都能照着用。下面这组是常见起点：

基数取 4 或 8 都行，关键是全站只有一套。取 4 的倍数更灵活，取 8 的倍数更整齐；移动端因为屏幕小，通常从 4 起步。

怎么用

• **间距差要能表达关系。**相邻两级之间至少差 1.5 倍，8 和 24 的差别一眼能看出来，8 和 12 就模糊了。
• **竖向间距比横向更重要。**人是纵向扫页面的，纵向的节奏乱了最容易被感知。
• **写成变量，不要写死。**定义成 CSS 变量或设计令牌，改一次全站生效。
• **破例要有理由。**确实需要一个不在表里的值时，先想想是不是层级关系没理清。理清之后通常会发现，不是缺一个值，而是这个元素根本不该出现在这里。

验收也很简单：把页面截图缩小到 50% 眯着眼看。缩小的图抹掉文字细节，剩下的就是间距的节奏——相关的元素是不是聚成一团、不同的组是不是拉开了。如果缩小后还是乱的，十有八九是有人现拍了值。间距是 AI 最容易随手生成的属性之一，这也是为什么要把这组数写进约束文件，而不是指望每次提醒它。

给 AI 的话

把间距规范写进项目的约束文件，AI 每次生成界面都会遵守。

CLAUDE.md · 间距规范

## 间距

全站间距只能取这组值，不允许出现其他数字：
4 / 8 / 16 / 24 / 40 / 64（单位 px）

用法：
- 4　元素内部，比如图标和文字之间
- 8　紧密相关的两项，比如标题和它的正文
- 16　同组条目之间、卡片内边距
- 24　组与组之间、卡片之间
- 40 / 64　大区块之间、页面上下边距

要求：
- 定义成 CSS 变量（--sp-1 到 --sp-6），
  组件里引用变量，不要写具体数值。
- 如果某处你认为需要表里没有的值，先告诉我原因，
  不要自己取一个中间值。
- 已有代码里出现表外的间距值时，主动指出来。

最后一条挺有用。让 AI 顺手做体检，比你自己逐个查快得多。间距和字号阶梯是同一套思路的两半：数值都收敛成固定组，页面才谈得上秩序感。