design-system-compliance

渲染后的 UI 是否真的使用了设计系统？

阅读源代码只能告诉你组件_要求_了什么，无法告诉你浏览器最终解析出了什么：可能是向上追溯三层后被覆盖的令牌，可能是碰巧看起来很接近的硬编码 #3b82f6，也可能是根本没有生效的深色主题作用域。只有在运行中的页面里才能找到答案。

Reticle 会读取实时应用中的计算样式，并将其与项目的令牌进行比较。还没设置？请按照 reticle 技能操作：它会安装 Reticle，在 init 修改应用文件前询问用户，并验证一个工作流。

检查

reticle_look({ action: "page", sessionId, mode: "interactive" })
reticle_look({ action: "element", sessionId, ref })

inspect 会为每个元素返回一份 theme 报告：

字段	含义
offTheme	**最重要的字段。**当一个已设置的不透明颜色与调色板中的任何令牌都不匹配时为 True：这是值得修复的违规项
colorTokens / backgroundTokens	解析后的值与此颜色相同的所有令牌。为空表示颜色不在调色板中
colorToken / backgroundToken	唯一明确匹配的令牌；如果多个令牌共用此颜色，则为 null。此处的 null 表示无法确定，而非违规：请查看复数形式的字段
tokenCount	当前主题下解析出的令牌数量。0 表示应用未声明调色板，此时不会断言 offTheme：应报告这一点，而非给出一切正常的结论
themeScope	捕获时生效的主题（例如 .dark），这样相隔几分钟执行的两次检查也可以进行比较

先查看 tokenCount。令牌数为零，意味着没有任何需要遵循的内容，下面所有的“通过”都毫无意义。

不止于颜色：控件真的可用吗？

同一次调用还能回答截图无法回答的问题：

• occluded：被覆盖层遮挡。控件虽已渲染，但用户无法点击。
• box：0×0 表示元素存在但不可见，这是最常见的“它就在那儿，我能在 DOM 里看到它”问题。
• styles.opacity / styles.cursor：看起来像禁用与实际禁用之间的区别。
• source: { file, line }：该去哪里修复。

只比较颜色的设计评审，可能会让一个无人能按的按钮通过。

动画

reticle_run({ tool: "reticle_animations", args: { sessionId } })

返回正在运行和近期已完成的动画，以及它们的目标和时间信息。完成任何动效工作后，有两点值得检查：你添加的动画没有出现在这里，说明它没有运行；动画时长与令牌不匹配，则说明它不符合规范。两种情况在截图中看起来都一样。

将违规项报告为具体位置，而非主观意见

对于每个未通过检查的元素，都应提供 inspect 返回的 file:line 和具体事实：“背景色 #3b82f6 与任何令牌都不匹配；调色板中的 --color-primary 值为 #2563eb。”没有具体位置的设计评审评论，只会让其他人不得不重新完成这项工作。

这不是什么

此检查用于核对是否遵循项目声明的令牌。它不评价设计好不好，也不是无障碍审计。对比度、焦点顺序和屏幕阅读器语义属于另一项工作；在这里声称检查了这些内容，只会给出一种虚假的“全部正常”结论，而这正是此仓库要避免的。

---

其他内容，请逐页查看：curl https://docs.reticle.sh/llms.txt。设计令牌检查还缺少你需要的内容？请使用 reticle_session { action: "feedback" }，并设置 kind: "gap"。