Cursor Design Mode Annotate : désignez les éléments, l’agent modifie le code

Cursor Design Mode Annotate permet d’indiquer des modifications sur une page web en cours d’exécution et de transmettre la demande à un agent de programmation. Celui-ci reçoit les détails de l’élément et une capture d’écran avec vos instructions. Dans Cursor 3.24.18 ou ultérieur, ouvrez le navigateur d’Agents Window, puis choisissez Annotate ou appuyez sur Cmd/Ctrl + Shift + D. Pour plusieurs modifications liées, activez Batch edits afin de réunir les notes et de les envoyer ensemble.

Cette méthode convient lorsque vous voyez le problème, sans savoir quel composant React, quelle règle CSS ou quel modèle de page le contrôle. Elle permet aussi aux développeurs expérimentés de relier plus directement leurs observations visuelles au code source. L’agent doit toutefois comprendre la demande et modifier correctement le projet. Vérifiez donc les changements dans le code et le résultat affiché.

Où se trouve Annotate, et pourquoi ne vois-je qu’une icône de stylo ?

Annotate se trouve dans le navigateur intégré à Agents Window, dans Cursor. La version et l’interface utilisées déterminent le bouton affiché.

Procédez ainsi :

1. Ouvrez votre projet dans Cursor, puis ouvrez Agents Window.
2. Démarrez une session d’agent ou ouvrez une session existante. Ouvrez ensuite le navigateur qui affiche votre application en cours d’exécution.
3. Cliquez sur Annotate dans la barre du navigateur. Vous pouvez aussi donner le focus au navigateur, puis appuyer sur Cmd + Shift + D sous macOS ou Ctrl + Shift + D sous Windows et Linux.
4. Autre possibilité : ouvrez la palette de commandes et recherchez Toggle Design Mode.
5. Consultez la ligne d’indications en haut de la page pour connaître les gestes disponibles.

Selon la documentation officielle de Design Mode, Annotate est disponible à partir de Cursor 3.24.18.

Si vous voyez une icône de stylo nommée Design Mode, vérifiez d’abord votre version. Les versions antérieures utilisent ce bouton à la place du nouveau bouton Annotate. Mettez Cursor à jour pour retrouver l’interface Annotate décrite dans la documentation.

Deux autres situations expliquent un affichage différent. Avant la première ouverture de Design Mode, le bouton présente un aperçu Try Annotate avec une courte démonstration. Après la création de plus de cinq notes, le bouton n’affiche plus que son icône.

Pour quitter Design Mode, cliquez sur le bouton de sortie dans la ligne d’indications, utilisez à nouveau le raccourci ou appuyez sur Esc. Cette touche annule d’abord un tracé en cours, une modification de texte ou une note ouverte. Elle quitte le mode une fois ces interactions fermées.

La documentation publique de Cursor ne précise pas quels abonnements incluent Annotate et ne confirme pas de calendrier de déploiement pour tous les comptes. Une version compatible ne suffit donc pas à garantir que chaque compte dispose de la fonction.

Comment sélectionner des éléments, dessiner et modifier le CSS ?

Sélectionnez un élément lorsque vous savez quel composant doit changer. Délimitez une zone si le problème concerne l’espacement, l’alignement ou un ensemble plus large.

Sélectionner un ou plusieurs éléments

Cliquez sur un élément de l’application en cours d’exécution pour le sélectionner et ouvrir une note. Décrivez la modification dans cette note.

Prenons un tableau de bord SaaS avec un en-tête encombré, un champ de recherche et une rangée de boutons de filtrage. Sélectionnez le champ de recherche et saisissez :

Augmente la hauteur du champ de saisie et son espacement intérieur. Aligne verticalement son texte avec les boutons de filtrage. Conserve les couleurs actuelles.

L’élément sélectionné donne à l’agent une cible précise. Le texte de la note indique le résultat attendu.

