Montrez-lui l'écran

Ce que c'est et pourquoi ça compte

Claude Code écrit le code, mais tout seul il ne voit pas ce que vous voyez. S'il n'a aucun moyen de regarder la page, le bouton de travers ou le formulaire qui ne s'envoie pas n'existent pas pour lui. Et à la fin, c'est vous qui les découvrez, après qu'il vous a écrit « fait ».

Ce guide règle le problème dans les deux sens. Vous montrez l'écran à Claude, avec une capture d'écran. Et Claude regarde l'écran tout seul, avec un navigateur qu'il peut utiliser : il ouvre la page, clique, remplit, regarde le résultat.

Ça compte parce qu'un défaut visuel expliqué avec des mots, c'est lent et imprécis. « Le bouton est un peu plus bas » peut vouloir dire dix choses différentes, une image non. Et quand c'est Claude qui refait le parcours, il trouve et corrige les erreurs les plus bêtes avant qu'elles n'arrivent jusqu'à vous.

La règle générale, pas de « fait » sans preuve, je l'ai déjà expliquée dans un autre guide. Ici, je me concentre sur la partie visuelle : comment Claude voit la page et comment il vous montre qu'elle fonctionne.

1. La phrase à donner à Claude

Voici la phrase que j'utilise. Je la colle après avoir demandé une modification, ou je la mets une fois pour toutes dans le CLAUDE.md. Copiez-la telle quelle :

Après chaque modification, ouvre la page dans le navigateur et refais toi-même le parcours comme un vrai utilisateur : clique, remplis, envoie. Fais une capture d'écran avant et une après. Puis dis-moi ce que tu as vu, étape par étape. N'écris pas "fait" tant que tu ne l'as pas vu fonctionner : joins-moi les captures comme preuve. Si quelque chose ne colle pas, corrige-le et revérifie.

Chaque morceau a une raison :

• « Refais toi-même le parcours comme un vrai utilisateur » : ouvrir la page ne suffit pas. Il doit faire ce que ferait une personne, dans le même ordre.
• « Une capture avant et une après » : la comparaison montre ce qui a vraiment changé, pas seulement que la page se charge.
• « Dis-moi ce que tu as vu, étape par étape » : si une étape manque dans le récit, il ne l'a probablement pas faite.
• « Si quelque chose ne colle pas, corrige-le et revérifie » : comme ça, c'est lui qui fait le tour des corrections, pas vous.

La phrase ne marche que si Claude a un navigateur à utiliser. Sans, il ne peut rien ouvrir : la section 3 montre comment lui en donner un. Et s'il n'arrive pas à ouvrir la page, il doit vous le dire, pas écrire « fait » quand même.

Mettez-la dans le CLAUDE.md

Le CLAUDE.md est le fichier d'instructions du projet. Il se trouve dans le dossier principal, sous le nom CLAUDE.md ou .claude/CLAUDE.md, et Claude Code le lit au début de chaque session. Si vous y mettez la phrase, vous n'avez pas besoin de la répéter à chaque fois. Vous pouvez la faire ajouter par Claude lui-même :

Ajoute au CLAUDE.md cette règle pour chaque modification de l'interface : [colle ici la phrase]

Ensuite, ouvrez une nouvelle session : le fichier est chargé au démarrage. Pour vérifier qu'il l'a bien pris, tapez /context et regardez sous Memory files.

2. Montrez-lui vous-même l'écran

Parfois, vous voyez le problème avant lui. Au lieu de le décrire, envoyez-lui l'image. Dans Claude Code, vous avez quatre façons de faire :

1. Dans le terminal : copiez l'image et collez-la avec Ctrl+V. Sur Mac, c'est Ctrl aussi dans le Terminal, pas Cmd (dans iTerm2, Cmd+V marche aussi). Sous Windows, c'est Alt+V. Dans le message apparaît [Image #1].
2. Ou faites glisser le fichier image dans la fenêtre de Claude Code.
3. Ou écrivez le chemin du fichier dans le message, comme dans le prompt ci-dessous.
4. Dans l'application de bureau : le bouton + à côté du champ de message pour joindre le fichier, ou faites glisser l'image dans le champ.

regarde cette capture d'écran : /chemin/image.png

