两块屏幕乍看一模一样，但在所有关键指标上可能相差 20%。字号、行高、间距节奏、对比度……肉眼扫一眼，恰恰是办公室里最不可靠的测量工具。可过去几个月，我们偏偏只靠这一眼。

当需求是“做得像这个参考站点”时，第一步不应该是拼情绪板，而是在两个页面里同时跑一段探针代码：

const probe = (sel) => {const cs = getComputedStyle(document.querySelector(sel));return [sel, cs.fontSize, cs.lineHeight, cs.letterSpacing,cs.fontWeight, cs.color].join(' ');['h1', 'h2', 'p', 'nav a', 'button'].map(probe).join('\n');

用 getComputedStyle 分别读取这些元素的字号、行高、字距、字重和颜色，得到两组表格，再逐行 diff。对照参考页面和我们的页面各跑一次，设计讨论会立刻变样。“感觉更轻”会变成“他们的 h1 是 88/0.94，字重 900；我们的是 72/1.1，字重 800”。这是可以开票的缺陷，而不是各执一词的审美辩论。

除了测量数值，还要对比裁切图，而不是对比印象。把两个页面同一区域裁出来，以 1:1 叠在一起看。那些在并排缩略图里看不见的差异，会变得一目了然。而且要先做移动端：桌面端会掩盖问题，390 像素宽的视口却能立刻坦白一切。

机械化的检查应该交给脚本：自动遍历页面，标记文本溢出、意外横向滚动、元素高度超出容器等问题。等脚本把这些做完，人再把审美判断投入到真正需要品味的环节。

滚动行为也要记录。缓动曲线、吸顶时长都是设计决策，它们可以在性能时间线里被测量，而不只是凭手感去感受。

这一切并不代替审美判断，而是用事实喂养判断。测量告诉我们与参考的偏差在哪里；这个偏差是 bug 还是有意选择，仍然需要人来决定。能有意识地做出这个决定，正是“几乎正确”和“正确”之间的全部区别。

本文原载于 INTFRAME 工程博客，配套代码见 github.com/intfram。