Démo

Refaire une card avec Impeccable et Playwright : démo

Exemple Claude Code design : on reprend une vraie card du Codex et on la refait avec Impeccable et Playwright MCP, captures avant/après à l'appui.

  • Cas d'usage
  • Outils
Publié le

Le point de départ

Le site The Claude Codex affiche des cards d'articles dans plusieurs listings. Une de ces cards faisait le job sans plus : un titre, une description, une date, un fond neutre. Fonctionnelle, accessible, mais sans relief. Le genre de composant qu'on garde par défaut faute de temps pour le soigner.

C'est le candidat idéal pour la démo : un composant réel, déjà en production, qu'on veut faire passer de "correct" à "soigné" sans casser son comportement ni son accessibilité.

Avant

Voici l'état initial de la card, capturé avant toute modification.

La critique, telle que Claude l'a formulée après lecture des deux screenshots :

  • titre et description trop proches en taille, peu de hiérarchie
  • date noyée, sans traitement visuel
  • pas de retour au survol, la card ne signale pas qu'elle est cliquable
  • sur mobile, le padding interne se réduit et l'ensemble se tasse

Pendant

Le brief envoyé à Claude, avec Impeccable installé :

Refais cette card de listing d'article. Garde la structure (titre, description, date, lien)
et l'accessibilité. Objectif : hiérarchie typo nette, un état de survol qui signale
le clic, un traitement de la date plus discret mais lisible. Style sobre, cohérent
avec une doc technique. Ne change pas les props du composant.

Première étape, cadrer avant de coder :

/impeccable shape "card de listing d'article, doc technique, hover marqué"

Une fois le shape validé, la génération :

/impeccable craft

Puis la boucle de validation avec Playwright MCP : browser_navigate sur la preview, browser_resize en mobile puis desktop, browser_take_screenshot à chaque fois. Claude lit, critique, et on relance /polish sur les points faibles. Trois itérations au total pour caler le survol et l'espacement mobile.

Après

État final de la card, après les itérations.

Ce qui a changé, concrètement :

  • hiérarchie typo sur trois niveaux entre titre, description et date
  • état de survol avec une élévation légère et un décalage subtil, qui signale le clic
  • date passée en petit corps, couleur secondaire, alignée à droite
  • padding revu pour respirer en mobile comme en desktop
  • contraste vérifié, zéro violation axe-core sur le composant

Le diff de code

L'extrait ci-dessous illustre le type de changement (avant / après). Le diff réel du composant est plus large, mais l'esprit est là.

// Avant
<article className="rounded-lg border p-4">
  <h3 className="text-lg font-medium">{title}</h3>
  <p className="text-sm text-gray-600">{description}</p>
  <span className="text-sm text-gray-600">{date}</span>
</article>


// Après
<article className="group rounded-xl border border-[color:var(--border-subtle)] p-6 transition-all hover:-translate-y-0.5 hover:shadow-md">
  <h3 className="text-xl font-semibold tracking-tight">{title}</h3>
  <p className="mt-2 text-sm leading-relaxed text-[color:var(--fg-secondary)]">{description}</p>
  <time className="mt-4 block text-xs font-medium text-[color:var(--fg-muted)]">{date}</time>
</article>

Verdict

Ordre de grandeur vécu, pas un benchmark : trois itérations, à peu près 25 minutes en comptant la rédaction du brief et les allers-retours Playwright. La card finale n'est pas un chef-d'œuvre, mais elle est nettement plus soignée que l'originale, et son comportement n'a pas bougé.

Ce que la démo montre surtout : la valeur ne vient pas du skill seul, ni de Playwright seul. Elle vient de la boucle. Impeccable propose une direction, Playwright montre le rendu réel, Claude corrige, on recommence. Sans le miroir Playwright, Claude aurait livré une première version et se serait arrêté là, sans voir le tassement mobile.

Prochaines étapes