Nous sommes ravis de lancer un éditeur visuel pour le Cursor Browser. Il réunit votre application web, votre base de code et de puissants outils d’édition visuelle, le tout dans une seule et même fenêtre. Vous pouvez faire glisser des éléments, inspecter directement les composants et leurs props, et décrire des modifications en pointant et en cliquant. Les interfaces de votre produit deviennent ainsi plus immédiates et intuitives, ce qui réduit encore l’écart entre le design et le code.

#Réorganiser par glisser-déposer

L'éditeur visuel vous permet de manipuler directement la mise en page et la structure d'un site en faisant glisser et déposer les éléments rendus dans l'arbre DOM.

Cela unifie le design visuel et le code. Vous pouvez permuter l'ordre des boutons, faire pivoter des sections et tester différentes configurations de grille sans jamais avoir à changer de contexte. Une fois que le design visuel correspond à ce que vous aviez en tête, demandez à l'agent de l'appliquer. L'agent repérera les composants concernés et mettra à jour le code sous-jacent pour vous.

#Tester directement les états des composants

De nombreuses applications modernes sont développées avec React, où les composants disposent de propriétés pour contrôler différents états. L’éditeur visuel facilite l’affichage de ces props dans la barre latérale afin que vous puissiez modifier les différentes variantes d’un composant.

#Ajustez les propriétés avec des contrôles visuels

La barre latérale de l’éditeur visuel vous permet d’affiner les styles à l’aide de curseurs, de palettes, ainsi que de vos propres tokens de couleur et système de design. Chaque réglage est entièrement interactif : des sélecteurs de couleur en temps réel qui affichent un aperçu de vos choix, ainsi que des commandes pour réorganiser les grilles, les mises en page flexbox et la typographie avec précision.

#Pointer et formuler une instruction

L’éditeur visuel vous permet également de cliquer sur n’importe quel élément de votre interface et de décrire ce que vous voulez modifier. Vous pouvez cliquer sur un élément et dire : « agrandis cet élément », sur un autre demander : « mets-le en rouge », et sur un troisième taper : « inverse leur ordre ». Les agents s’exécutent en parallèle et, en quelques secondes, vos modifications sont appliquées.

#Monter dans la hiérarchie de l'abstraction

Le nouvel éditeur visuel de Cursor unifie votre travail entre le design et le code, vous aidant à mieux exprimer ce que vous voulez afin que l'exécution ne soit pas limitée par les contraintes techniques.

Nous envisageons un avenir où les agents seront encore plus étroitement liés à la création d’applications web, et où les humains exprimeront leurs idées via des interfaces qui relient plus directement la pensée au code. Ces fonctionnalités constituent un pas dans cette direction.

Consultez la documentation de Browser. Découvrez toutes les nouvelles fonctionnalités de Cursor 2.2.