Sketch : dessiner, annoter, envoyer un retour visuel à votre agent IA

Sketch :
dessinez-le, et l'agent voit ce que vous voulez dire

Sketch est un canvas de dessin intégré directement au composer de l'agent IA. Ouvrez un canvas vierge pour croquer une maquette ou un schéma, ou ouvrez une capture d'écran pour l'annoter. Entourez le bug, tracez une flèche, surlignez la zone, ajoutez une note. Le dessin est joint à votre message et envoyé à votre agent de code IA.

Un dessin vaut mille mots, et c'est encore plus vrai pour un agent IA. Au lieu d'écrire 'le bouton en haut à droite de la modale est trop collé au bord', vous l'entourez. Le croquis arrive à côté de votre prompt, l'agent reçoit le retour visuel d'un coup, et vous n'avez jamais quitté le terminal.

Sketch en action : ouvrez le canvas depuis le composer, entourez le bug visuel sur une capture, joignez le dessin, envoyez-le à l'agent.

Voici le problème que Sketch résout. Vous faites du vibe coding avec un agent IA et quelque chose cloche à l'écran. Une card déborde, un bouton est décalé de quelques pixels, l'espacement d'une ligne est cassé. Pour que l'agent corrige, vous devez décrire le problème visuel avec des mots. 'La deuxième card de la colonne du milieu, celle avec l'avatar, son padding est trop serré à droite.' Vous écrivez trois phrases, l'agent devine, il corrige le mauvais élément, vous réécrivez trois phrases.

Sketch supprime la devinette. Vous prenez une capture d'écran, vous l'ouvrez dans le canvas Sketch, vous tracez un cercle rouge autour de la card cassée, vous ajoutez une flèche et le mot 'trop serré ici', et vous joignez le tout à votre message. L'agent n'interprète plus un paragraphe. Il regarde le dessin. Le retour visuel n'est pas ambigu, parce qu'il est visuel.

Sketch marche aussi dans l'autre sens. Partez d'un canvas vierge et croquez ce que vous voulez avant que l'agent ne le construise : une maquette rapide d'un écran, un wireframe d'une mise en page, un schéma d'un flux. Un croquis à main levée cadre l'agent mieux qu'un mur de texte. Vous dessinez le prototype, l'agent le code.

AgentsRoom Sketch : le canvas de dessin ouvert par-dessus le composer de l'agent, avec une capture d'écran annotée d'un cercle et d'une flèche avant d'être envoyée à l'agent de code IA

Le canvas Sketch ouvert depuis le composer : annotez une capture d'écran, dessinez des formes et des flèches, puis joignez le dessin au message envoyé à votre agent.

Pourquoi Sketch a sa place dans votre workflow d'agent

La précision. Un cercle sur une capture pointe un élément exact. Une phrase pointe une supposition. Quand vous dessinez le problème, l'agent corrige la chose que vous vouliez vraiment, pas celle d'à côté. Fini les 'non, l'autre bouton, celui d'en dessous'.

La vitesse. Tracer un rectangle autour d'une zone prend trois secondes. Décrire cette même zone avec des mots prend trois phrases, et les phrases restent ambiguës. Sketch fait passer l'annotation d'un bug visuel de la corvée au réflexe.

L'expression. Certaines idées sont des formes, pas des phrases. Une mise en page, un flux, un écran. Avec Sketch vous dessinez la maquette ou le schéma directement, à main levée ou avec des formes et des flèches, et vous donnez le dessin à l'agent comme spécification.

Le flow. Sketch vit dans le composer. Vous n'ouvrez pas une appli de dessin séparée, vous n'exportez pas de fichier, vous ne glissez rien. Le dessin et votre prompt écrit voyagent ensemble dans le même message, donc l'agent reçoit tout le contexte d'un coup.

Comment Sketch fonctionne, de bout en bout

Du bouton Sketch dans le composer jusqu'à un dessin joint au message de l'agent.

01

Ouvrir Sketch depuis le composer

