Cursor lanza el editor visual del navegador: integración perfecta de diseño y código. Cursor ha lanzado oficialmente su "Editor Visual del Navegador", integrado en el navegador Cursor. Este editor unifica aplicaciones web, código fuente y funciones de edición visual en una sola ventana, permitiendo a los desarrolladores manipular y modificar directamente los elementos de la interfaz mediante intuitivas herramientas de arrastrar y soltar, clic y búsqueda, acortando la distancia entre las ideas de diseño y la implementación del código. Funcionalidad principal y principio de funcionamiento: Reorganización del diseño mediante arrastrar y soltar: Los usuarios pueden arrastrar y soltar elementos directamente en el árbol DOM renderizado para intercambiar el orden de los botones, rotar áreas o probar el diseño de la cuadrícula. El agente de IA localiza automáticamente los componentes relevantes y actualiza el código subyacente, eliminando la necesidad de escribir CSS o JSX manualmente. • Estado del componente de prueba: para aplicaciones creadas con marcos como React, la barra lateral mostrará las propiedades del componente en tiempo real, lo que permitirá a los usuarios cambiar y verificar rápidamente diferentes estados de variantes a través de controles interactivos. Ajustes de atributos visuales: La barra lateral integra herramientas como controles deslizantes, selectores de color y tokens del sistema de diseño, lo que permite ajustar el estilo en tiempo real. Por ejemplo, los usuarios pueden usar el selector de color en tiempo real para modificar colores, ajustar el diseño de cuadrículas o cuadros flexibles, u optimizar la tipografía. El agente de IA sincroniza todos los cambios con el código fuente. • Avisos de modificación con un clic: Tras hacer clic en un elemento de la interfaz, el usuario puede describir el cambio en lenguaje natural (como "hacerlo más grande", "hacerlo rojo" o "cambiar el orden"). El agente de IA procesa varios avisos en paralelo y aplica la actualización en tiempo real en cuestión de segundos. Esta interacción de "hacer clic y seleccionar" hace que el proceso de modificación se asemeje más a una conversación con un diseñador. Estas funciones optimizan el proceso de diseño y codificación: comienzan con una vista renderizada, dirigen a los agentes de IA a modificar el código mediante arrastrar y soltar o indicaciones, y finalmente previsualizan el código en tiempo real en el navegador. Este enfoque reduce las limitaciones de los mecanismos de ejecución a la creatividad, permitiendo a los desarrolladores expresar sus intenciones con mayor precisión. Beneficios: El editor visual con IA integrada mejora significativamente la eficiencia del desarrollo, especialmente para desarrolladores front-end y full-stack. Transforma la lógica abstracta del código en operaciones de interfaz tangibles, lo que ayuda a los usuarios a expresar mejor sus ideas y, por lo tanto, acelera el ciclo de iteración. Cursor AI es el motor principal: el agente no solo gestiona las actualizaciones de código, sino que también admite la ejecución paralela de múltiples tareas, lo que garantiza que los cambios sean seguros y reversibles. Por ejemplo, «Puedes hacer clic en un elemento y decir 'Agrandar', mientras que a otro le pides que lo agrande y a un tercero que cambie el orden. Los agentes se ejecutan en paralelo y los cambios se aplican en segundos». Esto refleja la visión de Cursor de un futuro donde «las ideas se convierten directamente en código». Blog oficial de Cursor
