Visual Verify 是一个用于验证渲染后 UI 是否与其设计参考一致的技能。其核心原则是：绝不能仅凭代码 diff 或通过的测试就报告视觉、布局或主题改动已完成，必须查看实际运行的界面。
用途 该技能用于在 UI 改动后，对照设计参考（Figma/设计稿）、应当匹配的同类界面或改动前状态，验证实际渲染结果是否一致。它适用于需要视觉保真度确认的场景，包括运动片段、节拍同步效果、密集 3D 标签、后处理预览、隔离的 Vue 组件预览以及已保存内容的组件集成。
主要能力
- 运行实际界面（开发服务器、应用、TUI/GUI、Storybook 等），但不启动用户已在运行的实例。
- 捕获界面外观（截图），或明确告知用户如何查看。
- 与参考对比，并列出具体检查项：颜色值、间距、边框、激活状态、对比度。
- 对 Figma/截图匹配，遵循截图叠加方式，使用捆绑工具或具有相同捕获契约的现有测试框架。
- 若不匹配，保留调试日志并迭代，只有视觉上匹配后才说“完成”。
- 分享干净的渲染与对比证据，包含视口/状态、测量差值、已批准的偏差和未验证状态，并将视觉一致性、功能 QA 与用户批准分开。
使用方式
- 运行实际界面（开发服务器、应用、TUI/GUI、Storybook 等），不要启动用户已运行的实例。
- 捕获外观：截图，或告知用户如何查看。
- 与参考对比：设计稿、同类界面或改动前状态，并列出具体检查项。
- 不匹配则保留调试日志并迭代，视觉匹配后才标记完成。
- 分享渲染与对比证据，包含视口/状态、测量差值、已批准偏差和未验证状态。
适用场景
- 运动片段：用固定电影时钟时间（读取场景的 data-film-time，而非墙钟时间）捕获 6–8 张静帧，并用 ffmpeg concat 显式列出文件进行拼接；避免使用 glob 导致排序错误。
- 节拍同步效果：将每个效果乘以命中包络（pow(1-phase, 4)），使节拍之间的帧干净；用强度曲线门控整个通过过程，开场和落地处为 0。
- 密集 3D 库存标签：在桌面和移动尺寸下，将投影标签矩形相互比较并与固定 UI 停靠区比较；基于投影单元格宽度而非仅视口宽度门控标签；在不重新加载已展开场景的情况下进行缩放；在打包变化时同时使相机适配和网格变换失效；独立于入场动画测量检查器布局边界；用计算后的 translate 和 transform 验证开关位置。
- 后处理预览：将 3D 后处理与 DOM 标签和控件分开；保留画布 alpha；在 HMR 期间按文件原子地应用依赖的场景/材质更改；提供效果旁路；验证有序抖动矩阵覆盖其预期阈值范围；在暗场景中将抖动强度从近黑背景中门控出去；用冻结时间线和相同画布像素验证电影式暂停；用定时帧缓冲读取和稳定的可见艺术品截图裁剪证明 WebGL 艺术品运动；当静态图像和纹理加载器共享 CDN URL 时，在全新浏览器上下文中重现先图像后获取；匹配静态图像的 crossOrigin 模式与纹理请求；验证正常和减少运动像素而不增加效果强度。
- 隔离的 Vue 组件预览：通过一个规范的 Vite 别名导入 Vue；验证实际 SVG 子元素、作用域属性、计算内边距和控制台警告；检查水平滚动器内绝对定位的屏幕阅读器文本；在固定的 Playwright 浏览器可执行文件缺失时使用已安装的 Chrome 通道；在共享包导出未构建 dist/ 的新工作区中，运行基于源码的开发预览；等待屏幕入场动画后再捕获；在用户未改变的滚动位置捕获异步表单结果；在将 feed 从本地资源切换到远程媒体时，验证文档的实际 CSP 并解码每张卡片的可见图像；用实际可见性和像素验证减少运动副本。
- 已保存内容的组件集成：当无法在调查预算内安全建立完整路由依赖时，挂载未更改的生产消费者子树，并在每次请求时重新读取真实的已保存本地记录；将响应数据与数据库比较，演练重新加载和变体/快照隔离，并披露组件集成而非完整路由/E2E；在截图手风琴之前，等待展开面板的测量高度和完成的过渡。
限制
- 不要因为令牌数学看起来正确就声称主题/颜色更改有效，必须验证渲染值。
- 视觉仍然错误时不要删除插桩。
- 不要信任单元测试作为 UI 正确渲染的证明。
- 不要用仅 DOM 输出替代渲染验证。
- 不要捏造响应；不支持的 API 应显式报错。
- 产品截图应标注来源。
- 关于收费、价格、平台等具体信息，资料中暂未提供。