Block visual drift before prod (CI + AI)
You want zero component drift between PRs. Storybook MCP gives agents context, Chromatic AI compares pixel-perfect with TurboSnap (skips non-visual changes), Applitools Eyes audits HTML/ARIA structure via Visual AI, Percy captures DOM snapshots with NL Visual Review Agent, Playwright Test Agents covers e2e. If anything drifts, the PR doesn't merge.
Why
Visual drift doesn't show up in code review. It shows up in prod, on your users. Thursday, a dev changes a padding "to fix a bug". 3-line diff, reviewer approves. Friday in prod: 12 cards across the app have broken shadows, the primary button lost 4px height on Safari, and the onboarding modal overlaps the header on mobile. Nobody saw it: because nobody reads pixel by pixel. This kit installs an automatic safety net: on every PR, an agent compares your rendered UI with the baseline. Visual diff detected → PR blocked → human screenshot review. You move from "hope nobody breaks anything" to…
When
Phase: team with installed design system, Storybook or public pages, existing E2E suite. Audience: DS manager, frontend tech lead, designer in governance. ✅ You know it's your kit when Storybook or public pages in prod: your UI is stable enough that an unintended change is a bug Regular visual bugs in prod: a dev changes a CSS variable, 8 components break elsewhere unseen Multiple releases per…
Tools included
- Storybook Mcp
- Chromatic Ai
- Applitools Eyes
- Percy Visual Review Agent
- Playwright Test Agents