Chaque composer d'agent a un bouton Sketch. Cliquez dessus et un canvas de dessin plein écran s'ouvre, prêt à l'emploi, avec l'outil rectangle déjà actif pour que vous puissiez encadrer immédiatement.

02

Dessiner sur un canvas vierge, ou annoter une image

Partez d'un canvas vierge pour croquer une maquette, un wireframe ou un schéma. Ou ouvrez une image existante : déposez une capture d'écran dans le composer, puis cliquez le crayon sur sa vignette (ou Annoter dans la preview de fichier) pour dessiner par-dessus.

03

Dessiner, entourer, flécher, surligner, écrire

Le canvas vous donne le tracé à main levée, les rectangles, les ellipses, les flèches, les lignes et le texte. Entourez un élément cassé, pointez une flèche dessus, surlignez une zone, écrivez une note à côté. Tout ce qui rend le retour visuel évident.

04

Joindre le dessin à votre message

Cliquez sur Joindre au message. Le canvas est exporté en PNG et ajouté en vignette dans le composer, exactement comme un fichier déposé. Quand vous annotez une image existante, la version annotée remplace la vignette d'origine, donc l'agent ne reçoit jamais les deux.

05

L'envoyer à l'agent

Écrivez votre prompt comme d'habitude et envoyez. Le PNG est joint au message via le même pipeline que n'importe quel autre fichier. Le dessin et votre texte arrivent à l'agent ensemble, en un seul tour.

06

L'agent lit le dessin

Votre agent de code IA reçoit le croquis comme une image jointe. Tant que son modèle gère l'entrée image, il voit exactement ce que vous avez entouré, fléché et surligné, et il agit sur le retour visuel au lieu d'analyser une description.

Deux façons d'utiliser Sketch

Partir de rien, ou dessiner par-dessus ce qui existe déjà.

Canvas vierge : croquer une maquette

Ouvrez un canvas vide et dessinez ce que vous voulez que l'agent construise. Une maquette rapide d'un écran, un wireframe d'une mise en page, un prototype d'un composant, un schéma d'un flux de données. Tracés à main levée, boîtes, flèches et labels texte. Un croquis à main levée est une spécification que l'agent peut suivre sans que vous écriviez un seul paragraphe de description d'interface.

Annoter : dessiner sur une capture

Chargez une capture d'écran ou n'importe quelle image dans le canvas et marquez-la. Entourez l'élément mal aligné, tracez une flèche vers le débordement, surlignez la mauvaise couleur, écrivez 'corriger ça' à côté du bug. Le canvas Sketch s'ouvre avec votre image en calque de fond, vous dessinez par-dessus, et la capture annotée part directement à l'agent comme retour visuel.

Ce qu'est vraiment Sketch

Sketch est un canvas de dessin complet intégré à l'application desktop AgentsRoom, ouvert depuis le composer de n'importe quel agent IA. Ce n'est pas un visualiseur de capture avec un marqueur par-dessus. Vous avez de vrais outils de dessin : stylo à main levée, rectangles, ellipses, flèches, lignes et texte, la boîte à outils qu'on attend d'une vraie surface de croquis.

Le canvas tourne en deux modes. Le mode vierge vous donne une surface vide pour les maquettes, les wireframes et les schémas. Le mode annotation charge une image existante en fond et vous laisse dessiner par-dessus. Vous atteignez le mode annotation depuis la vignette de n'importe quelle image déjà jointe au composer, ou depuis le bouton Annoter dans la preview de fichier.

Quand vous joignez le dessin, Sketch exporte le canvas en PNG sur fond blanc pour que chaque tracé reste lisible, puis dépose le fichier dans le tray de pièces jointes du composer. De là, le dessin suit le chemin normal : il part avec votre prompt et est envoyé à l'agent comme une image. Sketch n'ajoute aucun nouveau mécanisme d'envoi, il se branche sur celui qui existe déjà.

