Nos entusiasma presentar un editor visual para Cursor Browser. Reúne tu aplicación web, tu base de código y potentes herramientas de edición visual, todo en la misma ventana. Puedes arrastrar elementos, inspeccionar componentes y props directamente, y describir cambios mientras apuntas y haces clic. Ahora, las interfaces de tu producto son más inmediatas e intuitivas, cerrando la brecha entre el diseño y el código.

#Reorganiza arrastrando y soltando

El editor visual te permite manipular directamente el diseño y la estructura de un sitio arrastrando y soltando elementos renderizados en el árbol DOM.

Esto unifica el diseño visual con el código. Puedes cambiar el orden de los botones, rotar secciones y probar distintas distribuciones de cuadrícula sin tener que cambiar de contexto. Una vez que el diseño visual coincida con lo que tenías pensado, pídele al Agente que lo aplique. El Agente localizará los componentes relevantes y actualizará el código subyacente por ti.

#Prueba directamente los estados de los componentes

Muchas aplicaciones modernas se desarrollan en React, donde los componentes tienen propiedades para controlar distintos estados del propio componente. El editor visual facilita mostrar estas props en la barra lateral para que puedas hacer cambios en las diferentes variantes de un componente.

#Ajusta propiedades con controles visuales

La barra lateral del editor visual te permite perfeccionar los estilos con deslizadores, paletas y tus propios tokens de color y sistema de diseño. Cada ajuste es totalmente interactivo: selectores de color en tiempo real que muestran una vista previa de tus elecciones, además de controles para reorganizar cuadrículas, diseños flexbox y tipografía con precisión.

#Señala y pide

El editor visual también te permite hacer clic en cualquier elemento de tu interfaz y describir lo que quieres cambiar. Puedes hacer clic en un elemento y decir: «hazlo más grande»; en otro, escribir: «ponlo en rojo»; y en un tercero: «intercambia su orden». Los agentes se ejecutan en paralelo y, en cuestión de segundos, tus cambios se reflejan en la interfaz.

#Subiendo en la jerarquía de abstracción

El nuevo editor visual de Cursor unifica tu trabajo entre diseño y código, ayudándote a articular mejor lo que quieres para que la ejecución no se vea limitada por los aspectos mecánicos.

Vemos un futuro en el que los agentes están aún más profundamente conectados con la creación de aplicaciones web y en el que las personas expresan sus ideas a través de interfaces que conectan el pensamiento con el código de forma más directa. Estas funcionalidades son un paso en esa dirección.

Consulta la documentación de Browser. Conoce todas las funciones nuevas en Cursor 2.2.