TL;DR actionnable

Le pivot : aucun skill design ne livre du visuel correct à 100 %. Playwright MCP ferme la boucle en montrant le rendu réel à Claude.
Le minimum : browser_navigate sur ta preview locale, puis browser_take_screenshot. Claude critique, tu itères.
Le complet : ajoute le multi-viewport (browser_resize), un contrôle a11y via browser_evaluate, et un screenshot avant/après pour la PR.
Setup : Playwright MCP est dans le profil "dev" standard. Vérifie avec /mcp dans Claude Code.
À combiner avec : Impeccable, Taste Skill ou UI UX Pro Max pour la génération.

Pourquoi Playwright dans la boucle design

Un skill design habille un composant, mais il travaille à l'aveugle : il ne voit jamais ce que le navigateur rend vraiment. Playwright MCP, c'est le miroir que tu tends à Claude après qu'il a habillé un composant. Sans miroir, Claude devine. Avec, il voit exactement ce que le navigateur affiche sur mobile et sur desktop, et corrige avant que tu ouvres la page toi-même.

Le pipeline tient en quelques étapes répétées en boucle :

Brief

Décrire le composant voulu

Génération

Le skill design produit le code

Capture

Playwright screenshot multi-viewport

Critique

Claude lit le rendu et repère les défauts

Itération

Re-génération ciblée

Validé

Prêt pour la PR

Setup

Playwright MCP est livré dans le profil "dev" standard de Claude Code. Pour vérifier qu'il répond, tape /mcp dans Claude Code : tu dois voir playwright dans la liste des serveurs actifs.

Si tu pars d'un poste vierge, la voie ad hoc :

npx @playwright/mcp@latest

Côté skill design, installe celui qui correspond à ton besoin avant de commencer :

npx skills add pbakaus/impeccable

Le workflow, deux niveaux

Le workflow complet fait neuf étapes, mais tu n'en as pas toujours besoin. La version rapide suffit pour un contrôle visuel en 10 minutes. La version complète ajoute le multi-viewport, l'a11y et le commit, pour un composant destiné à la production.

Version rapide (10 min)

Générer le composant

Brief design court, puis génération via ton skill : /impeccable craft "carte produit minimaliste avec hover". Claude écrit le composant dans ton projet.

Lancer la preview et naviguer

Démarre le serveur (npm run dev), puis demande à Claude d'ouvrir la page avec l'outil browser_navigate sur l'URL locale (par exemple http://localhost:3000/preview).

Capturer et critiquer

Claude prend un screenshot avec browser_take_screenshot, le lit, et liste les défauts visibles (contraste, alignement, hiérarchie). Tu itères en relançant une commande du skill (/polish par exemple). Deux passes suffisent souvent.

Version complète (9 étapes)

Vérifier le MCP

/mcp dans Claude Code : confirme que playwright est actif. Installe le skill design choisi si ce n'est pas déjà fait.

Écrire le brief

Décris le composant, ses contraintes, et une référence visuelle si tu en as une (image locale lue via l'outil filesystem du MCP).

Générer

Invoque le skill : /impeccable craft "..." ou l'équivalent Taste / UI UX Pro Max. Claude produit le composant.

Capturer en multi-viewport

Serveur lancé, Claude utilise browser_navigate sur la route, puis browser_resize en 375x800 (mobile) et browser_take_screenshot, puis browser_resize en 1440x900 (desktop) et un second screenshot.

Critique visuelle

Claude lit les deux captures et identifie les défauts : contraste insuffisant, alignement cassé sur mobile, hiérarchie typo faible, espacement irrégulier.

Itérer

/impeccable polish ou /taste critique avec le diff identifié. Claude régénère le composant. Reviens à l'étape 4. Deux à quatre boucles sont typiques.

Contrôle d'accessibilité

Claude exécute axe-core dans la page via browser_evaluate (injection puis axe.run()), et vérifie zéro violation WCAG 2.1 AA sur le composant.

Capture avant/après

Garde le premier screenshot et le dernier. Le diff visuel sert de preuve dans la PR.

Commit

Composant prêt pour PR, avec les captures avant/après en commentaire.

Les outils MCP utilisés

Tous ces outils viennent du serveur @playwright/mcp. Claude les appelle pour toi ; tu décris l'intention, lui exécute.

Outil	Rôle dans la boucle
`browser_navigate`	Ouvrir la route de preview locale
`browser_resize`	Régler le viewport (mobile, tablette, desktop)
`browser_take_screenshot`	Capturer le rendu pour critique
`browser_snapshot`	Récupérer l'arbre d'accessibilité (alternative texte au screenshot)
`browser_evaluate`	Exécuter du JS dans la page, dont axe-core pour l'a11y
`browser_console_messages`	Lire les erreurs console qui faussent le rendu

Pour le détail de chaque MCP et leur configuration, voir la section MCP et créer son premier workflow MCP.

Cas d'usage avancés

Multi-viewport systématique. Une carte qui passe bien en desktop déborde souvent en 375px. Capture toujours les deux. Le mobile révèle les hiérarchies typographiques trop serrées et les paddings qui ne respirent plus.

Contrôle a11y au runtime. Le screenshot ne dit pas tout : un contraste limite passe à l'œil mais échoue à axe-core. Lancer axe.run() via browser_evaluate attrape ces violations avant la PR. C'est un complément, pas un remplacement de la critique visuelle.

Captures de régression. Sur le projet The Claude Codex, les captures Playwright alimentent aussi la régression visuelle (seuil de tolérance bas). Le même outil sert donc à designer et à verrouiller le rendu dans le temps.

Limitations

Le screenshot n'est pas le navigateur de l'utilisateur. Polices système, échelle d'affichage, extensions : Playwright capture un environnement contrôlé, pas le poste réel d'un visiteur.
L'a11y automatique attrape une partie des problèmes seulement. axe-core ne juge ni la pertinence d'un texte alternatif, ni la logique de navigation au clavier. La critique humaine reste nécessaire.
Surface d'attaque MCP. Donner à un agent un navigateur pilotable a des implications de sécurité. Avant de l'utiliser sur des pages sensibles ou authentifiées, lis la sécurité des MCP.
Versions qui bougent. L'API du MCP évolue vite (v0.0.75 au 2026-06-03). Un nom d'outil peut changer entre deux versions ; vérifie la liste à jour sur le repo officiel.

Prochaines étapes

Choisir le skill de génération : Impeccable pour le vocabulaire design, UI UX Pro Max pour un catalogue de styles, Taste Skill pour piloter un registre visuel, ou Huashu Design pour un prototype présentable. Vue d'ensemble dans les meilleurs skills.
Voir le workflow en action : l'article refaire une card avec Impeccable et Playwright déroule la boucle sur un vrai composant du site.
Comprendre la stack complète : stack design Claude Code, retour après 1 mois.
Générer les visuels, pas seulement les valider : Claude Code + IA générative compare les façons de produire des images depuis Claude Code, du MCP ComfyUI local à l'agent.