Cursor lance un éditeur visuel pour navigateur : intégration transparente du design et du code. Cursor a officiellement lancé son « Éditeur visuel pour navigateur », intégré au navigateur Cursor. Il unifie les applications web, les bases de code et les fonctionnalités d'édition visuelle dans une seule fenêtre, permettant aux développeurs de manipuler et de modifier directement les éléments d'interface grâce à des infobulles intuitives de type glisser-déposer et clic-recherche, comblant ainsi le fossé entre les idées de conception et l'implémentation du code. Fonctionnalités principales et principe de fonctionnement : Réorganisation de la mise en page par glisser-déposer : Les utilisateurs peuvent glisser-déposer directement des éléments sur l’arbre DOM rendu pour modifier l’ordre des boutons, faire pivoter des zones ou tester des mises en page en grille. L’agent IA localise automatiquement les composants concernés et met à jour le code sous-jacent, ce qui élimine le besoin d’écrire manuellement du CSS ou du JSX. • État du composant de test : Pour les applications construites avec des frameworks tels que React, la barre latérale affichera les propriétés du composant en temps réel, permettant aux utilisateurs de basculer rapidement entre différents états et de les vérifier grâce à des commandes interactives. • Ajustements des attributs visuels : La barre latérale intègre des outils tels que des curseurs, des sélecteurs de couleurs et des jetons de système de conception, permettant un ajustement précis du style en temps réel. Par exemple, les utilisateurs peuvent utiliser le sélecteur de couleurs en temps réel pour modifier les couleurs, ajuster la mise en page (grille/boîte flexible) ou optimiser la typographie. Toutes les modifications sont synchronisées avec le code source par l’agent d’IA. • Messages de modification par clic : Après avoir cliqué sur un élément d’interface, l’utilisateur peut décrire la modification souhaitée en langage naturel (par exemple : « agrandir », « mettre en rouge » ou « inverser l’ordre »). L’agent IA traite plusieurs messages simultanément et applique la mise à jour en temps réel, en quelques secondes. Cette interaction par « clic et sélection » rend le processus de modification plus fluide, comme une conversation avec un concepteur. Ces fonctionnalités simplifient le processus de conception et de codage : à partir d’une vue rendue, des agents d’IA modifient le code par glisser-déposer ou via des invites, et enfin, le code s’affiche en temps réel dans le navigateur. Cette approche réduit les contraintes liées aux mécanismes d’exécution sur la créativité, permettant aux développeurs d’exprimer leurs intentions avec plus de précision. Avantages : L’éditeur visuel intégrant l’IA améliore considérablement l’efficacité du développement, notamment pour les développeurs front-end et full-stack. Il transforme la logique abstraite du code en opérations d’interface concrètes, permettant aux utilisateurs de mieux exprimer leurs idées et d’accélérer ainsi le cycle d’itération. L’IA du curseur est au cœur du système : l’agent gère non seulement les mises à jour du code, mais prend également en charge l’exécution parallèle multitâche, garantissant ainsi la sécurité et la réversibilité des modifications. Par exemple, « vous pouvez cliquer sur un élément et dire “Agrandissez-le”, tout en demandant simultanément à un autre de “Le rendre rouge” et à un troisième d’“Inverser l’ordre”. Les agents fonctionnent en parallèle et les modifications sont prises en compte en quelques secondes. » Ceci incarne la vision de Cursor pour un avenir où « les pensées se transforment directement en code ». Blog officiel de Cursor
