El chat es una interfaz para trabajar con agentes, pero el trabajo de UI suele ser espacial. Diseñadores, PM y desarrolladores de frontend suelen comunicarse mediante anotaciones que señalan elementos, regiones o el estado de la página.

Design Mode, que actualizamos hoy, es parte de cómo estamos acortando la distancia entre lo que ves y lo que el agente entiende. Te permite editar tu producto en contexto sin perder el flujo de trabajo.

Desde el Browser de Cursor, puedes hacer clic en cualquier elemento, dibujar sobre la página o describir el cambio por voz, y Cursor obtiene el contexto que necesita para editar el código mientras tú pasas al siguiente cambio.

Es una forma más rápida y sencilla de iterar cambios de diseño con agentes porque la instrucción ya no es solo una frase, sino que ahora puede incluir el elemento seleccionado, el código que hay detrás, el diseño circundante y las relaciones visuales de la página.

Eso acorta el ciclo entre detectar y editar. Puedes señalar la parte de la interfaz a la que te refieres sin salir del producto en ejecución, y seguir haciendo referencias sobre el propio producto mientras los agentes realizan las ediciones en el código subyacente.

#Señala, dibuja o narra el cambio

Design Mode te ofrece varias formas de expresar tu intención al agente. Puedes seleccionar un elemento, agregar varias referencias, dibujar sobre la interfaz o usar tu voz para describir el cambio.

La selección múltiple es útil cuando el cambio depende de la relación entre varios elementos. Puedes hacer referencia a dos componentes y pedirle al agente que haga que uno coincida con el otro, elimine contenido repetido o ajuste un grupo de componentes a la vez.

Dibujar es útil cuando el agente necesita saber a qué zona de la página se aplica la instrucción. Puedes rodear una sección recargada, delimitar una región o marcar parte de una página animada. La anotación queda sobre un fotograma congelado del viewport, para que el agente vea el estado exacto de la página al que estabas respondiendo.

En esta versión, también puedes narrar instrucciones con la voz, y hemos hecho que la selección sea más precisa y la experiencia más rápida. En conjunto, esto hace que las interacciones visuales en Design Mode se sientan más como parte de un flujo de edición normal.

Internamente, al seleccionar un elemento se agregan al contexto dos señales complementarias: la identidad del elemento (xpath, el componente, atributos, estilos calculados, props del fiber tree) y una captura de pantalla para aportar contexto espacial (diseño, elementos circundantes y el estado exacto de la página). Esto le da al agente exactamente lo que necesita para encontrar el origen y editar el código de forma eficiente.

#Adaptar el modelo al ritmo del trabajo

Cuando estás afinando una interfaz de usuario, una cadena de ediciones suele llevar a la siguiente. Ajustas un componente, notas el espaciado a su alrededor y luego ves cómo otro componente debería ajustarse para que quede acorde.

Design Mode te permite enviar esas ediciones en cuanto las detectas. Puedes señalar un elemento, describir el cambio, pasar a otra parte de la página y enviar otra edición antes de que la primera haya terminado. Design Mode te permite hacer varias cosas a la vez con más facilidad y hace posible gestionar varios subagentes.

Este flujo funciona mejor con un modelo capaz de hacer cambios de UI concretos con rapidez. Composer 2.5 destaca en esto porque es rápido y muy bueno en el trabajo de interfaz. A medida que los agentes terminan, la aplicación hace hot reload. Ves cómo los cambios aparecen en el producto en ejecución y sigues avanzando hasta que la interfaz queda como quieres.

Creemos que el futuro del desarrollo de software permitirá a los usuarios moverse sin fricciones entre niveles más altos de abstracción y detalles de más bajo nivel, mientras trabajan en estado de flujo cuando así lo deseen. Design Mode ofrece a los usuarios el control, la autonomía y las herramientas de edición de precisión que hacen eso posible.

Prueba Design Mode en la ventana de Agentes. Lee la documentación de Browser para obtener más información, o descarga Cursor para empezar.