Cursor a lancé Design Mode : modifiez l'interface utilisateur avec des clics et des dessins, l'agent modifie le code

Cursor a lancé la version mise à jour de Design Mode — un mode où vous modifiez l'interface visuellement, directement dans le navigateur, et l'agent IA édite automatiquement le code source. L'idée est simple : effacer la limite entre ce que vous voyez à l'écran et ce que comprend l'agent. Au lieu d'une longue explication écrite, vous cliquez sur l'élément requis, dessinez sur la page ou dites à haute voix ce qui doit être changé.

Quatre façons de donner une tâche à l'agent

Cursor propose plusieurs façons intuitives de montrer à l'agent quels changements sont nécessaires :

• Cliquer sur un élément — vous sélectionnez un élément dans l'application en cours d'exécution, vous donnez un bref prompt, et l'agent trouve le code correspondant et l'édite
• Sélection multiple — vous sélectionnez plusieurs éléments à la fois, utile lorsque les modifications concernent les relations entre composants (aligner, uniformiser, supprimer la duplication)
• Dessiner sur la page — vous encerclez avec un marqueur la zone d'interface requise, et l'agent voit exactement la partie de l'écran sur laquelle vous avez pointé, en tenant compte du balisage et de l'animation
• Description vocale — vous décrivez la tâche par la voix, le système reconnaît la parole et envoie le prompt à l'agent

Sous le capot, le système transmet à l'agent deux ensembles d'informations. Le premier — les données techniques de l'élément : son xpath, le nom du composant, les attributs HTML, les styles CSS calculés et les données de l'arborescence des composants React/Vue. Le second — une capture d'écran de la page au moment où vous avez donné la commande. Ensemble, cela donne à l'agent le contexte complet pour une édition sans erreur.

Pourquoi cela accélère le développement

La modification de l'interface est toujours une chaîne de changements. Vous avez corrigé un composant, remarqué un problème d'espacement à proximité, réalisé que vous devez refaire un groupe entier de boutons. Dans un flux de travail normal, vous expliquez longtemps chaque tâche séparément. Design Mode vous permet d'envoyer une nouvelle tâche sans même attendre que l'agent termine la précédente.

Cursor utilise le modèle Composer 2.5 — il est spécialement optimisé pour les modifications rapides et précises de l'interface utilisateur. L'application se recharge en temps réel grâce au rechargement à chaud, donc vous voyez immédiatement le résultat des modifications. Cela permet à un seul développeur de faire des corrections d'interface utilisateur complexes plusieurs fois plus rapidement, sans rompre la concentration et l'état de flux.

L'idée clé est que le modèle doit être non seulement intelligent, mais aussi rapide. Si l'agent réfléchit à la tâche pendant une demi-minute, vous perdrez la concentration. Composer 2.5 donne une réponse presque instantanée, vous permettant de maintenir votre rythme de travail.

Ce que cela signifie pour le frontend

Design Mode transporte le paradigme classique de la communication de conception à l'ère de l'IA. Auparavant, les designers, les PM et les développeurs se pointaient des zones d'écran, dessinaient des flèches, écrivaient des annotations. Design Mode automatise cette partie : maintenant l'agent voit la même chose que vous et comprend les instructions par la vision, et non par le texte.

« L'avenir du développement est la capacité à naviguer entre un haut niveau d'abstraction et les détails de bas niveau, sans perdre l'état de flux », — l'approche de

Cursor envers Design Mode.

Pour l'entreprise, cela signifie que les tâches d'interface utilisateur peuvent être résolues plus rapidement et moins chèrement, en particulier pour les modifications itératives et les tests A/B. Le développeur peut se concentrer sur l'architecture, tandis que les routines CSS et mise en page vont à l'agent.

Ce que cela signifie

Le monde du développement se dirige vers un point où les outils permettent une transition fluide entre la stratégie (haut niveau) et la réalisation (bas niveau). Design Mode est une étape vers cela. Vous ne perdez pas le contrôle, vous gagnez en précision d'édition tout en conservant la vitesse. L'IA ne devient pas un remplacement du développeur, mais un outil qui rend son travail plus simple et plus rapide.