Images et multimodalité : collez une capture d'écran, et il la comprendra
📚 Navigation dans la série : L'article précédent 16 Workflows courants a passé en revue les routines quotidiennes telles que lire du code, corriger des bugs et écrire des tests. Cet article ajoute une nouvelle dimension — non seulement vous pouvez lui écrire, mais vous pouvez aussi lui montrer directement des images : captures d'écran d'erreurs, maquettes, diagrammes d'architecture... Déposez-les et il les comprendra.
Par exemple, pour transformer une maquette de designer en page web. Auparavant, il fallait mesurer pixel par pixel sur l'image — quel est l'espacement ici, quelle est la taille de la police, de combien est le rayon de bordure du bouton... On pouvait y passer la matinée juste pour extraire les valeurs.
Maintenant, il suffit de glisser ce PNG directement dans la fenêtre de Claude Code et de taper « génère le CSS correspondant d'après cette maquette ».
Quelques minutes plus tard, il génère un bloc complet de CSS — la mise en page, les couleurs, les bordures arrondies, les ombres, tout correspond. Vous le collez dans votre projet, rafraîchissez le navigateur, et c'est presque identique à la maquette. La différence d'efficacité est flagrante : c'est beaucoup plus rapide de lui montrer que de lui expliquer.
En bref, l'expression "une image vaut mille mots" est littéralement vraie avec Claude Code. Aujourd'hui, nous allons expliquer en détail « comment fournir une image + ce que l'on peut faire avec ».
Après avoir lu cet article, vous saurez :
- Trois méthodes pour insérer des images dans Claude Code, il suffit de suivre les instructions (y compris un piège de raccourci clavier inévitable pour les utilisateurs Mac).
- Les trois principales utilisations des images : partager des captures d'écran d'erreurs, reproduire des maquettes, lire des graphiques/diagrammes d'architecture.
- Un critère de décision : quand utiliser une image et quand le texte suffit.
- Comment utiliser plusieurs images, comment Claude fait référence aux images, et comment ouvrir l'image mentionnée en un clic.
01 Pourquoi lui montrer une image au lieu de simplement taper du texte
Commençons par la conclusion : lorsqu'une chose « prend plus de temps à décrire qu'à capturer en image », il est temps d'utiliser une image.
C'est le critère noir sur blanc dans la documentation officielle — « utilisez des images lorsque la description textuelle n'est pas claire ou est fastidieuse ».
Analogie : une image vaut mille mots. Vous décrivez à un ami à quoi ressemble une fenêtre contextuelle d'erreur rouge, en disant pendant un moment : « Il y a une croix rouge dans le coin supérieur gauche, une ligne de petit texte en dessous, et un bouton à droite... » et il est toujours confus ; mais si vous prenez une capture d'écran et que vous l'envoyez, il dit « Oh » et comprend tout de suite. Montrer une image à Claude, c'est le même principe — cela vous épargne l'effort de formuler des phrases, et cela lui épargne l'effort de deviner.
Quels scénarios sont particulièrement adaptés pour utiliser des images ? À l'usage, ce sont principalement ces trois catégories :
| Scénario | À quel point c'est fastidieux à décrire | À quel point l'image fait gagner du temps |
|---|---|---|
| Page désalignée / style incorrect | « Cette div est décalée vers la droite d'environ vingt pixels, et elle chevauche la partie en dessous » | Prenez une capture d'écran, il voit le désalignement d'un coup d'œil |
| Fenêtre contextuelle d'erreur / texte rouge dans la console | Taper manuellement ou copier-coller proprement une longue trace de pile | Déposez la capture d'écran, le contexte est inclus |
| Reproduire une maquette / cloner un composant | « La couleur principale est un bleu un peu violet, le rayon de la bordure est moyen... » | Donnez l'image, laissez-le mesurer lui-même |
Il y a une distinction clé à clarifier ici : Claude Code regarde « le contenu de l'image », il ne prend pas la capture d'écran pour vous. Vous devez toujours faire la capture d'écran vous-même (l'outil de capture intégré au système suffit), sa tâche est de « comprendre l'image que vous avez fournie ».
💡 En résumé : Le critère est simple — si c'est plus fastidieux à décrire qu'à capturer, utilisez une image ; la formulation officielle est « utilisez des images lorsque le texte n'est pas clair ou est fastidieux ».
02 Trois façons de fournir des images : glisser, coller, donner le chemin
Comment y insérer une image ? La documentation officielle donne trois méthodes, choisissez-en une, le résultat est le même. Je les classe par « niveau de difficulté, du plus bas au plus haut ».
Cette image regroupe les trois méthodes d'ajout d'images : glisser dans la fenêtre, copier puis coller avec ctrl+v (c'est aussi ctrl+v sur Mac), ou fournir directement le chemin du fichier — ces trois méthodes mènent au même résultat, qui est de donner l'image à Claude pour qu'il « travaille en la regardant ».
Méthode 1 : Glisser-déposer directement dans la fenêtre (la plus intuitive)
Prenez le fichier image depuis le Finder / l'explorateur de fichiers et glissez-le dans la fenêtre du terminal où s'exécute Claude Code, relâchez, et elle est dedans.
C'est la méthode qui demande le moins de réflexion — c'est comme glisser un fichier dans une fenêtre de chat WeChat pour envoyer une image. Les débutants commencent généralement par là, le coût d'apprentissage est nul.
Méthode 2 : Copier l'image, coller avec ctrl+v (la plus fréquente, mais avec un piège)
Souvent, l'image n'est même pas enregistrée en tant que fichier — vous venez de prendre une capture d'écran, ou de faire un clic droit pour « copier l'image » sur une page web. Dans ce cas, coller directement est le plus pratique.
Mais il y a ici le plus gros piège de tout l'article, la documentation officielle insiste particulièrement dessus :
Copiez l'image et utilisez
ctrl+vpour la coller dans la CLI (n'utilisez pascmd+v).
Attention : sur Mac, coller une image utilise également ctrl+v, et non le cmd+v auquel vous êtes habitué.
À quel point est-ce contre-intuitif ? Les utilisateurs Mac utilisent cmd+v pour copier et coller du texte depuis dix ans, la mémoire musculaire est profondément ancrée. La première fois que l'on colle une capture d'écran, il est très facile d'appuyer par habitude sur cmd+v, et le résultat est qu'une longue chaîne de caractères incompréhensible apparaît dans le terminal, l'image n'y entre pas du tout, et on pense que ce n'est pas pris en charge. En parcourant la documentation, on comprend — dans de nombreux terminaux, cmd+v colle le texte du chemin du fichier, seul ctrl+v permet de fournir de manière fiable l'image elle-même à Claude.
(Pour ajouter un détail : certains terminaux comme iTerm2 acceptent aussi cmd+v pour coller des images, mais le comportement varie d'un terminal à l'autre, ctrl+v est la méthode qui fonctionne partout, retenez-la pour éviter les pièges.)
Mémorisez cette règle :
| Plateforme | Pour coller une image, utilisez | N'utilisez pas |
|---|---|---|
| Mac | ctrl+v | ❌ cmd+v (la plupart des terminaux colleront le texte du chemin) |
| Windows / Linux | ctrl+v (dans WSL, si le terminal intercepte ctrl+v, utilisez plutôt alt+v) | —— |
Un petit détail : après avoir collé avec succès, une balise de substitution [Image #1] apparaîtra dans la zone de saisie (la documentation officielle appelle cela un « jeton » (chip)), indiquant que l'image est bien attachée, et vous pouvez continuer à taper votre prompt à la suite.
Méthode 3 : Donner directement le chemin de l'image (idéal pour les scripts / images déjà enregistrées)
Si l'image est déjà enregistrée en tant que fichier et que vous connaissez son chemin, la méthode la plus directe est de taper le chemin directement dans le prompt, et de le laisser le lire lui-même :
Analyze this image: /path/to/your/image.pngRemplacez /path/to/your/image.png par le chemin réel de votre image (les chemins relatifs et absolus sont tous deux acceptés). Cette méthode ne dépend pas du glisser-déposer à la souris, et elle est la plus adaptée lorsqu'elle est écrite dans un script, ou lorsque l'image est enfouie profondément dans un répertoire du projet.
💡 En résumé : Glisser dans la fenêtre / coller avec
ctrl+v/ donner directement le chemin, choisissez l'un des trois ; les utilisateurs Mac doivent mémoriserctrl+v, et ne pas appuyer surcmd+v.
03 Utilisation 1 : Partager des captures d'écran d'erreurs et d'UI, pour lui donner la « scène »
Le premier scénario le plus pratique — lancez-lui une capture d'écran du problème pour qu'il examine la scène.
Pourquoi cette astuce est-elle efficace ? Parce que de nombreuses erreurs et problèmes de style ne peuvent tout simplement pas être entièrement communiqués par du texte. Une fenêtre d'erreur a des icônes, des couleurs, une mise en page, et en tapant manuellement, vous ne pouvez décrire qu'une idée générale ; c'est encore plus vrai pour les désalignements de l'UI, une différence de quelques pixels se voit à l'œil nu, mais est difficile à expliquer avec des mots.
Analogie : lorsque vous allez à l'hôpital, ne vous fiez pas seulement à votre bouche pour décrire « ça fait mal ici », montrez une radiographie au médecin. Vous dites « J'ai une douleur sourde dans le coin inférieur droit de mon ventre », le médecin ne peut que deviner ; mettez un scanner devant lui, et le problème est évident en un coup d'œil. La capture d'écran est cette « radiographie » pour Claude.
Comment faire concrètement ? Fournissez la capture d'écran (choisissez l'une des trois méthodes), puis ajoutez une phrase pour exprimer votre demande. L'exemple de prompt fourni par la documentation officielle est très pertinent :
Here's a screenshot of the error. What's causing it?Ou, pour un problème sur l'interface utilisateur :
Describe the UI elements in this screenshotPar exemple, en ajustant une page React, un bouton est obstinément décalé vers la droite, et en examinant le CSS sous toutes les coutures, on ne voit pas le problème. À ce moment-là, prenez directement une capture d'écran du désalignement et déposez-la, accompagnée de la phrase « pourquoi ce bouton est-il poussé vers la droite ? », Claude regarde et dit « le conteneur parent a un padding-right, qui s'ajoute au margin du bouton lui-même, ils se superposent » — le problème est identifié en une phrase, il suffit de corriger une ligne. Si vous deviez décrire ce désalignement en tapant, cela prendrait probablement plusieurs allers-retours.
💡 En résumé : Pour les erreurs et les problèmes d'UI, une capture d'écran est une « photo de la scène » — lui montrer permet de résoudre l'affaire beaucoup plus vite que de lui expliquer.
04 Utilisation 2 : Reproduire des maquettes, du code direct à partir de captures d'écran
C'est le scénario mentionné au début où « la différence d'efficacité est flagrante », examinons-le séparément — donnez-lui une maquette, laissez-le générer du code exécutable.
Pourquoi cette astuce est-elle la plus bluffante ? Parce qu'elle élimine la partie la plus fastidieuse du travail entre « la conception → le code ». Mesurer les valeurs sur l'image, ajuster les espacements, essayer les couleurs, était à l'origine la partie la plus ennuyeuse du front-end. Maintenant, vous pouvez la lui confier pour qu'il génère d'abord une version très proche de la réalité, que vous affinerez ensuite.
Analogie : donner une photo à un tailleur pour qu'il confectionne des vêtements d'après elle. Vous n'avez pas besoin de dicter chaque dimension au tailleur, mettez simplement la photo du vêtement devant lui, et il pourra déduire le patron, le tissu et les coutures lui-même. Une capture d'écran de maquette pour Claude est cette « photo de vêtement ».
Voici les exemples de prompts de la documentation officielle, mémorisez ces deux phrases et vous êtes prêt à commencer :
照着这张设计稿生成对应的 CSSWhat HTML structure would recreate this component?La première phrase lui demande de générer le CSS d'après la maquette, et la seconde lui demande de déduire la structure HTML capable de recréer ce composant. En utilisant les deux à la suite, le squelette d'un composant statique est prêt.
Pour être honnête, il faut avoir des attentes raisonnables : ce n'est pas une reproduction au pixel près, c'est un point de départ très abouti. Comme pour le CSS du début, la mise en page globale et les couleurs correspondaient parfaitement, mais le padding à deux endroits différait de quelques pixels, ce qui se corrige facilement manuellement. Mais cela a déjà fait gagner au moins une heure — écrire du CSS de zéro, et modifier une base achevée à 80 % fournie par l'IA, représentent deux charges de travail totalement différentes.
| Reproduire une maquette | ❌ Tout coder à la main | ✅ Lui fournir une capture d'écran |
|---|---|---|
| Mesurer les valeurs | Extraire les pixels un par un soi-même | Il les estime d'après l'image |
| Créer le squelette | Taper à partir d'un fichier vide | Il fournit directement une version exécutable |
| Votre travail | Tout faire de zéro | Ajuster les 10-20 % restants |
💡 En résumé : Capture d'écran de la maquette + « génère le CSS correspondant d'après cette maquette », il vous donne une version à 80 %, vous complétez les 20 % restants, ce qui vous épargne tout le travail fastidieux.
05 Utilisation 3 : Lire des graphiques et des diagrammes d'architecture, pour lui faire « comprendre la structure »
La troisième utilisation, les graphiques, les schémas de base de données, les diagrammes d'architecture — ces images « structurelles », il peut aussi les comprendre.
Pourquoi en faire une catégorie distincte ? Parce que les deux premières (erreurs, maquettes) sont des images d'« interface », tandis que celles-ci contiennent des « relations » — qui est connecté à qui, comment circulent les données, comment les modules sont structurés en couches. Ce type de relation est particulièrement alambiqué à décrire avec du texte, mais est clair d'un coup d'œil avec un diagramme, ce qui est exactement le point fort de Claude.
Analogie : expliquer le système à un nouveau collègue ; dessiner un schéma sur un tableau blanc est plus efficace que de parler pendant une demi-heure. Vous expliquez oralement au nouvel arrivant « le service utilisateur appelle le service de commande, le service de commande dépend à son tour de l'inventaire et du paiement... », il sera complètement perdu ; mais si vous dessinez quelques cases reliées par des flèches sur un tableau blanc, il comprendra instantanément. Envoyer ce schéma à Claude a le même effet.
Les exemples de prompts de la documentation officielle couvrent deux directions, « lire » et « modifier » :
This is our current database schema. How should we modify it for the new feature?Are there any problematic elements in this diagram?La première phrase consiste à prendre le diagramme de structure de la base de données existante et lui demander comment modifier les tables pour une nouvelle fonctionnalité ; la seconde consiste à lui demander d'examiner ce diagramme pour voir s'il y a des éléments illogiques.
Une utilisation très courante : lorsque vous reprenez un projet inconnu, et qu'on vous donne un PNG du diagramme d'architecture, donnez-le directement à Claude, et demandez-lui d'expliquer d'abord comment ce système fonctionne en gros. Il peut lire les modules et les relations d'appel à partir de l'image, et vous donner un aperçu — c'est beaucoup plus rapide que de fixer le diagramme soi-même, c'est comme si quelqu'un vous guidait d'abord à travers le diagramme.
💡 En résumé : Les graphiques, les schémas, les diagrammes d'architecture et autres images qui « expliquent des relations », donnez-les-lui en tant que contexte, laissez-le comprendre la structure avant de vous aider à la modifier ou à la réviser.
06 Plusieurs images, références, ouverture en un clic : quelques petites manipulations utiles
Enfin, ajoutons quelques détails pour rendre votre utilisation plus fluide, qui sont tous mentionnés dans la documentation officielle.
Vous pouvez fournir plusieurs images à la fois
Pas besoin de le faire une par une — vous pouvez inclure plusieurs images dans un seul prompt. Par exemple, « Voici l'ancienne maquette, voici la nouvelle maquette, dis-moi ce qui a changé », donnez-lui les deux en même temps et laissez-le comparer. C'est souvent le cas lors de la révision des maquettes, cela évite d'avoir à faire des allers-retours avec des descriptions.
Comment Claude fait référence aux images : [Image #1]
Lorsque Claude mentionne une certaine image que vous avez fournie dans sa réponse, il utilisera des numéros comme [Image #1], [Image #2] pour la désigner — la X-ième image est le numéro X. Lorsqu'il y a plusieurs images, ce numéro vous permet de voir d'un coup d'œil « de quelle image il parle ».
Ouvrir l'image qu'il mentionne en un clic
Le [Image #N] qui apparaît dans ses réponses est cliquable, selon la documentation officielle :
Lorsque Claude référence une image (par exemple
[Image #1]), utilisezCmd+Clic(Mac) ouCtrl+Clic(Windows/Linux) sur le lien pour ouvrir l'image dans votre visionneuse par défaut.
En d'autres termes, pour confirmer de quelle image il parle exactement, faites Cmd+Clic sur Mac, Ctrl+Clic sur Windows/Linux sur ce numéro, et la visionneuse d'images par défaut du système l'ouvrira pour vous.
| Action | Mac | Windows / Linux |
|---|---|---|
| Coller l'image | ctrl+v | ctrl+v |
Cliquer sur [Image #N] | Cmd+Clic | Ctrl+Clic |
Notez que la « répartition » de ces deux raccourcis est inversée : on utilise ctrl pour coller une image, mais on utilise Cmd sur Mac pour cliquer sur le lien de l'image. Ne les confondez pas.
💡 En résumé : Un seul prompt peut contenir plusieurs images, Claude les désigne par
[Image #N], en cliquant sur ce numéro (avecCmd+Clicsur Mac), vous pouvez ouvrir l'image pour vérifier.
07 En pratique : glissez une image pour qu'il la lise, réussissez en trois étapes
La théorie sans la pratique ne mène à rien. Ci-dessous, utilisez n'importe quelle image de votre ordinateur pour tester l'ensemble du processus « fournir l'image → il la comprend » en trois étapes. Aucun projet n'est nécessaire, il suffit d'avoir une image sur le bureau.
Étape 1 : Trouvez une image au hasard, notez son emplacement
Prenez une capture d'écran ou trouvez un PNG / JPG existant. Les captures d'écran Mac sont enregistrées par défaut sur le bureau, avec un nom de fichier du type Capture d'écran 2026-06-10 à 15.20.15.png. Faites-la glisser vers un chemin facile à taper, par exemple, laissez-la directement sur le bureau.
Étape 2 : Lancez Claude Code dans n'importe quel répertoire
claudeRésultat attendu : L'écran de bienvenue apparaît, avec une zone de saisie en bas. (La lecture d'image ne dépend pas du répertoire, vous pouvez le lancer n'importe où.)
Étape 3 : Fournissez-lui l'image et demandez-lui de la décrire
Choisissez l'une des trois méthodes, pour les débutants, il est recommandé de la glisser directement : glissez l'image depuis le bureau dans la fenêtre du terminal, relâchez, et la balise [Image #1] apparaîtra dans la zone de saisie. Continuez ensuite à taper :
这张图里是什么？用中文描述一下你看到的内容Appuyez sur Entrée.
Résultat attendu : Claude lit l'image et vous indique ce qu'elle contient — s'il s'agit d'une capture d'écran, il décrira les éléments de l'interface, s'il s'agit d'une photo, il décrira le contenu de l'image. Le voir décrire avec précision le contenu de l'image = réussite de la fourniture de l'image, l'ensemble du processus est validé.
⚠️ Si les utilisateurs Mac veulent essayer la méthode du « copier-coller » : copiez d'abord l'image dans Aperçu ou dans le navigateur, revenez au terminal et appuyez sur ctrl+v (pas cmd+v). Si, après avoir appuyé, une chaîne de texte de chemin de fichier apparaît au lieu de la balise [Image #N], il est fort probable que vous ayez appuyé par erreur sur cmd+v. Effacez et recommencez.
💡 En résumé : Glisser dedans /
ctrl+v/ donner le chemin, fournissez l'image en trois étapes, et voir Claude décrire avec précision le contenu de l'image signifie que cela fonctionne.
08 Résumé
Dans cet article, vous avez appris à doter Claude Code de la « vision » — passant de la simple frappe de texte à la possibilité de lui montrer directement des images.
Récapitulatif des points clés :
| Dimension | Point clé |
|---|---|
| Comment fournir | Glisser dans la fenêtre / coller avec ctrl+v / donner le chemin, l'un des trois |
| Le plus gros piège | Utilisez ctrl+v pour coller des images sur Mac, n'appuyez pas sur cmd+v |
| Trois principales utilisations | Captures d'erreurs / UI pour la scène, reproduire des maquettes pour le code, lire des graphiques / diagrammes d'architecture pour comprendre la structure |
| Quand utiliser des images | Lorsque la description textuelle est plus fastidieuse que de prendre une capture d'écran |
| Plusieurs images et références | Plusieurs images dans un seul prompt, Claude utilise [Image #N] pour les désigner, cliquez sur le numéro pour ouvrir |
Maintenant, vous devriez être capable de : fournir n'importe quelle capture d'écran, maquette ou diagramme d'architecture à Claude Code, le laisser regarder l'image pour vous aider à diagnostiquer les erreurs, générer du code ou analyser la structure ; et vous rappeler le ctrl+v le plus contre-intuitif sur Mac. Cette capacité de « lui montrer » fera chuter le coût de description de vos problèmes à l'avenir — de nombreuses demandes qui prenaient auparavant beaucoup de temps à décrire en tapant peuvent désormais être résolues avec une seule image et une seule phrase.
Article suivant 18 « Guide d'utilisation de CLAUDE.md » — jusqu'à présent, nous avons fourni des images, fourni des exigences, mais à chaque fois, nous devons répéter le contexte du projet. Y a-t-il un moyen de faire en sorte que Claude sache automatiquement de quoi il s'agit et quelles règles suivre dès son entrée dans le projet ? Le prochain article parlera de ce « manuel d'intégration » pour lui — CLAUDE.md. Une fois configuré, il n'aura plus jamais besoin que vous le répétiez sans cesse.