Claude · Workflows

Les captures d'écran dans Claude : le raccourci visuel que tu sous-exploites

Deux façons d'utiliser les captures d'écran avec Claude (Chat, Cowork ou Code) : lui donner une inspiration visuelle pour créer, et lui faire vérifier son propre rendu à l'œil. Avec le réglage Playwright pour qu'il s'auto-évalue tout seul.

QQuentin Megevand
15 juin 2026 · 6 min de lecture

La plupart des gens ne tapent que du texte à Claude. Ils oublient un truc tout bête : Claude voit les images. Une capture d'écran vaut souvent mieux que trois paragraphes d'explication.

Tu veux qu'il s'inspire d'un design ? Montre-lui le design. Tu veux savoir si ce qu'il vient de construire fonctionne vraiment ? Montre-lui le rendu. Au lieu de décrire au clavier ce qui est par nature visuel, tu lui colles l'image sous les yeux. Et ça marche dans les trois produits : Claude Chat, Claude Cowork et Claude Code.

Ce guide te donne les deux usages qui changent le plus la donne, plus un réglage bonus pour que Claude Code prenne les captures tout seul.

Claude AI Lab

Le Claude AI Lab, c'est ma communauté Skool où je partage mes systèmes Claude et les modules plus avancés. L'entrée est gratuite.

