Claude Code et les images : l'agent qui voit vos écrans et code vos maquettes

Vous avez une capture d'écran d'un bug d'affichage impossible à décrire en mots. Une maquette Figma à transformer en composant React. Un message d'erreur dans un terminal externe que vous devriez retaper à la main. Un diagramme d'architecture griffonné sur un tableau blanc. Pendant longtemps, expliquer du visuel à un assistant de code par du texte relevait de la traduction laborieuse.

C'est terminé. Claude Code analyse les images nativement : vous lui donnez une capture d'écran, une maquette ou une photo, et il la « lit » pour écrire ou corriger votre code. Cette capacité de vision transforme des tâches qui prenaient des minutes de description en un simple glisser-déposer.

Dans ce guide 2026, vous allez découvrir comment utiliser les images avec Claude Code : les façons de lui transmettre un visuel, les quatre cas d'usage qui changent vraiment la donne (débogage visuel, design-to-code, Figma via MCP, lecture de diagrammes), les bonnes pratiques de prompt visuel et les limites à connaître.

Sommaire

[Claude Code voit-il vraiment les images ?](#vision)

[Comment donner une image à Claude Code](#donner)

[Cas d'usage 1 : déboguer à partir d'une capture d'écran](#debug)

[Cas d'usage 2 : convertir une maquette en code (design-to-code)](#maquette)

[Cas d'usage 3 : de Figma au code avec le MCP](#figma)

[Cas d'usage 4 : lire diagrammes et schémas d'architecture](#diagramme)

[Bonnes pratiques pour les prompts visuels](#pratiques)

[Limites et pièges à connaître](#limites)

[FAQ : Claude Code et les images](#faq)

Claude Code voit-il vraiment les images ?<a id="vision"></a>

Oui, et c'est une différence de nature, pas de degré. Les modèles Claude récents (la famille Opus et Sonnet 4.x) sont multimodaux : ils traitent le texte et l'image dans la même fenêtre de contexte. Concrètement, quand vous fournissez une image à Claude Code, l'agent ne la stocke pas comme un fichier opaque — il l'interprète : il lit le texte présent à l'écran, repère la disposition des éléments d'interface, identifie les couleurs, détecte une erreur de mise en page ou un message d'exception.

Cette compréhension visuelle s'ajoute à la boucle agentique habituelle de Claude Code. L'agent peut donc :

Regarder une capture, en déduire le problème, modifier le code, puis vous demander une nouvelle capture pour vérifier.

Lire une maquette et générer directement les composants correspondants dans votre projet.

Extraire le texte d'une image (un log, une stack trace, un tableau) sans que vous ayez à le recopier.

Si vous débutez avec l'outil, posez d'abord les bases avec notre [guide complet de Claude Code](/blog/claude-code-guide-complet), puis revenez ici pour ajouter la dimension visuelle à votre workflow.

Comment donner une image à Claude Code<a id="donner"></a>

Il existe trois façons principales de transmettre un visuel à l'agent, du plus rapide au plus structuré.

1. Coller depuis le presse-papiers

La méthode la plus fluide. Faites une capture d'écran (sous macOS, Cmd + Ctrl + Maj + 4 copie directement dans le presse-papiers ; sous Windows, l'outil Capture d'écran avec Win + Maj + S), puis collez-la dans l'invite de Claude Code. Selon le terminal, le raccourci de collage d'image est Ctrl + V — et non Cmd + V sur Mac, un détail qui surprend beaucoup d'utilisateurs. L'agent reçoit l'image en pièce jointe et l'analyse immédiatement.

2. Glisser-déposer un fichier

Vous pouvez faire glisser un fichier image (PNG, JPG, WebP) depuis votre explorateur directement dans la fenêtre du terminal. Selon votre environnement, maintenez la touche Maj pendant le glissement pour que le chemin soit correctement injecté.

3. Référencer un chemin de fichier

La méthode la plus fiable, surtout pour les workflows reproductibles : indiquez simplement le chemin de l'image dans votre invite. Par exemple :

Regarde la maquette dans ./design/dashboard.png et crée le composant
React correspondant dans src/components/Dashboard.tsx

Claude Code lit le fichier, l'interprète et passe à l'action. Cette approche a l'avantage de rester traçable : l'image fait partie de votre projet et la demande est rejouable.

Cas d'usage 1 : déboguer à partir d'une capture d'écran<a id="debug"></a>

C'est le cas d'usage qui fait gagner le plus de temps au quotidien. Un bug visuel — un bouton qui déborde, un texte coupé, un espacement incohérent, un mode sombre cassé — est souvent pénible à décrire précisément. Une capture vaut mille mots.

Le workflow type :

1.Vous constatez un défaut d'affichage dans votre navigateur.

2.Vous capturez la zone concernée et la collez dans Claude Code.

3.Vous demandez : « Ce bouton déborde de sa carte sur mobile, corrige le CSS responsable ».

4.L'agent identifie le composant, propose un correctif, et vous pouvez recapturer pour confirmer.

Claude Code excelle aussi à lire les messages d'erreur en image. Si une exception apparaît dans un outil externe (un tableau de bord cloud, une console mobile, un terminal non connecté), une capture suffit : l'agent extrait le texte, comprend la stack trace et propose la correction. Pour aller plus loin sur les méthodes de débogage assisté, consultez notre [guide pour débugger avec Claude Code](/blog/comment-debugger-avec-claude-code-guide-2026).

Cas d'usage 2 : convertir une maquette en code (design-to-code)<a id="maquette"></a>

Le design-to-code est sans doute l'usage le plus spectaculaire de la vision. Vous fournissez une maquette — un export PNG de Figma, une capture d'un site à reproduire, un croquis d'interface — et Claude Code génère le code de l'interface.

Pour obtenir un bon résultat, soyez explicite sur le contexte technique :

À partir de la maquette ./design/pricing.png, crée une page de tarifs
en Next.js + Tailwind. Trois cartes, la carte du milieu mise en avant.
Utilise nos composants existants dans src/components/ui et respecte
notre palette définie dans tailwind.config.ts.

La clé : ne demandez pas une reproduction pixel-perfect dès le premier coup. Procédez par itérations. Laissez l'agent produire une première version, lancez votre serveur de développement, faites une capture du rendu réel, recollez-la en disant « voici ce que ça donne, l'espacement entre les cartes est trop large, rapproche-les du visuel d'origine ». Cette boucle capture → correction → capture est exactement la façon dont un humain ajuste une intégration, et Claude Code s'y prête remarquablement.

C'est aussi un accélérateur formidable pour le prototypage rapide. Si vous construisez un produit de bout en bout, combinez cette technique avec notre méthode pour [créer un SaaS full-stack avec Claude Code](/blog/claude-code-creer-saas-fullstack-rapidement) : maquette en entrée, application fonctionnelle en sortie.

Cas d'usage 3 : de Figma au code avec le MCP<a id="figma"></a>

Le glisser-déposer d'un PNG fonctionne, mais il perd une information précieuse : les données structurées de votre design (tokens de couleur, espacements exacts, noms de calques, variables). C'est là qu'intervient le Model Context Protocol (MCP).

En connectant le serveur MCP officiel de Figma à Claude Code, l'agent n'a plus seulement une image aplatie : il accède au mode développeur de Figma, lit les propriétés exactes des éléments, récupère les valeurs de la grille et des variables. Le code généré est alors bien plus fidèle, car il s'appuie sur les vraies mesures plutôt que sur une estimation visuelle.

Le principe est simple : le MCP est un standard qui connecte Claude Code à des outils externes via des serveurs dédiés. Pour comprendre comment l'installer et le configurer, lisez notre guide dédié au [Model Context Protocol et Claude Code](/blog/mcp-model-context-protocol-claude-code). Une fois Figma branché, vous combinez le meilleur des deux mondes : la compréhension visuelle du modèle et les données précises du fichier de design.

Cette logique d'agents connectés à des outils métier dépasse largement le design. Pour explorer les architectures d'agents IA en entreprise et l'auto-hébergement de ces briques, le site spécialisé [formation-openclaw.com](https://formation-openclaw.com) approfondit le sujet des agents open-source.

Voici une vidéo de la chaîne Sophiène.IA qui montre, en conditions réelles, comment tirer le maximum de Claude Code dans un workflow de développement — la même logique d'itération s'applique directement au travail à partir d'images :

Cas d'usage 4 : lire diagrammes et schémas d'architecture<a id="diagramme"></a>

La vision de Claude Code ne se limite pas aux interfaces. L'agent comprend aussi les diagrammes techniques : schémas d'architecture, diagrammes de séquence, modèles de base de données, organigrammes.

Quelques usages concrets :

Du schéma au code. Photographiez un diagramme d'architecture dessiné sur un tableau blanc et demandez à Claude Code d'en générer le squelette : structure de dossiers, interfaces, contrats d'API. L'agent traduit le visuel en arborescence de projet.

Du modèle de données aux migrations. Donnez-lui un schéma entité-relation et il peut produire les définitions de tables, les modèles ORM ou les migrations correspondantes.

Comprendre une codebase via son diagramme. Si votre documentation contient des schémas de flux, l'agent les lit pour mieux saisir l'intention avant de modifier le code.

L'extraction de données depuis un visuel — un tableau dans une capture, un graphique, un export d'API illisible — est également un usage sous-estimé. Sur ces problématiques d'API et de structuration de données, le site [immoapi.app](https://immoapi.app) propose des ressources utiles autour des API et de l'exploitation de données.

Bonnes pratiques pour les prompts visuels<a id="pratiques"></a>

Donner une image ne suffit pas ; la façon dont vous l'accompagnez détermine la qualité du résultat. Quelques règles d'or :

Soyez précis sur ce que vous voulez. « Reproduis cette maquette » est vague. « Reproduis l'en-tête de cette maquette en respectant la taille de police et l'alignement à gauche » oriente bien mieux l'agent.

Donnez le contexte technique. Framework, bibliothèque de composants, conventions de nommage : plus l'agent connaît votre stack, plus le code s'intègre. Inscrivez ces standards dans un [fichier CLAUDE.md](/blog/claude-md-fichier-configuration-guide-complet-2026) pour ne pas les répéter à chaque fois.

Une image, un objectif. Évitez de coller cinq captures en demandant tout en même temps. Découpez : une capture par problème ou par écran.

Annotez si nécessaire. Une flèche rouge ou un cadre dessiné sur la capture (avec n'importe quel outil d'annotation) attire l'attention de l'agent sur la zone exacte qui pose problème.

Privilégiez la haute résolution. Une capture nette permet à l'agent de lire le texte et les détails fins. Une image floue ou trop compressée dégrade l'analyse.

Limites et pièges à connaître<a id="limites"></a>

La vision est puissante, mais ce n'est pas de la magie. Gardez ces limites en tête :

Le pixel-perfect reste un objectif, pas une garantie. Pour une fidélité exacte, l'approche MCP/Figma (données structurées) bat toujours l'estimation à partir d'une simple image.

Le texte minuscule peut être mal lu. Sur une capture très dense ou basse résolution, l'agent peut mal interpréter un caractère. Vérifiez les valeurs critiques (codes, identifiants) extraites d'une image.

Attention aux données sensibles. Une capture d'écran peut contenir des informations confidentielles (clés d'API, données personnelles, tokens). Floutez ou recadrez avant d'envoyer une image à l'agent — l'image est transmise à l'API pour être analysée.

Le coût en contexte. Les images consomment des tokens. Sur de longues sessions avec de nombreuses captures, surveillez votre fenêtre de contexte et nettoyez régulièrement avec /clear.

La règle d'or reste la même que pour tout travail avec un agent : vous gardez le contrôle. Claude Code lit l'image et propose, mais c'est votre relecture qui valide le rendu final.

De l'image à l'application : passez à la vitesse supérieure

Analyser des captures et coder des maquettes, c'est déjà transformer votre façon de travailler. Mais le vrai levier, c'est d'enchaîner ces capacités dans des workflows complets et automatisés où des agents IA prennent en charge des pans entiers de votre développement. Si vous voulez apprendre à déléguer ce travail et reprendre la main sur votre temps, découvrez le programme :

👉 [Se faire remplacer par l'IA](https://go.saas-ia.io/se-faire-remplacer-par-lia) — la méthode pour déléguer votre travail à des agents IA.

FAQ : Claude Code et les images<a id="faq"></a>

Claude Code peut-il vraiment lire une capture d'écran ?

Oui. Les modèles Claude récents sont multimodaux : ils analysent l'image dans la même fenêtre de contexte que le texte. Claude Code lit le contenu d'une capture — texte affiché, disposition des éléments, couleurs, messages d'erreur — et s'en sert pour écrire ou corriger du code. Vous pouvez coller l'image, la glisser-déposer, ou référencer son chemin dans l'invite.

Quels formats d'image sont pris en charge ?

Claude Code accepte les formats d'image courants : PNG, JPEG et WebP. Le plus simple est de coller une capture depuis le presse-papiers ou de fournir le chemin du fichier dans votre invite. Pour une bonne analyse, privilégiez des images nettes et bien cadrées plutôt que des captures floues ou fortement compressées.

Comment coller une image dans le terminal Claude Code ?

Faites une capture (sur macOS, Cmd + Ctrl + Maj + 4 la copie dans le presse-papiers ; sur Windows, Win + Maj + S), puis collez-la dans l'invite. Selon le terminal, le raccourci est souvent Ctrl + V même sur Mac. Vous pouvez aussi glisser-déposer le fichier dans la fenêtre, ou simplement indiquer le chemin de l'image dans votre demande.

Claude Code peut-il transformer une maquette Figma en code ?

Oui, de deux façons. En exportant la maquette en PNG et en la fournissant à l'agent (rapide, mais l'estimation visuelle reste approximative), ou en connectant le serveur MCP de Figma à Claude Code, ce qui donne accès aux données structurées du design (couleurs, espacements, variables) pour un résultat bien plus fidèle. Le MCP est recommandé dès que la précision compte.

Les images que j'envoie sont-elles confidentielles ?

L'image est transmise à l'API Claude pour être analysée, comme votre code l'est déjà. Évitez donc d'envoyer des captures contenant des secrets (clés d'API, mots de passe, données personnelles) : floutez ou recadrez avant. Pour des contextes sensibles, respectez la politique de gouvernance des données de votre organisation.

Faut-il un abonnement particulier pour utiliser la vision ?

Non, la capacité de vision est intégrée aux modèles multimodaux qui équipent Claude Code. Tant que vous utilisez un modèle récent de la famille Claude 4.x, l'analyse d'images fonctionne sans configuration supplémentaire. Seul point d'attention : les images consomment des tokens de contexte, ce qui peut compter sur les longues sessions.

Claude Code et les Images : Analyser Captures d'Écran et Coder des Maquettes (2026)