Pour sélectionner plusieurs éléments concernés par une même modification, maintenez Shift et cliquez sur chacun. Par exemple, sélectionnez le champ de recherche et les boutons de filtrage. Demandez ensuite à l’agent de les aligner sur la même ligne de base et d’uniformiser leur hauteur.

La sélection multiple convient aux éléments qui doivent évoluer ensemble. Des notes distinctes sont généralement plus claires pour des modifications indépendantes ou des consignes différentes.

Délimiter une zone et dessiner sur la page

Faites glisser le pointeur sur la page pour délimiter une zone. Décrivez ensuite le changement et ajoutez des marques visuelles.

La ligne d’indications propose quatre outils :

• Draw : dessinez une forme ou tracez le contour d’une zone à revoir.
• Ellipse : entourez un élément ou un groupe d’éléments.
• Rectangle : encadrez une section de la page.
• Arrow : pointez vers la partie à modifier.

Maintenez Shift pendant le glissement pour limiter le mouvement à un axe. Maintenez Option sous macOS ou Alt sous Windows et Linux pour tracer le rectangle depuis son centre. Appuyez sur Cmd/Ctrl + Z pour annuler un tracé.

Supposons qu’une carte de synthèse soit trop proche d’un graphique. Encadrez la zone entre les deux, puis ajoutez cette note :

Ajoute un espacement vertical de 24px entre les cartes de synthèse et le graphique. Conserve les dimensions actuelles du graphique et l’adaptation de la mise en page aux tailles d’écran.

Le dessin situe la demande. Le texte explique le changement attendu et les contraintes à respecter.

Modifier directement le texte affiché

Double-cliquez sur un élément textuel pour modifier son contenu sur la page. Appuyez sur Return ou Enter pour enregistrer la modification, ou sur Esc pour l’annuler.

Par exemple, remplacez directement le titre « Usage Overview » par « API Usage » dans le navigateur. Il n’est pas nécessaire de décrire séparément ce remplacement.

Attention à la différence entre enregistrer et envoyer : les modifications de texte attendent toujours Send, même lorsque Batch edits est désactivé. Enregistrer le texte sur la page ne l’envoie pas immédiatement à l’agent.

Considérez cette saisie comme une proposition de modification du code, pas comme un changement permanent limité au navigateur. Cursor la transmet avec la note pour que l’agent puisse mettre à jour le projet.

Modifier les propriétés CSS dans l’inspecteur

Dans une note qui cible un seul élément, choisissez Edit CSS properties pour ouvrir son inspecteur CSS. Filtrez la liste, changez une valeur et envoyez les modifications CSS avec la note.

Cette méthode convient aux ajustements précis : espacement intérieur, taille de police, comportement de display ou positionnement. Vous pouvez définir directement la propriété plutôt que tout expliquer en langage naturel.

Vérifiez la page après l’application des changements par l’agent. La nouvelle valeur CSS peut interagir avec les styles existants, les règles de mise en page ou l’adaptation aux écrans. Examinez aussi les différences dans le code. Confirmez que l’agent a modifié le bon composant sans ajouter de changements étrangers à la demande.

Dicter une note

La saisie vocale devient disponible lorsqu’une note contient du texte ou des modifications CSS. Cliquez sur Dictate, ou maintenez le bouton pendant que vous parlez.

Vous pouvez associer les instructions vocales au dessin. Par exemple, entourez une bannière promotionnelle et demandez un texte plus court. Précisez que le bouton doit être aligné à droite et que les éléments doivent s’empiler verticalement sur mobile.

Relisez la note avant de l’envoyer. Les marques visuelles désignent la cible, tandis que le texte dicté décrit le résultat souhaité. Des consignes précises restent nécessaires, surtout lorsque plusieurs modifications concernent le même composant.

Quand faut-il activer Batch edits ?

Activez Batch edits pour réunir plusieurs modifications visuelles liées avant de demander leur réalisation. Laissez-le désactivé pour envoyer immédiatement une note d’élément ou de zone, puis examiner le résultat avant de poursuivre.

