DESIGN SYSTEM
间距刻度Spacing Scale
间距只允许 4 的倍数（4/8/12/16/24/32/48/64/96）——杂乱间距的解药。
效果预览
4px图标与文字
8px组件内元素
16px卡片内边距
24px卡片之间
48px区块之间
96px章节之间
适合用在哪
所有项目。间距随机（13px、17px）是外行站的第一特征。
容易踩的坑
- 设计稿用 8pt 刻度，开发却写 15px、18px 等随意值，上线后节奏全乱。
- 组件内间距与组件间距相同，亲密性丢失，用户分不清哪些元素是一组。
- 移动端直接沿用桌面 96px 区块间距，一屏只剩一个标题和大片空白。
设计提示词 · Prompt
间距刻度（Spacing Scale）：以 4px 为基（8pt 网格的半步），刻度 4/8/12/16/20/24/32/40/48/64/80/96——组件内间距用小值（8/12/16）、组件间用中值（24/32）、区块间用大值（48/64/96）。所有 margin/padding/gap 只能取刻度值（Tailwind 的 spacing 体系即此）。配套规则：相关元素间距小、无关元素间距大（亲密性原则）；同一层级间距一致。刻度与字号联动：正文 16px 配行高 24px（1.5），正好落在刻度上。检查方法：截图用 8px 网格叠加，所有留白都该落在格线上。
Spacing Scale: Base it on 4px (half a step of the 8pt grid), with the scale 4/8/12/16/20/24/32/40/48/64/80/96 — use small values inside components (8/12/16), medium values between components (24/32), and large values between sections (48/64/96). All margin/padding/gap may only take scale values (this is Tailwind's spacing system). Supporting rules: related elements get small spacing, unrelated elements large spacing (proximity principle); spacing at the same level stays consistent. Tie the scale to type: 16px body text with 24px line height (1.5) lands exactly on the scale. How to check: overlay an 8px grid on a screenshot — all whitespace should land on grid lines.
常见搭配
同一页面里经常和「间距刻度」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-spscale"> <div class="d-sps"><b>4px</b><i style="width:16px"></i><span class="d-tiny">图标与文字</span></div> <div class="d-sps"><b>8px</b><i style="width:32px"></i><span class="d-tiny">组件内元素</span></div> <div class="d-sps"><b>16px</b><i style="width:64px"></i><span class="d-tiny">卡片内边距</span></div> <div class="d-sps"><b>24px</b><i style="width:96px"></i><span class="d-tiny">卡片之间</span></div> <div class="d-sps"><b>48px</b><i style="width:100%"></i><span class="d-tiny">区块之间</span></div> <div class="d-sps"><b>96px</b><i style="width:100%"></i><span class="d-tiny">章节之间</span></div> </div>