Tout reste sur votre machine. Les croquis sont sauvegardés localement sur le disque et ne sont pas commités dans votre dépôt ni envoyés à un service tiers. Ils sont transitoires par conception : un dessin est du contexte pour un message, pas un fichier à gérer. Sketch est local, privé et agnostique au fournisseur : il fonctionne avec n'importe quel agent dont le modèle accepte une image, donc les configurations Claude Code et Codex profitent du même flux dessin-vers-agent.

Ce que les gens dessinent avec Sketch

Trois usages qui font du dessin la façon la plus rapide de parler à un agent.

Signaler un bug visuel

Capturez l'interface cassée, entourez l'élément, fléchez le débordement, surlignez le mauvais espacement. L'agent voit le bug visuel au lieu de décoder votre description. La façon la plus rapide de signaler une régression d'interface à un agent IA.

Croquer une maquette ou un wireframe

Dessinez l'écran avant que l'agent ne le construise. Un wireframe rapide, un croquis de mise en page, une maquette basse fidélité d'un composant. Donnez le dessin à l'agent comme brief et laissez-le transformer votre croquis en code.

Dessiner un schéma ou un flux

Certaines explications sont des schémas. Un flux de données, une machine à états, la structure d'une page, comment deux composants dialoguent. Croquez-le avec des boîtes et des flèches et envoyez le schéma à l'agent comme contexte.

Le décrire avec des mots ou le dessiner

Même retour visuel, même agent. Un chemin est lent et ambigu, l'autre est un croquis.

Sans Sketch

  • : Vous décrivez le problème visuel avec des mots en espérant que l'agent imagine la même chose.
  • : Vous écrivez trois phrases pour pointer un élément, et c'est encore ambigu.
  • : Pour dessiner une maquette vous ouvrez une appli séparée, exportez un fichier, puis le glissez dans le composer.
  • : Le changement de contexte casse votre flow et la conversation avec l'agent.
  • : L'agent corrige le mauvais élément, vous réexpliquez, la boucle s'éternise.

Avec Sketch

  • : Vous entourez l'élément sur une capture et le retour n'est pas ambigu.
  • : Un dessin remplace trois phrases de description, en trois secondes.
  • : Le canvas est dans le composer : pas d'appli séparée, pas d'export, pas de glisser-déposer.
  • : Vous ne quittez jamais le terminal et ne cassez jamais le fil avec l'agent.
  • : L'agent voit exactement ce que vous vouliez dire et le corrige du premier coup.

Sketch est le plus court chemin entre un problème visuel et un agent IA qui le comprend.

Local et privé
Vos croquis sont sauvegardés sur votre propre machine. Rien n'est commité dans votre dépôt, rien n'est envoyé à un service de dessin tiers.
Fonctionne avec tous les fournisseurs
Sketch joint une simple image PNG. N'importe quel agent IA dont le modèle accepte l'entrée image peut la lire : Claude Code, Codex et au-delà.
Aucun changement de contexte
Le canvas s'ouvre depuis le composer et le dessin revient dans le composer. Vous restez dans le terminal, et la conversation avec l'agent ne casse jamais.

FAQ

Qu'est-ce que Sketch dans AgentsRoom ?

Sketch est un canvas de dessin intégré au composer de l'agent IA. Vous l'ouvrez depuis le composer, vous dessinez un croquis sur un canvas vierge ou vous annotez une capture d'écran existante, et le dessin est exporté en PNG et joint au message que vous envoyez à votre agent de code IA. Le retour visuel devient quelque chose que vous dessinez au lieu de quelque chose que vous décrivez.

Comment envoyer un dessin à un agent IA ?

Cliquez le bouton Sketch dans le composer de l'agent, dessinez sur le canvas, puis cliquez Joindre au message. Le dessin devient une vignette PNG dans le composer. Écrivez votre prompt et envoyez : le croquis est joint au message et arrive à l'agent en même temps que votre texte.

Puis-je annoter une capture d'écran ?