Rejoindre le Lab →
Ce qu'il te faut
1
Un Claude qui voit les images. Le Chat (claude.ai), Cowork (l'app desktop) et Code acceptent tous les images. Si tu hésites entre les trois, j'explique lequel ouvrir ici.
2
De quoi capturer ton écran. Sur Mac, Cmd + Shift + 4 pour sélectionner une zone. Sur Windows, Win + Shift + S. La capture part dans ton presse-papier ou dans un fichier.
3
Pour l'auto-évaluation en Claude Code (optionnel). Playwright branché, pour qu'il ouvre un navigateur et capture lui-même. La commande est plus bas.
Le réflexe à prendre

Dès qu'une tâche est visuelle (un design, un rendu, une mise en page), arrête de la décrire au clavier. Montre.

1

Donner une capture à Claude

🖼️ 3 façons selon le produit

La méthode change un peu selon le produit, mais l'idée reste la même : tu remplaces une longue description par une image.

💬
Dans le Chat
Glisse l'image dans la zone de message, colle-la (Cmd + V / Ctrl + V), ou clique sur le trombone. Sur claude.ai ou dans l'onglet Chat de l'app.
🖥️
Dans Cowork
Pareil que le chat : glisser-déposer, coller, ou le bouton d'ajout dans la barre de message. L'app desktop se comporte comme le chat sur ce point.
💻
Dans Code
Donne-lui le chemin du fichier (par exemple "analyse la capture ./screens/page.png"), ou glisse l'image dans le terminal : ça colle le chemin automatiquement. Claude lit le fichier et le regarde.
Le point commun

Peu importe le produit, le geste est le même : une image à la place de dix lignes de description. Plus rapide, et plus précis.

2

Usage 1 : l'inspiration visuelle

🎨 créer à partir d'un visuel

Tu tombes sur un design qui te plaît : un post qui claque, une landing propre, l'interface d'un outil bien foutu. Au lieu d'essayer de le décrire, tu le captures et tu le donnes à Claude. Il lit la mise en page, la hiérarchie, les couleurs, les espacements, l'ambiance générale, et il t'en sort une version adaptée à ta marque et à ton contenu.

Pour trouver de quoi t'inspirer, trois sources qui valent le détour :

🏆
awwwards.com
Les sites web primés, pour viser le haut du panier en design web.
🎨
dribbble.com
Les "shots" de designers : interfaces, branding, composants, illustrations.
📌
pinterest.com
Orienté réseaux sociaux : posts, carrousels, moodboards, formats Instagram et LinkedIn.
🎯Le workflow inspiration, en 3 gestes
4
Capture le visuel. Repère ce qui te plaît et capture juste la zone utile, pas tout l'écran.
5
Donne-le avec ta consigne. Par exemple : "inspire-toi de cette mise en page pour mon post, garde l'esprit mais adapte à ma marque, mes couleurs et mon contenu".
6
Itère sur l'image. "Rapproche-toi de l'inspi sur la disposition, mais garde mon ton et mon palette." Tu corriges en montrant, pas en réexpliquant.
La règle à respecter

Inspiration, pas copie. Tu prends la structure, le rythme, l'idée. Tu ne dupliques pas le travail de quelqu'un d'autre.

3

Usage 2 : l'auto-évaluation par capture

🔍 lui faire vérifier son rendu

Voici le piège que presque personne ne voit. Quand Claude construit quelque chose de visuel (une page, un composant, un post, une slide), il voit son propre code ou ses instructions, pas le résultat affiché à l'écran. Du coup, il peut être convaincu que c'est terminé alors que le rendu réel est cassé : un bouton qui déborde, un texte coupé, un alignement de travers, des couleurs à côté.

La parade : tu prends une capture du rendu réel et tu la lui redonnes. Là, il voit, il compare à ce que tu voulais, et il corrige.

🔁La boucle de vérification visuelle
7
Affiche le résultat. Ouvre ou lance ce que Claude a produit (la page, le post, l'écran).
8
Capture le rendu réel. Tel qu'il s'affiche vraiment, pas tel qu'il était censé s'afficher.
9
Redonne-lui la capture. Avec la demande de départ : "voici ce que ça donne à l'écran, dis-moi ce qui ne va pas et corrige".
10
Recommence si besoin. Jusqu'à ce que le rendu colle vraiment à l'intention.

C'est une vraie boucle : il produit, tu montres le rendu, il corrige, on recommence. Si tu veux pousser cette logique de boucle automatique plus loin, j'en ai fait un guide complet.

À retenir

Claude ne voit pas ce que tu vois, sauf si tu le lui montres. La capture, c'est ses yeux sur le résultat final.

4

Playwright : l'auto-évaluation sans toi

⚙️ claude mcp add playwright

En Claude Code, tu peux carrément éviter de prendre la capture toi-même. Playwright est un outil qui pilote un vrai navigateur. Branché à Claude Code, c'est lui qui ouvre la page, prend la capture, la regarde et corrige, sans que tu touches à rien.

Pour le brancher, une seule commande dans ton terminal :

claude mcp add playwright npx @playwright/mcp@latest
⚙️Le faire tourner
11
Branche Playwright. La commande ci-dessus. Un MCP, c'est le pont entre Claude et un outil externe : ici, l'outil c'est un navigateur.
12
Lance ton projet en local. Par exemple sur localhost:3000.
13
Demande-lui de juger. "Ouvre http://localhost:3000, prends une capture, et vérifie que la page d'accueil s'affiche correctement et que rien n'est coupé."
14
Laisse-le boucler. Il navigue, capture, regarde, te dit ce qui va ou pas, et corrige dans la foulée.
Règle de sécurité

Comme tout outil branché, Playwright agit avec tes accès. Garde un œil sur ce qu'il ouvre, et ne le laisse pas naviguer sur des comptes sensibles connectés.

Par où commencer

Tu n'as pas besoin des deux usages dès aujourd'hui. Choisis-en un. Le plus simple pour démarrer : la prochaine fois que tu construis un visuel avec Claude (un post, une slide, une page), prends une capture du rendu et redonne-la-lui pour qu'il vérifie. Tu verras tout de suite la différence entre "il pense que c'est bon" et "c'est vraiment bon".

Et la prochaine fois qu'un design te plaît quelque part, ne le décris pas : capture-le, et laisse Claude s'en inspirer pour ta marque.

Le réflexe à garder

Claude voit ce que tu lui montres. Pour tout ce qui est visuel, une capture d'écran vaut dix lignes de description. Inspiration en entrée, vérification en sortie.

Tu veux aller plus loin ?

Et au quotidien, je partage un reel par jour sur Instagram : @quentin_iamarketing