Le réglage est désactivé au départ. Il change la transmission des notes d’éléments et de zones, mais les modifications de texte attendent toujours Send.

Comportement	Batch edits désactivé	Batch edits activé
Notes d’éléments ou de zones	Envoyées individuellement	Accumulées sous forme de repères numérotés
Envoi des notes d’éléments ou de zones	Appuyez sur Return ou Enter dans une note pour l’envoyer immédiatement	Cliquez sur Send dans la barre pour envoyer toutes les notes en attente
Regroupement des messages	Chaque note est envoyée séparément	Les notes en attente partent dans un seul message
Modifications directes du texte	Attendent Send	Attendent également Send
Consultation des notes en attente	Consultez les modifications de texte en attente dans la liste Send lorsqu’elle est disponible	Consultez les notes accumulées dans la liste à côté de Send
Suppression des notes en attente	Utilisez Clear All pour les notes en attente, pas pour celles déjà envoyées	Utilisez Clear All pour supprimer les notes en attente

Distinguez les notes envoyées immédiatement des modifications de texte en attente. Avec Batch edits désactivé, Return ou Enter envoie aussitôt une note d’élément ou de zone. Une modification directe du texte reste en attente jusqu’à son envoi. Vous pouvez consulter ces modifications dans la liste Send ou supprimer les notes en attente avec Clear All.

Lorsque Batch edits est activé, un bouton Send avec le nombre de notes en attente remplace Annotate dans la barre. Vous pouvez vérifier les repères numérotés avant l’envoi. Envoyer toutes les notes en attente ferme aussi Design Mode.

Si vous quittez le mode sans envoyer toutes les notes, Send reste dans la barre jusqu’à leur envoi ou leur suppression.

Exemple : revoir une page de tarifs

Supposons que vous souhaitiez corriger trois problèmes sur une page de tarifs :

1. Le titre principal occupe trop d’espace vertical.
2. Le bouton d’action principal n’est pas aligné avec le prix.
3. Le tableau comparatif paraît trop serré sur les petits écrans.

Activez Batch edits, puis créez une note pour chaque problème.

Pour le titre, sélectionnez le texte et demandez une réduction de taille qui conserve la hiérarchie visuelle. Pour le bouton, sélectionnez-le avec le prix afin de montrer leur relation d’alignement. Pour le tableau, délimitez la zone concernée et décrivez la disposition souhaitée selon la taille de l’écran.

Avant l’envoi, vérifiez les repères numérotés. Assurez-vous que chaque note désigne le bon élément ou la bonne zone. Envoyez ensuite l’ensemble dans un seul message.

Cette approche convient lorsque les changements forment une tâche cohérente. L’agent peut examiner toutes les notes et tenir compte de leurs relations. Le regroupement ne garantit toutefois pas que le modèle appliquera correctement chaque instruction.

Si une modification dépend d’un résultat intermédiaire important, envoyez d’abord une note séparée. Examinez la page mise à jour avant de décider de la suite. Par exemple, changez la disposition générale de la page avant de demander un réglage fin des espacements entre composants.

Vous pouvez aussi appuyer sur Cmd/Ctrl + L dans une note ou pendant une modification de texte. Son contenu rejoint alors le champ de discussion, au lieu d’être envoyé ou conservé pour Send. Maintenez Option/Alt et cliquez sur un élément pour l’ajouter directement au champ de discussion. Si une note est déjà ouverte, ce même raccourci y ajoute l’élément.

Quel contexte l’agent reçoit-il réellement ?

Chaque note envoyée contient vos instructions, des informations structurées sur les éléments et une capture recadrée. Dans les applications React, Vue et Svelte prises en charge, elle inclut aussi des informations sur les composants. Ces éléments aident l’agent à retrouver le code source concerné.

Cursor décrit les informations suivantes pour chaque élément sélectionné :

