用途:检查浏览器实际渲染出的 UI 是否使用项目声明的设计令牌。源码只能看出组件想要什么,无法得知浏览器最终解析出的值,例如被上层覆盖的令牌、看起来相近的硬编码色值、未生效的暗色主题作用域。
主要能力:通过 reticle_look 的 page 和 element 动作返回逐元素主题报告。offTheme 表示某不透明颜色不匹配调色板任何令牌;colorTokens/backgroundTokens 列出解析值等于该颜色的全部令牌,为空即脱离调色板;colorToken/backgroundToken 是唯一匹配,多个令牌同色时为 null,属弃权而非违规;tokenCount 是当前主题下解析出的令牌数,为 0 说明应用未声明调色板,此时不应判定通过;themeScope 记录捕获时生效的主题。同一调用还可查出 occluded(被覆盖无法点击)、box(0×0 不可见)、opacity/cursor(禁用外观与真正禁用之别)以及 source 的 file 和 line。另有 reticle_run 调用 reticle_animations,返回运行中和刚结束的动画及目标与时长,可用于确认新增动画是否真的运行、时长是否符合令牌。
使用方式:未安装时执行 RETICLE_INSTALL_SOURCE=npx_skill npx @reticlehq/server@latest init,再运行安装与验证技能。随后调用 reticle_look({ action: "page", sessionId, mode: "interactive" }) 与 reticle_look({ action: "element", sessionId, ref })。报告违规时给出 file:line 和具体事实,例如背景色不匹配任何令牌而调色板中有对应令牌。
适用场景:设计评审、设计系统落地核查、动效改动验证。
限制:只检查项目自身声明的令牌合规性,不评价设计好坏,也不做无障碍审计;对比度、焦点顺序、读屏语义属另一类工作。先读 tokenCount,为 0 时后续通过结论没有意义。更多内容见 https://docs.reticle.sh/llms.txt。