match

匹配

此技能会重建用户在另一个应用、网站或设计中指出的内容。它依据真实来源及测量值进行重建，而不是凭记忆还原外观。

一对一意味着精确取值

当用户说“一对一”“精确”或“像这个”时，每个值都必须来自参考对象。猜测的值就是一项发现。当用户说“受其启发”时，保留其概念，并使用项目自己的设计令牌。

只要消息中提到应用、URL、截图、设计文件或设计参考库，就使用此技能。使用项目已有部件构建属于 reuse。检查结果则在 verify 中进行。

1. 打开真实来源

打开参考对象本身：实时页面、已安装的应用、设计文件或截图。凭记忆重建属于 match-inspect-the-source。如果参考对象是原生应用或桌面应用，就查看该应用，而不是它的网站。根据桌面应用的营销页面来评判它属于 match-same-platform。

2. 读取数值

从来源中读取计算样式、设计令牌或测量值。记录尺寸、间距、圆角、颜色、字体、时长和缓动效果。凭目测选择圆角属于 match-read-computed-values。

3. 盘点状态

列出参考对象的所有状态：悬停、按下、聚焦、打开、空、加载中、错误、已选中和禁用。然后列出其状态转换。只重建静止状态属于 match-inventory-states。

4. 复制指定部分

只重建用户指定的部分，不要复制周围内容。用户要求侧边栏，却复制整个布局，属于 match-copy-the-named-part。保留设计理念，不要照搬品牌。除非用户明确要求，否则不保留对方的徽标、产品名称和颜色。这属于 match-concept-not-brand。

5. 并排比较

将参考对象和重建结果以相同尺寸和相同状态并排放置。逐一指出所有差异。“看起来很接近”但没有进行比较，属于 match-side-by-side。

以同一尺寸和同一设备缩放系数，捕获第 3 步中每种状态下的两者。将 compare.html 复制到 .match/<part>/index.html，这是一个被忽略的文件夹，绝不能放入源代码树。按照其头部注释所示的结构，在旁边编写 compare.js，将截图放在 img/ 中，然后打开该页面。

比较页面随技能一同提供，因此只需编写数据。自行编写标记或样式的页面属于 match-shipped-compare。将每个值标记为 Match、Differs 或 Not Verified。用户会通过 Copy Differences 将剩余差异发回。

两者配对

每项检查都是一对。错误行旁边就是替换它的行。

规则	错误做法	替代做法
match-inspect-the-source	凭记忆重建菜单	打开并检查实时菜单
match-same-platform	根据网站评判桌面应用	打开已安装的应用
match-read-computed-values	凭目测设置 border-radius: 8px	从计算样式中读取 6px
match-inventory-states	只重建静止状态	重建悬停、按下、打开、空和错误状态
match-copy-the-named-part	为“侧边栏”复制整个布局	只复制侧边栏
match-concept-not-brand	使用对方的徽标和强调色	使用项目设计令牌中的设计模式
match-side-by-side	“看起来很接近”	以同一尺寸对比两者并列出差异
match-shipped-compare	从头编写比较页面	复制 compare.html，只编写 compare.js

报告

严重程度。 HIGH 表示未打开来源就进行重建，或缺少用户指定的状态。MEDIUM 表示在“一对一”要求下使用猜测值、复制了超出要求的部分，或手动编写比较页面。LOW 表示已发现并指出的剩余差异。

格式。 每个根本原因对应一项发现：

file:line - [rule-id] what is wrong

然后提供 Rule | Count | Severity 汇总。只要仍有任何 HIGH，就标记为 Block；否则标记为 Approve。将所有无法从来源中读取的值标记为 Not verified。