开场：单看都还行，合起来就散装
有一种界面，单看每处都还行，合起来却透着一股散装味。它缺的说到底就一样东西：一套大家共同遵守的变量。这一节讲 design token，变量先行，样式跟随。
一句话速览：好看的站点背后都有一套设计变量：控件高度、圆角、配色全站只有一档，改一处全站生效。
一、散装感的来路
散装感的来路很具体：这个按钮高 36，那个高 40；这张卡圆角 8，那张 16；这里的玫红深一点，那里浅一点。每处都是当时随手写的，单看都说得过去，拼起来就露馅。解法是把这些「随手写」收编成变量：先定 token（主色、圆角、控件高度、间距档位），所有样式从 token 取值。写样式的人少做决定，界面自然长得像一家人。
二、一致性买的是什么
一致性听着像洁癖，其实买的是真金白银。《About Face 4》引尼尔森的账：统一的界面标准靠可预见性提高产出、减少错误，用户在一个地方学会的规律，换个页面还管用，学习成本和培训费用都在降。苹果和微软都乐于让第三方应用长得像自家系统，图的就是用户到哪都不用重新学。
| 一致，用户赚到什么 | 不一致，用户赔上什么 |
|---|---|
| 按钮长这样、行为就那样，闭着眼预判 | 每个新页面都要重新试探一遍 |
| 学一次，全站通用 | 「上一页明明是点右上角保存的」 |
| 界面退到背景，注意力全给内容 | 差异不断把注意力拽向界面本身 |
同一本书也把丑话说在前头：标准管的是外观和感觉这层语法，管不了更深的逻辑，把标准当灵丹妙药，和以为有了格式手册就能写出好小说一样不可取。所以这一节教的是给界面立变量，不是给创造力上锁。
三、真实案例：本站顶栏的两个变量
课程列表页的源码里就躺着这样两行变量（原注释一并抄录）：
:root{
/* 顶栏控件的统一高度与圆角：分享、主题、交流群、语言、账号按钮共用一档 */
--xa-ctl-h:36px;
--xa-ctl-r:10px;
}
顶栏那五个按钮就是被这两个变量管着的：谁也不许自带尺寸，统一读 36px 高、10px 圆角。哪天想全站换风格，改这两行就够了。切到「各写各的」看看会发生什么——五个按钮各写各的尺寸，拼出一排高低不齐。
四、改一个变量，五种控件一起变
一个圆角变量 --demo-radius 管全站：按钮、卡片、输入框、头像框、弹窗一起变。风格是变量的取值，系统感是变量的存在。 取值可以争论，变量必须先有。
五、差异不是罪，没理由才是
《About Face 4》把一致性的裁判标准说成两句话：任何元素的存在要有足够的理由，任何差异的存在也要有足够的理由。删除按钮比别的按钮红，理由充分：行为不同的元素，就该在视觉上明显区分，长得一样却干不一样的事才坑人。反过来，同一层级的两张卡圆角一个 8 一个 16，谁也说不出为什么，那就是该收编的漂移。与其加新元素，不如让一个元素多干几件事，元素越少，一致性越容易守住。
六、落地：把变量表交给 AI
这一节学的东西最后要变成一段话，放在你让 AI 写界面的 Prompt 最前面：
全站样式先遵守这张变量表，再动手写页面：
// 颜色：一个主色 + 中性色，语义色只给状态用
主色 #2563eb（悬停加深为 #1e40af，禁止出现第二种蓝）
中性色 文字 #111827 / 次要 #6b7280 / 边框 #e5e7eb
语义色 成功 #16a34a / 危险 #dc2626，只用于状态，不做装饰
// 尺寸：全部读档位，禁止随手写数
圆角 一律 10px（头像例外，用圆形）
控件高度 一律 36px
间距 只允许 8 / 16 / 24 / 40 四档
字号 只允许 13 / 15 / 18 / 24 四档，字重只用 400 和 700
// 验收：交付前自查
按钮、圆角、蓝色、图标风格、行距五项逐屏核对，
出现表外取值视为未完成。
这张表管的是「从今天起新写的界面」。要是项目已经跑了一阵、样式早就各写各的，光给变量表不够，得先把散落的实现收回来——那是另一台手术（Vibe Coding · 样式收敛专题）。
本节要点
- 系统感来自共同变量： 先定 token（主色、圆角、控件高度），样式从 token 取值，散装感自然消失。
- 检查一致性最快的办法： 把两屏截图并排放，盯着按钮、圆角、主色深浅，看有没有各自漂移。
- 让 AI 做界面时，先交变量表： 把主色、圆角、控件高度写进 Prompt，再让它动手，产出的一致性立刻不同。
- 裁判标准两句话： 任何元素的存在要有理由，任何差异的存在也要有理由。删除按钮的红留下，说不出理由的圆角收编。