Bloquer un drift visuel avant la prod (CI + IA)
Tu veux qu'aucun composant ne dérive entre deux PRs. Storybook MCP donne le contexte aux agents, Chromatic AI compare pixel-perfect avec TurboSnap (skip les changements non-visuels), Applitools Eyes audite la structure HTML/ARIA via Visual AI, Percy capture les DOM snapshots avec Visual Review Agent en NL, Playwright Test Agents couvre le e2e. Si quelque chose dérive, le PR ne merge pas.
Pourquoi
Le drift visuel ne se voit pas en revue de code. Il se voit en prod, par tes utilisateurs. Jeudi, un dev change un padding « pour fixer un bug ». Le diff fait 3 lignes, le reviewer approuve. Vendredi en prod : 12 cards alignées partout dans l'app ont leur ombre cassée, le bouton primary a perdu 4px de hauteur sur Safari, et la modal d'onboarding chevauche le header sur mobile. Personne n'a vu : parce que personne ne lit pixel par pixel. Ce kit installe un filet automatique : à chaque PR, un agent compare ton UI rendue avec la baseline. Diff visuel détecté → PR bloquée → human review du…
Quand
Phase : équipe avec design system installé, Storybook ou pages publiques visibles, suite E2E existante. Audience : DS manager, tech lead frontend, designer en gouvernance. ✅ Tu sais que c'est ton kit quand Storybook ou pages publiques en prod : tu as une UI suffisamment stable pour qu'un changement involontaire soit un bug Bugs visuels en prod réguliers : un dev change une variable CSS, 8…
Outils inclus
- Storybook Mcp
- Chromatic Ai
- Applitools Eyes
- Percy Visual Review Agent
- Playwright Test Agents