Contexte	Ce que Cursor transmet	Utilité
Balise HTML	Nom de la balise de l’élément	Identifie le type d’élément
Attributs	id, classes et attributs de l’élément	Aide à distinguer la cible
Chemin du sélecteur	Chemin de type sélecteur CSS	Aide à localiser l’élément dans la page affichée
Texte visible	Les 200 premiers caractères du texte visible	Relie la sélection au contenu affiché
Géométrie	Dimensions et position de l’élément	Décrit son emplacement et sa taille
Styles calculés	Couleur, couleur de fond, taille et famille de police, display et position	Fournit des informations sur le rendu effectif
Contexte du composant	Nom et pile de composants dans React, Vue et Svelte	Aide à relier l’élément affiché au code source
Capture d’écran	Recadrage de l’élément ou de la zone marquée avec le dessin	Montre le contexte visuel du changement

Ces informations sont plus précises qu’une demande comme « améliore l’en-tête ». L’agent reçoit une cible, des propriétés de rendu, du texte visible et une image.

Ce contexte reste limité. La documentation ne promet ni un export complet du DOM, ni toute la feuille de styles, ni les styles calculés de chaque ancêtre. Elle ne promet pas non plus tout l’état de l’application ou une capture de la page entière. La pile de composants est disponible pour les frameworks cités, mais ne garantit pas l’identification du bon fichier source dans chaque projet.

Par exemple, sélectionner un bouton transmet son type, ses classes, ses dimensions, son texte et ses styles calculés. La capture peut montrer sa disposition à côté du prix. Dans une application React, les informations de composants peuvent aider l’agent à relier ce bouton à sa pile de composants.

Le même type de contexte est documenté pour Vue et Svelte. Cursor y inclut également le nom du composant et sa pile. La documentation ne garantit pas des résultats identiques pour la recherche du code source entre frameworks ou projets.

L’agent doit encore explorer le dépôt, comprendre l’implémentation environnante et décider comment modifier le code. Vérifiez les différences et la page en cours d’exécution une fois son travail terminé.

Cursor ne documente pas de formule de coût en tokens pour les captures et les métadonnées d’Annotate. Ne supposez pas qu’une note a un coût fixe, ni que l’envoi groupé réduit nécessairement l’utilisation totale du modèle. Batch edits change la manière d’envoyer les notes. Le coût réel dépend du travail de l’agent et de l’utilisation du modèle.

Comment vérifier les modifications de l’agent ?

Utilisez Annotate pour préciser la demande, puis vérifiez l’implémentation dans le projet et le résultat à l’écran.

Après l’envoi des notes :

1. Attendez que l’agent termine les modifications concernées.
2. Examinez les différences dans le code : changements hors sujet, sélecteurs incorrects et écarts par rapport aux conventions des composants.
3. Vérifiez la page après le rechargement à chaud, si votre serveur de développement le prend en charge.
4. Contrôlez à nouveau la disposition aux dimensions de fenêtre importantes pour votre application.
5. Testez les interactions et l’accessibilité lorsque c’est pertinent, notamment le focus clavier et la lisibilité du texte.

L’annonce de Cursor du 28 octobre 2026 indique qu’Annotate aide à examiner les designs à différentes tailles d’écran. La documentation publique de Design Mode fournie ne décrit pas de mécanisme de vérification automatique de l’adaptation aux écrans. Traitez donc ces contrôles comme une étape distincte, sauf si votre environnement propose une méthode d’automatisation documentée.

Pour un travail d’interface plus large, Inspo MCP permet d’apporter des références de design et des captures aux agents de programmation. Le besoin est différent : Annotate précise ce qu’il faut changer dans une interface en cours d’exécution. Les références aident à expliquer l’apparence recherchée.

Pour choisir une méthode de développement plus globale, consultez le comparatif Cursor et Codex en 2026. Il compare les modes de travail, les tarifs et l’utilisation à la demande.