Donner des yeux à l'IA

Le problème : l'IA code à l'aveugle

Vous demandez à l'IA d'aligner trois cartes côte à côte. Elle écrit du CSS impeccable sur le papier : display:flex, gap:16px, tout est là. Vous rechargez la page... et la troisième carte déborde sur la droite, le texte chevauche l'image, et sur mobile tout est empilé n'importe comment.

Le problème n'est pas que l'IA est mauvaise en CSS. Le problème est qu'elle ne voit rien. Elle écrit du code d'interface comme un peintre les yeux bandés : elle connaît la théorie des couleurs, mais elle ne voit jamais la toile. Alors elle devine.

Un développeur humain, lui, regarde le résultat dans le navigateur. Il voit le débordement, il voit le désalignement, il corrige. C'est cette boucle de feedback visuel qui manque à l'IA par défaut. Et c'est exactement ce qu'on va lui rendre.

Fermer la boucle de feedback visuel

La solution tient en une idée simple : donner une capture d'écran à l'IA. Les modèles modernes sont multimodaux : ils lisent les images aussi bien que le texte. Dès qu'ils voient le rendu réel, ils repèrent ce qui cloche.

Le workflow gagnant boucle sur lui-même :

1. Code : l'IA écrit le HTML/CSS de votre composant
2. Capture : on prend une capture d'écran de la page rendue
3. Montrer : on colle l'image dans la conversation
4. Diagnostic : l'IA voit le débordement, le désalignement, la couleur ratée
5. Correction : elle corrige le code en sachant ce qui n'allait pas
6. Re-capture : on reboucle jusqu'à ce que le rendu soit propre

C'est la même boucle que pour un humain, sauf qu'on la rend explicite. L'IA passe de « j'écris du code et j'espère » à « je vois mon résultat et je le corrige ».

Automatiser les captures avec Playwright

Coller des captures à la main devient vite pénible. L'astuce des agents de code modernes : leur donner un outil pour prendre les captures eux-mêmes. Playwright pilote un vrai navigateur et capture une page en quelques lignes : y compris à plusieurs largeurs d'écran.

Capturer aux trois points de rupture classiques (mobile, tablette, desktop) révèle d'un coup tous les problèmes responsive :

const { chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();

    // Les trois points de rupture à vérifier
    const viewports = [
        { name: 'mobile',  width: 375,  height: 812 },
        { name: 'tablette', width: 768,  height: 1024 },
        { name: 'desktop', width: 1440, height: 900 },
    ];

    for (const vp of viewports) {
        await page.setViewportSize({ width: vp.width, height: vp.height });
        await page.goto('http://localhost:8000');
        await page.screenshot({
            path: `capture-${vp.name}.png`,
            fullPage: true,
        });
        console.log(`Capture ${vp.name} (${vp.width}px) enregistrée`);
    }

    await browser.close();
})();

L'agent lance ce script, récupère les trois images, et les regarde. Si la grille casse à 768px, il le voit. Si un bouton déborde sur mobile, il le voit. Il corrige, relance le script, revérifie : sans intervention de votre part.

Coller un bug visuel à l'IA

La technique marche aussi à l'envers. Vous tombez sur un affichage cassé que vous n'arrivez pas à décrire avec des mots ? Prenez une capture et collez-la directement dans une IA multimodale avec la question : « Qu'est-ce qui ne va pas dans ce rendu ? »

L'IA voit que le menu déborde, que deux blocs se chevauchent, qu'un contraste est illisible. Elle pointe le coupable probable dans le CSS bien plus vite que vous ne l'auriez décrit. Une image vaut mille tickets de bug.