AI 视觉回归评审：截图对比之外还要读懂界面意图

AI 视觉回归评审：截图对比之外还要读懂界面意图

一、像素差异不能解释所有 UI 变化

传统视觉回归主要比较截图差异，能发现颜色、位置、尺寸和布局变化。但它不知道变化是否合理。例如按钮文案换行可能是 bug，也可能是国际化后的正常结果；卡片高度增加可能是内容变多，也可能是间距失控。AI 视觉评审可以补充语义理解，把截图差异解释成更接近人类评审的问题。

不过 AI 不能替代像素对比。最稳妥的方式是先用自动截图找出差异区域，再让 AI 根据设计规范和页面目标生成问题摘要。像素工具负责精确，AI 负责解释。两者结合，才能减少无效 diff，也能提高问题定位效率。

二、评审链路：差异检测和语义解释分层

flowchart TD A[基线截图] --> C[像素差异检测] B[当前截图] --> C C --> D[差异区域裁剪] D --> E[AI 语义评审] E --> F[问题分类] F --> G[人工确认]

差异检测应先过滤稳定噪声，例如时间、随机头像、动态图和广告位。否则 AI 会被大量无意义变化干扰。对于数据驱动页面，可以准备固定 mock 数据，让截图更稳定。视觉回归的第一原则是可重复。

AI 输入中应包含页面名称、组件类型、设计规范和差异截图。只给两张截图，模型可能看不出业务意图。比如表格页强调扫描效率，落地页强调品牌冲击，评审标准不同。语境越清晰，AI 输出越准确。

三、配置示例：明确哪些差异需要忽略

下面是一份简化的视觉回归配置，可以和截图工具结合使用。

visual_review: viewport: ["375x812", "1440x900"] ignore_regions: - selector: "[data-dynamic='time']" - selector: ".avatar-random" thresholds: pixel_diff_ratio: 0.003 layout_shift_px: 4 ai_review: focus: ["text overflow", "button alignment", "contrast", "spacing consistency"]

阈值需要根据页面类型调整。图表和图片多的页面，像素差异天然更高；表单和后台页面则应更严格。不要用一组阈值覆盖所有页面。组件级截图可以设置更低阈值，整页截图可以稍微放宽。

AI 评审输出最好结构化，例如问题类型、影响组件、严重程度、证据描述和建议修复。这样可以进入缺陷系统，而不是停留在一段主观评论。对于低置信判断，可以只生成摘要，不直接创建缺陷。

四、落地边界：AI 要帮忙筛选，不要制造噪声

AI 视觉评审的最大风险是评论过多。它可能把合理变化也描述成问题，或者给出过于泛泛的建议。建议先在非阻塞模式运行，只生成报告，由人工标记哪些有价值。积累样本后，再把高置信问题接入 CI 阻塞。

移动端尤其需要关注文字溢出、按钮高度、触控区域和遮挡。桌面端则更关注对齐、表格密度、信息层级和空态。AI 评审 Prompt 可以按 viewport 分别强调重点，避免使用同一套话术评价所有截图。

最后，视觉回归要和设计系统联动。组件库升级、Token 变更、字体替换和布局规则调整，都可能引发大规模截图变化。报告中应标注变化来源，帮助评审者区分预期变更和意外回归。

五、总结

AI 视觉回归评审适合解释截图差异、归纳问题和减少人工筛选成本，但它应建立在稳定截图、差异检测和设计语境之上。像素工具负责精确发现变化，AI 负责语义说明，人工负责最终判断。这样 UI 回归才不会变成截图噪声。