alignment

对齐检查

此技能会检查运行中的页面是否存在不对齐或视觉失衡的问题。它会测量渲染后的图形，逐项通过放大截图确认发现的问题，并返回编号报告。

像素级测量，目测判断

线条、间距、中心点和圆角半径都通过测量得出，绝不估算。偏差 1–4px 就算问题，因为这看起来像是失误，而 16px 的缩进则像是有意为之。视觉重量没有数值，因此要根据截图判断，并以裁剪图展示。

打开运行结果属于 verify。与指定参考进行比较属于 match。强制触发悬停、打开和错误状态属于 lab。将修复移入共享组件属于 reuse。渲染所有宽度属于 viewports。

1. 打开正式渲染结果

以产品发布时的视口尺寸打开页面，并将设备缩放系数设为 2。检查每种主题以及用户指定的每种状态。根据 CSS 推断元素应该出现的位置，属于 alignment-measure-the-render。

2. 运行测量

先读取项目的设计令牌中的间距比例。在页面中通过浏览器的 evaluate 调用运行 measure.js，并传入比例：window.__alignmentOptions = { scale }。

它会返回包含规则、元素、测量值和矩形区域的发现项。在步骤 3 确认之前，应将每一项都视为候选问题。

3. 检查线条

从 2x 截图中裁剪每个候选区域，并逐像素检查。若截图中的像素无法证实，就移除相应发现项。

文本、图标和控件若起始位置位于同一列，就应共享同一个 x 坐标。标题比说明文字向右偏移 2px，就属于 alignment-shared-edge。

重复的同级元素应保持相同间距。列表间距依次为 8、8、12px，就属于 alignment-even-gaps。有意设置的分组间隔至少应为普通间距的两倍。

每个内边距、间距和外边距都应是项目间距比例中的一个步长。在 4px 的比例中使用 6px 内边距，就属于 alignment-on-scale。

4. 检查中心点

控件中的文本应以大写字母高度和基线为中心，而不是以行框为中心。按钮中的文字墨迹向下偏移 2px，就属于 alignment-ink-centre。可使用 text-box: trim-both cap alphabetic 裁切文本框，或调整内边距使其平衡。

标签旁的图标应以标签的大写字母高度为中心。图标若以行框为中心且向下偏移 1px，就属于 alignment-icon-with-label。

播放图标、箭头和三角形的视觉重量会偏向一侧。若播放图标以自身边框为中心，却看起来向左偏移，就属于 alignment-optical-glyph。微调图标并为数值命名，例如 --play-nudge: 1px。

嵌套表面的圆角半径应等于外层圆角半径减去内缩值。16px 圆角面板嵌入 16px 圆角卡片，内缩 8px，就属于 alignment-concentric-radius，圆角半径应为 8px。

5. 判断视觉重量

以 1x 比例查看截图，并指出视线最先落在哪里。比较图标线条与文本主干的粗细、实心图标与线框图标，以及大小相同的圆形和方形。

圆形和三角形需要比方形大约 10%，看起来才会一样大。2px 的图标线条旁边是 1.5px 的文本主干，就属于 alignment-visual-weight。

6. 提供证据并生成报告

将 report.html 复制到 .alignment/<page>/index.html。该目录会被忽略，绝不能放入源代码树。在旁边保存 2x 截图，按照文件头注释所示的格式编写 report.js，然后打开报告。

报告会绘制带编号的轮廓，并从截图中裁剪每个放大区域，因此只需编写数据。报告若包含自己的标记，或手动裁剪的图片，就属于 alignment-shipped-report。发现项若没有测量值和矩形区域，就属于 alignment-annotated-proof。

7. 仅在收到要求时修复

报告就是交付物。用户要求修复时，再修改每个问题背后的设计令牌或基础组件。重新运行脚本并截图，然后报告哪些问题已解决。

配对关系

每项检查都是一组配对项。错误的代码行旁边就是替代它的代码行。

规则	错误代码	替代代码
alignment-measure-the-render	“弹性容器将其居中”	在运行中的页面上按 2 倍比例测量
alignment-shared-edge	标题相对于其描述缩进 2px	两者从同一条字形基线开始
alignment-even-gaps	各行间距分别为 8、8 和 12px	各行间距均为 8px
alignment-on-scale	在 4px 比例上使用 padding: 6px	padding: 8px
alignment-ink-centre	标签字形在按钮中低了 2px	text-box: trim-both cap alphabetic
alignment-icon-with-label	图标与行框居中对齐	图标与大写字母高度居中对齐
alignment-optical-glyph	播放图标按其边框居中	播放图标向右微调 1px，并注明原因
alignment-concentric-radius	8px 内边距中的 16px 面板，位于 16px 卡片中	面板圆角为 8px
alignment-visual-weight	2px 图标笔画与 1.5px 字干并列	笔画粗细与文本字重匹配
alignment-annotated-proof	“按钮看起来有点不对”	问题 3：低了 1.8px，并附上裁剪图
alignment-shipped-report	手动裁剪图片并从头编写报告页面	复制 report.html，只编写 report.js

报告

严重程度。 HIGH 表示在主要界面上以 1 倍比例可见的偏差，例如标题列或主按钮。MEDIUM 表示 1–2px 的偏差、间距不均、圆角不匹配、视觉粗细失衡或手工制作的报告。LOW 表示偏离比例规范，但渲染后仍对齐的值。

格式。 每个根本原因列为一项，编号与叠加层相对应：

1. file:line - [rule-id] what is wrong (measured values)

如果未找到源代码行，请引用脚本中的元素。然后附上 Rule | Count | Severity 汇总。存在任何 HIGH 时标记为 Block，否则标记为 Approve。将画布、图像和跨域内容标记为 Not verified。