Le chat est l’une des interfaces pour travailler avec des agents, mais le travail sur l’interface est souvent spatial. Les designers, PM et développeurs frontend communiquent souvent au moyen d’annotations qui pointent vers des éléments, des zones ou l’état de la page.

Design Mode, que nous mettons à jour aujourd’hui, s’inscrit dans notre effort pour réduire l’écart entre ce que vous voyez et ce que l’agent comprend. Il vous permet de modifier votre produit dans son contexte sans casser votre flux de travail.

Depuis le Browser de Cursor, vous pouvez cliquer sur n’importe quel élément, dessiner sur la page ou décrire la modification à la voix, et Cursor obtient le contexte dont il a besoin pour modifier le code pendant que vous passez à la modification suivante.

C’est une façon plus rapide et plus simple d’itérer sur des changements de design avec des agents, car l’instruction n’est plus seulement une phrase : elle peut aussi inclure l’élément sélectionné, le code qui le produit, la disposition autour de lui et les relations visuelles sur la page.

La boucle entre ce que vous repérez et ce que vous modifiez devient ainsi plus courte. Vous pouvez désigner précisément la partie de l’interface dont vous parlez sans quitter le produit en cours d’exécution, puis continuer à vous appuyer sur le produit lui-même comme référence pendant que les agents effectuent les modifications en arrière-plan.

#Pointez, dessinez ou expliquez la modification

Design Mode vous offre plusieurs façons d’indiquer votre intention à l’agent. Vous pouvez sélectionner un élément, ajouter plusieurs références, dessiner sur l’interface ou utiliser votre voix pour décrire la modification.

La sélection multiple est utile lorsque la modification dépend de la relation entre plusieurs éléments. Vous pouvez référencer deux composants et demander à l’agent d’aligner l’un sur l’autre, de supprimer du contenu répété ou d’ajuster ensemble un groupe de composants.

Le dessin est utile lorsque l’agent doit savoir à quelle zone de la page l’instruction s’applique. Vous pouvez entourer une section chargée, encadrer une zone ou marquer une partie d’une page animée. L’annotation se superpose à une image figée de la zone d’affichage, afin que l’agent voie l’état exact de la page auquel vous réagissiez.

Dans cette version, vous pouvez aussi dicter des instructions avec votre voix, et nous avons rendu le ciblage plus précis ainsi que l’expérience plus rapide. Au final, les interactions visuelles dans Design Mode s’intègrent davantage à une boucle d’édition normale.

En arrière-plan, sélectionner un élément ajoute au contexte deux signaux complémentaires : l’identité de l’élément (xpath, le composant, les attributs, les styles calculés, les props de l’arbre fiber) et une capture d’écran pour le contexte spatial (la disposition, les éléments environnants et l’état exact de la page). Cela donne à l’agent exactement ce dont il a besoin pour trouver la source et modifier le code efficacement.

#Accorder le modèle au rythme du travail

Lorsque vous peaufinez une interface utilisateur, une série de modifications en entraîne généralement une autre. Vous ajustez un composant, remarquez l’espacement qui l’entoure, puis voyez comment un autre composant devrait s’y accorder.

Design Mode vous permet d’envoyer ces modifications au fur et à mesure que vous les repérez. Vous pouvez pointer un élément, décrire la modification, passer à une autre partie de la page, puis envoyer une autre modification avant même que la première ne soit terminée. Design Mode facilite le travail sur plusieurs tâches à la fois et permet de gérer plusieurs sous-agents.

Ce mode de travail fonctionne mieux avec un modèle capable d’apporter rapidement des modifications ciblées à l’interface. Composer 2.5 excelle dans ce domaine, car il est à la fois rapide et très efficace pour le travail d’interface. À mesure que les agents terminent leur travail, l’application se met à jour à chaud. Vous voyez les changements apparaître dans le produit en cours d’exécution et continuez jusqu’à ce que l’interface vous semble correcte.

Nous pensons que l’avenir du développement logiciel permettra aux utilisateurs de passer en toute fluidité entre des niveaux d’abstraction plus élevés et des détails de plus bas niveau, tout en restant dans un état de flow lorsqu’ils le souhaitent. Design Mode offre aux utilisateurs le contrôle, l’autonomie et les outils d’édition de précision qui rendent cela possible.

Essayez Design Mode dans la fenêtre des agents. Consultez la documentation du Browser pour en savoir plus, ou téléchargez Cursor pour commencer.