Visual regressions are insidious because they're invisible to automated tests. Your CI pipeline goes green. Your lighthouse score stays flat. Your uptime check passes. But somewhere between staging and production, a CSS change shifted the hero section, a font failed to load, or a CTA button disappeared behind a z-index war — and nobody noticed until a client called.
Today we're shipping Visual AI Diff: SiteBrief now takes a screenshot of your site immediately before and after every deploy, then runs the pair through Claude Vision to produce a plain-English description of exactly what changed. No pixel-diff noise. No false positives on animations. Just a clear summary of what a human looking at the page would notice.
Why screenshot diffing usually fails in practice
Traditional pixel-diff tools flag every single pixel that changed. A cookie banner appearing, a subtle animation frame difference, an A/B test variant — all of these generate noise that drowns out the signal. After a few days of false positives, developers start ignoring the diffs entirely. The tool becomes useless.
Claude Vision takes a different approach. Instead of comparing pixels, it describes what changed semantically — the way a QA engineer would describe it. "The main navigation appears to have collapsed on this viewport" is useful. "47,312 pixels changed in the header region" is not.
The before/after slider
When you open a deploy in the Visual Diff tab, you see two full-page screenshots side by side — the one taken 2 minutes before the deploy and the one taken 2 minutes after. A slider lets you drag between them to compare any section of the page at any zoom level.
Both desktop (1440px) and mobile (390px) screenshots are captured on every deploy. You can toggle between them at the top of the panel. This matters because many layout regressions only appear at mobile widths — a flex container that wraps incorrectly, a sticky header that overlaps content, a button that falls outside the viewport.
What Claude Vision looks for
After comparing the before/after pair, Claude Vision generates a structured analysis. Here's an example of what it produces for a real deploy that introduced a layout regression:
High-severity findings trigger a Slack notification to your team immediately after the deploy scan completes — you don't need to manually open the diff to know something went wrong.
Mobile risk detection
Mobile issues get special treatment because they're the ones most likely to be missed. Every deploy diff includes a dedicated Mobile Risk section that specifically highlights changes detected on the 390px screenshot that weren't present on desktop. Common findings include:
- CTA buttons pushed below the fold on small viewports
- Text overflow causing horizontal scroll
- Images not scaling correctly within their containers
- Sticky elements overlapping content in the main body
- Form inputs that are too small to tap comfortably
If Claude Vision detects a mobile risk, it adds a Mobile Risk badge to the deploy event in the AI Incident Timeline — so it's visible even if you're not actively looking at diffs.
How it triggers automatically
Visual AI Diff is fully automatic once your repo is connected. Here's the sequence on every deploy:
- GitHub/GitLab webhook fires when a push lands on your monitored branch
- SiteBrief takes a "before" screenshot of the live URL immediately
- SiteBrief waits for the deploy to propagate (configurable delay, default 90 seconds)
- SiteBrief takes the "after" screenshot and runs both through Claude Vision
- Analysis appears in the Visual Diff tab within 2–3 minutes of the push
Can I run it manually?
Yes. There's a Run Visual Diff button on any site's Visual Diff tab that captures a new screenshot right now and compares it to the last stored baseline. Useful for checking a hotfix, verifying a content change, or setting a fresh baseline after a major redesign.
What gets stored
SiteBrief stores the last 90 days of screenshots per site, at both desktop and mobile viewports. Every screenshot is associated with a deploy event (commit SHA, branch, author) so you can go back to any point in time and see exactly what the site looked like. On Pro plans, storage is included at no extra cost.