Frontend avec l'IA : les captures d'écran comme retour

Un agent ne voit pas ton UI – jusqu'à ce que tu lui donnes une capture d'écran. Le retour visuel est la clé d'un bon travail frontend avec l'IA.

Le problème : l'IA ne voit pas ton UI

Un agent qui écrit du code ne « voit » pas automatiquement le résultat dans le navigateur. Il ne sait pas si un bouton est mal aligné ou si du texte déborde – à moins que tu ne le lui montres. C'est exactement la différence entre « rends le dashboard plus joli » (vague) et une capture d'écran plus une consigne concrète.

Les captures d'écran comme retour

Tu peux insérer des captures d'écran directement : par glisser-déposer, par copier-coller ou comme chemin de fichier. Donne à l'agent une image du design souhaité, puis fais-lui prendre une capture du résultat et comparer. Ça crée une boucle que l'agent peut fermer lui-même, au lieu que tu vérifies chaque étape intermédiaire manuellement.

Itération par composant

Travaille par petites étapes : construire un composant, prendre une capture, nommer les différences avec la cible, corriger. Ça fonctionne mieux que « construis toute la page » d'un coup, car les erreurs deviennent visibles tôt.

Utiliser les systèmes de design

Si ton projet a un système de design (couleurs fixes, espacements, composants), dis-le explicitement à l'agent ou montre-lui des composants existants comme modèle. Ça l'empêche d'inventer ses propres solutions incohérentes.

Vérifier visuellement

À la fin, ce qui compte n'est pas le code, mais le résultat visible. Demande toujours une capture d'écran du résultat réel, pas seulement une description de « c'est fait ».

EXEMPLE

Prompt avec une image : « [capture d'écran du design cible insérée] Implémente ce design pour l'en-tête du dashboard. Utilise nos composants existants de @src/components. Prends ensuite une capture d'écran du résultat, compare-la à l'original et liste les différences. »

🛠️ EXERCICE — À TOI DE JOUER

Prends un petit composant UI d'un projet d'exercice (ou crée un composant carte simple) et fais-le itérer par un agent face à une image de référence.

Cherche ou crée une image de référence (capture d'écran d'un site web, maquette de design) et joins-la à l'agent.
Prompt : « Implémente ce design comme composant. Prends ensuite une capture d'écran du résultat et compare-la à l'original. »
Laisse l'agent se corriger lui-même au moins une fois, sur la base de la comparaison, avant d'intervenir toi-même.

✅ AUTO-VÉRIFICATION

☐ L'agent a-t-il vraiment pris une capture d'écran et comparé, ou s'est-il contenté d'affirmer que ça avait l'air bien ?
☐ Quels écarts concrets la comparaison a-t-elle révélés ?
☐ Le résultat après l'auto-correction était-il plus proche de l'original que la première tentative ?

QUIZ RAPIDE

Pourquoi une capture d'écran du design cible est-elle plus efficace que le prompt « rends le dashboard plus joli » ?