L'éditeur visuel est une nouvelle fonctionnalité intégrée au navigateur Cursor qui vous permet de modifier visuellement des applications web pendant qu'un agent IA travaille à vos côtés pour mettre à jour le code sous-jacent. Il réunit votre application web, votre base de code et vos outils d'édition visuelle dans une seule fenêtre, comblant ainsi le fossé entre le design et le développement. Vous pouvez faire glisser des éléments, inspecter des composants et leurs propriétés, et décrire des modifications en pointant et en cliquant, le tout sans quitter votre flux de travail.
L'éditeur visuel vous permet de manipuler la mise en page et la structure d'un site directement en faisant glisser et en déposant des éléments rendus dans l'arborescence DOM. Vous pouvez échanger l'ordre des boutons, faire pivoter des sections et tester différentes configurations de grille sans jamais 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 localise les composants pertinents et met à jour le code sous-jacent pour vous.
Les applications modernes construites avec React utilisent des propriétés de composants pour contrôler différents états. L'éditeur visuel affiche ces propriétés dans la barre latérale, ce qui facilite le basculement entre les variantes et la visualisation du rendu de chacune. Cela vous donne un retour immédiat sur le comportement des composants dans différentes conditions.
La barre latérale propose des curseurs, des palettes de couleurs et vos propres jetons de système de design pour affiner les styles. Chaque ajustement est entièrement interactif : les sélecteurs de couleurs en direct prévisualisent vos choix, et les contrôles vous permettent de réorganiser les grilles, les mises en page flexbox et la typographie avec précision. Les modifications apparaissent instantanément dans le navigateur.
Cliquez sur n'importe quel élément de votre interface et décrivez ce que vous souhaitez modifier. Vous pouvez cliquer sur un élément et dire « agrandis celui-ci », cliquer sur un autre et demander « mets-le en rouge », et sur un troisième taper « échange leur ordre ». Les agents s'exécutent en parallèle, et en quelques secondes, vos modifications sont en ligne.
« L'éditeur visuel 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 la mécanique. »
C'est l'idée centrale : au lieu de vous forcer à traduire manuellement des idées visuelles en code, l'éditeur visuel vous permet d'exprimer des modifications naturellement par glisser-déposer, pointage et langage naturel. L'agent se charge de la traduction du code, vous permettant ainsi de rester concentré sur l'intention du design plutôt que sur les détails d'implémentation. C'est un pas vers un futur où les agents sont profondément connectés à la création d'applications, et où les humains expriment leurs idées à travers des interfaces qui relient plus directement la pensée au code.
Vous créez des applications web et souhaitez accélérer votre cycle d'itération d'interface utilisateur. Si vous en avez assez de basculer entre le navigateur, l'éditeur de code et les outils de design pour effectuer de simples modifications de mise en page ou de style, l'éditeur visuel offre une approche unifiée. Il est particulièrement utile si vous travaillez avec des composants React et devez tester plusieurs états, ou si vous collaborez avec des designers qui souhaitent voir les modifications appliquées en temps réel.
Loading comments…
Créateur
moonbyte
Visiter le site web
cursor.com/blog/browser-visual-editor
Infos du projet
Mots-clés du produit