Oui. Déposez une capture d'écran dans le composer, puis cliquez le crayon sur sa vignette, ou ouvrez la preview de fichier et cliquez Annoter. Le canvas Sketch s'ouvre avec votre capture en calque de fond pour que vous dessiniez par-dessus : entourez un bug, ajoutez une flèche, surlignez une zone, écrivez une note. La capture annotée remplace l'originale quand vous la joignez.

Que puis-je dessiner avec Sketch ?

Le canvas vous donne le tracé à main levée, les rectangles, les ellipses, les flèches, les lignes et le texte. Vous pouvez croquer une maquette, dessiner un wireframe, poser un schéma, ou marquer une capture avec des cercles, des flèches et des surlignages. L'outil rectangle est actif par défaut pour que vous puissiez encadrer un élément dès l'ouverture du canvas.

L'agent IA voit-il vraiment mon croquis ?

Le dessin est joint à votre message comme une image PNG. Tant que le modèle de l'agent gère l'entrée image, il voit le croquis et agit dessus. Claude et les modèles de la classe GPT-4 qui font tourner Claude Code et Codex lisent les images, donc l'agent reçoit votre retour visuel directement.

Quels agents et fournisseurs fonctionnent avec Sketch ?

Sketch joint une image PNG standard, il est donc agnostique au fournisseur. N'importe quel agent dont le modèle accepte une entrée image fonctionne : Claude Code, Codex et les autres CLI qu'AgentsRoom supporte. Il n'y a aucune configuration spécifique à un fournisseur.

Ai-je besoin d'une appli de dessin ou d'un whiteboard séparé ?

Non, et c'est tout l'intérêt de Sketch. Le canvas de dessin est dans le composer. Vous n'ouvrez pas Excalidraw, Figma ou un annotateur de captures dans une autre fenêtre, vous n'exportez pas de fichier, vous ne le reglissez pas. Sketch garde toute la boucle dessiner-puis-envoyer dans le terminal.

Où sont sauvegardés mes croquis ? Sont-ils privés ?

Les croquis sont sauvegardés localement sur votre propre machine. Ils ne sont pas commités dans votre dépôt git et pas envoyés à un service tiers. Ils sont transitoires : un croquis est du contexte pour un message, et les vieux croquis sont nettoyés automatiquement.

Puis-je rééditer ou réannoter un croquis ?

Oui. N'importe quelle image dans le composer, y compris une capture que vous avez déjà annotée, peut être rouverte dans le canvas Sketch pour dessiner dessus à nouveau. Quand vous joignez la nouvelle version, elle remplace la vignette précédente, donc l'agent ne reçoit jamais deux fois la même image.

Pourquoi dessiner un bug plutôt que le décrire ?

Parce qu'une description est une supposition et un dessin n'en est pas une. Quand vous écrivez 'le bouton en haut à droite est mal aligné', l'agent doit reconstruire l'écran dans sa tête. Quand vous entourez le bouton sur une capture, il n'y a rien à reconstruire. Un dessin vaut mille mots, et pour un retour visuel à un agent IA il vaut aussi plusieurs tours gâchés.

Va bien avec

Arrêtez de décrire le bug. Dessinez-le.

Téléchargez AgentsRoom et utilisez Sketch : un canvas de dessin dans le composer de l'agent pour croquer des maquettes et annoter des captures d'écran, puis envoyer le dessin à votre agent de code IA sans jamais quitter le terminal.

GratuitTélécharger AgentsRoom

App companion : suivez vos agents en déplacement

Utilisez Claude, Codex, Antigravity CLI ou un autre fournisseur IA.

Installer l'extension
Chrome Web Store

Remontez bugs et demandes directement dans votre backlog public.

Aperçu d'AgentsRoom en action.

Multi-projets
Multi-provider
Multi-agents
Statut en direct
Diff & commit
App mobile
Aperçu live
Équipes d'agents
Tests navigateur
Dev pilotée par backlog
Bibliothèque de prompts
Bibliothèque de skills
Voir toutes les fonctionnalités