Visual Editor es una nueva funcionalidad dentro del Navegador de Cursor que te permite editar aplicaciones web de forma visual mientras un agente de IA trabaja contigo para actualizar el código subyacente. Reúne tu aplicación web, tu base de código y las herramientas de edición visual en una sola ventana, cerrando la brecha entre el diseño y el desarrollo. Puedes arrastrar elementos, inspeccionar componentes y sus propiedades, y describir cambios señalando y haciendo clic, todo sin salir de tu flujo de trabajo.
El editor visual te permite manipular el diseño y la estructura de un sitio directamente, arrastrando y soltando elementos renderizados a través del árbol DOM. Puedes intercambiar el orden de los botones, rotar secciones y probar diferentes configuraciones de cuadrícula sin cambiar de contexto. Una vez que el diseño visual coincida con lo que tenías en mente, dile al agente que lo aplique: el agente localiza los componentes relevantes y actualiza el código subyacente por ti.
Las aplicaciones modernas construidas en React utilizan propiedades de componentes para controlar diferentes estados. El editor visual muestra estas propiedades en la barra lateral, facilitando el cambio entre variantes y viendo cómo se renderiza cada una. Esto te proporciona retroalimentación inmediata sobre cómo se comportan los componentes en diferentes condiciones.
La barra lateral ofrece deslizadores, paletas de colores y tus propios tokens del sistema de diseño para ajustar estilos con precisión. Cada modificación es completamente interactiva: los selectores de color en vivo previsualizan tus elecciones, y los controles te permiten reorganizar cuadrículas, diseños flexbox y tipografía con precisión. Los cambios aparecen instantáneamente en el navegador.
Haz clic en cualquier elemento de tu interfaz y describe lo que quieres cambiar. Puedes hacer clic en un elemento y decir "haz esto más grande", hacer clic en otro y pedir "pon esto rojo", y en un tercero escribir "intercambia su orden". Los agentes trabajan en paralelo y, en cuestión de segundos, tus cambios están en vivo.
"El editor visual unifica tu trabajo entre diseño y código, ayudándote a articular mejor lo que quieres para que la ejecución no esté limitada por la mecánica."
Esta es la idea central: en lugar de obligarte a traducir ideas visuales a código manualmente, Visual Editor te permite expresar cambios de forma natural mediante arrastrar y soltar, señalar y lenguaje natural. El agente se encarga de la traducción del código, para que te mantengas enfocado en la intención del diseño en lugar de los detalles de implementación. Es un paso hacia un futuro donde los agentes estén profundamente conectados con la construcción de aplicaciones, y los humanos expresen ideas a través de interfaces que conecten el pensamiento con el código de manera más directa.
Construyes aplicaciones web y quieres acelerar tu ciclo de iteración de interfaz de usuario. Si estás cansado de cambiar entre el navegador, el editor de código y las herramientas de diseño para hacer cambios simples de diseño o estilo, Visual Editor ofrece un enfoque unificado. Es especialmente valioso si trabajas con componentes de React y necesitas probar múltiples estados, o si colaboras con diseñadores que quieren ver los cambios aplicados en tiempo real.
Loading comments…
Creador
moonbyte
Visitar sitio web
cursor.com/blog/browser-visual-editor
Información del proyecto
Palabras clave del producto
