Mode Design
Le mode Design vous permet de guider les agents à l’aide de prompts visuels. Dans le navigateur de la Fenêtre Agents, vous pouvez cliquer sur un élément, dessiner sur la page ou décrire une modification à la voix. Cursor recueille le contexte nécessaire et modifie le code pendant que vous passez à la modification suivante.
Le travail d’interface utilisateur est souvent spatial. Au lieu de décrire une modification dans une phrase, votre instruction peut inclure l’élément sélectionné, le code associé, la disposition environnante et les relations visuelles sur la page. Cela réduit l’écart entre le moment où vous repérez un problème et celui où vous le corrigez.
Cliquez sur un élément dans l’application en cours d’exécution, saisissez un prompt pour cet élément, puis laissez l’agent modifier le code.
Ouvrir le mode Design
Le mode Design se trouve dans le navigateur, au sein de la fenêtre Agents. Ouvrez le navigateur, puis activez le mode Design avec CmdCtrl + Shift + D. Utilisez le même raccourci pour le désactiver et revenir à la navigation normale.
Comment guider l’agent
Le mode Design vous offre plusieurs façons d’exprimer votre intention.
Sélectionner un élément
Cliquez sur un élément du produit en cours d’exécution pour le cibler. L’agent récupère l’élément et son code, ce qui vous permet de rédiger un prompt sur ce que vous voyez, sans quitter l’application.
Sélectionner plusieurs éléments
La sélection multiple est utile lorsque la modification dépend de la relation entre plusieurs éléments. Sélectionnez deux composants et demandez à l’Agent d’aligner l’un sur l’autre, de supprimer le contenu dupliqué ou d’ajuster un groupe dans son ensemble.
Sélectionnez plusieurs éléments et décrivez comment ils doivent évoluer ensemble.
Dessiner sur la page
Le dessin indique à l’agent à quelle zone de la page s’applique votre instruction. Entourez une section dense, encadrez une zone ou marquez une partie d’une page animée. L’annotation apparaît sur une image figée de la fenêtre d’affichage, afin que l’agent voie l’état exact de la page auquel vous réagissiez.
Décrire à la voix
Vous pouvez dicter vos instructions au lieu de les saisir. Le micro reste disponible pendant l’exécution des agents : vous pouvez ainsi mettre la modification suivante en file d’attente sans attendre.
Utilisez la saisie vocale et le dessin pour décrire une modification.
Raccourcis clavier
| Action | Raccourci |
|---|---|
| Activer/désactiver le mode Design | CmdCtrl + Shift + D |
| Sélectionner une zone | Shift + glisser-déposer |
| Ajouter un élément à la conversation | CmdCtrl + L |
| Ajouter un élément au champ de saisie | OptionAlt + cliquer |
Ce que voit l’agent
La sélection d’un élément ajoute deux signaux complémentaires au contexte :
- Identité de l’élément : le XPath, le composant, les attributs, les styles calculés et les props de l’arborescence Fiber. Cela aide l’agent à retrouver la source et à modifier le bon code.
- Une capture d’écran : la mise en page, les éléments environnants et l’état exact de la page. Cela fournit à l’agent un contexte spatial pour effectuer la modification.
Travailler dans le flux
Lorsque vous affinez une interface, une modification en entraîne généralement une autre. Vous ajustez un composant, remarquez l’espacement autour, puis constatez qu’un autre composant devrait s’aligner sur lui.
Le mode Design vous permet d’envoyer ces modifications dès que vous les repérez. Pointez un élément, décrivez la modification, passez à une autre partie de la page et envoyez-en une autre avant même que la première ne soit terminée. Cela facilite le multitâche et la gestion de plusieurs sous-agents à la fois. À mesure que les agents terminent, l’application se recharge à chaud et vos modifications apparaissent dans le produit en cours d’exécution.
Ce flux fonctionne mieux avec un modèle rapide et solide pour le travail sur les interfaces. Nous recommandons Composer 2.5.