Ensuite, une ligne suffit. [Image #1] indique à Claude de quelle image vous parlez, pratique quand vous en collez plusieurs dans la même conversation.

[Image #1] ce bouton est de travers, corrige-le

Pour faire une capture d'une partie de l'écran : sur Mac, Cmd+Ctrl+Shift+4 la copie directement dans le presse-papiers ; sous Windows, Win+Shift+S. Elle est ainsi prête à coller.

3. Donnez un navigateur à Claude

Pour que Claude refasse le parcours tout seul, il doit pouvoir ouvrir la page. Il y a deux voies, selon l'endroit où vous l'utilisez.

L'application de bureau : le navigateur intégré

Dans l'application de bureau de Claude, dans l'onglet Code, il y a un panneau Browser. Vous l'ouvrez avec le bouton Browser dans la barre du haut de la session, ou avec Cmd+Shift+B sur Mac (Ctrl+Shift+B sous Windows). Claude lance votre site en local, l'ouvre là, clique, remplit les formulaires, fait les captures d'écran et corrige ce qu'il trouve. Et vous le regardez faire.

Il y a aussi une option, Auto-verify changes, activée par défaut : après avoir modifié les fichiers, Claude vérifie tout seul avec des captures et les erreurs avant de terminer sa réponse. La phrase de la section 1 sert quand même : elle demande le parcours complet de l'utilisateur et le récit de ce qu'il a vu.

Le terminal : Claude in Chrome

Si vous utilisez Claude Code dans le terminal, la voie, c'est Claude in Chrome : une extension pour Chrome ou Edge, qui marche aussi avec d'autres navigateurs basés sur Chromium. Vous installez l'extension depuis le Chrome Web Store, puis vous lancez Claude Code comme ceci :

claude --chrome

Dans la session, /chrome vous montre si la connexion fonctionne et vous permet de choisir Enabled by default, pour que les prochaines sessions démarrent déjà connectées. Moi, je ne l'active que quand j'en ai besoin, parce qu'avec le navigateur toujours actif, les outils prennent de la place dans le contexte. Il faut un forfait Claude payant (Pro, Max, Team ou Enterprise), avec une connexion faite via /login : avec une simple clé API, elle ne s'active pas.

Ici, Claude utilise votre vrai navigateur, dans une fenêtre que vous voyez, y compris sur les pages où vous êtes déjà connecté. S'il tombe sur une page de connexion ou un captcha, il s'arrête et vous demande. Il peut aussi lire les erreurs de la console, utile quand la page a l'air correcte mais que quelque chose cloche en dessous.

Les captures comme preuve

Si vous voulez ouvrir vous-même les captures que Claude fait dans le navigateur, demandez-lui de les enregistrer dans des fichiers : il vous donne le chemin et vous les regardez quand vous voulez.

Enregistre les captures d'avant et d'après dans un dossier du projet et donne-moi les chemins.

Si vous faites des apps pour iPhone

Le navigateur, c'est pour les sites et les applications web. Pour une app iOS, l'application de bureau sur Mac a un panneau iOS Simulator, en bêta : Claude compile l'app, la lance dans le simulateur, touche les écrans et les lit pour vérifier ses modifications. Il faut avoir installé Xcode, et ça ne marche qu'avec des appareils simulés, pas avec un vrai iPhone.

Les erreurs les plus courantes

• Décrire un défaut visuel avec des mots. Collez la capture et ajoutez une ligne : c'est plus rapide et ça ne laisse aucun doute.
• Donner la phrase à Claude sans lui donner de navigateur. Ouvrez le panneau Browser dans l'application de bureau ou lancez Claude Code avec claude --chrome, sinon il n'a rien à regarder.
• Accepter « j'ai vérifié » sans images. Demandez les captures d'avant et d'après : s'il n'y en a pas, la vérification n'a pas eu lieu.
• S'arrêter au premier écran. Vérifiez que le récit de Claude va jusqu'au bout du parcours, jusqu'à l'envoi.

Check-list

• La phrase est dans le CLAUDE.md du projet
• Après l'avoir ajoutée, j'ai ouvert une nouvelle session
• Claude a un navigateur : panneau Browser ou claude --chrome
• Je sais coller une capture (Ctrl+V, Alt+V sous Windows)
• Chaque « fait » arrive avec une capture avant et une après
• Le récit de Claude couvre tout le parcours

Questions fréquentes