Design mode de Cursor para editar interfaces con IA

El design mode de Cursor te permite mejorar la interfaz gráfica de tu producto sin salir del editor, seleccionando componentes con un clic y usando imágenes de referencia para guiar los cambios de estilo. Es ideal para quienes construyen aplicaciones con IA y quieren iterar el diseño de forma visual y rápida.

La clase arranca con algo práctico: un prompt sencillo dentro de un nuevo agente para iniciar el proyecto y abrirlo en el navegador [00:10]. Y aquí viene lo interesante, porque no hace falta cambiar de ventana.

Qué es el browser embebido de Cursor y por qué importa

Cursor trae dentro del mismo editor su propio navegador, uno que corre sobre Chromium [00:26]. Cuando abres localhost:3000, ves tu aplicación funcionando a la derecha sin salir de la interfaz agéntica.

En el ejemplo, el sistema de login aparece funcional en la parte derecha mientras el agente sigue trabajando a la izquierda [00:38]. Esto elimina el ir y venir entre editor y navegador que normalmente rompe el flujo de trabajo.

¿Qué es el browser embebido de Cursor? Es un navegador basado en Chromium integrado dentro del editor. Te deja ver tu aplicación en localhost mientras el agente modifica el código, sin abrir una ventana externa.

Cómo usar una imagen de referencia para cambiar estilos

El primer paso para rediseñar tu interfaz es elegir un modelo que soporte imágenes o que sea multiagéntico. En la clase se usa Opus 4.8 junto a una imagen de referencia [00:48].

La imagen es un print screen del login de Platzi, elegido por sus colores [01:02]. El proceso es directo:

1. Arrastra la imagen hacia el chat.
2. Escribe el prompt: no me gustan los estilos, básate en la imagen adjunta y actualízalos.
3. Da clic en Open Files y observa los cambios en tiempo real desde el tab del navegador.

El resultado mejora bastante la interfaz, aunque todavía queda lejos del acabado deseado [01:35]. Por eso el siguiente paso es tomar el control fino de cada componente.

Cómo funciona el design mode para editar componentes

En la parte superior derecha del browser encontrarás un lápiz. Al darle clic entras al design mode, que te permite seleccionar cualquier parte de tu diseño [01:47].

Cuando seleccionas un elemento, por ejemplo un botón, se abre una conversación que adjunta ese componente específico [02:00]. Así puedes pedir cambios puntuales:

• Cambiar el color del botón pasando un valor hexadecimal.
• Ajustar el color del texto, de blanco a negro por contraste.
• Iterar cuantas veces necesites hasta lograr el hover y el estilo que buscas.

Un detalle clave del flujo: cuando inicias la conversación desde el design mode, la ventana de chat se mueve al chat principal de la izquierda, enviando el prompt con la referencia específica del componente [02:12].

¿Para qué sirve el design mode en Cursor? Sirve para seleccionar visualmente un componente y modificar su color, texto o estilo. El editor adjunta ese componente al chat, así el agente sabe exactamente qué cambiar.

Cómo actualizar el dashboard tras iniciar sesión

Una vez ajustado el botón, se hace login con las credenciales admin y demo123 [02:44]. El login funciona, pero el dashboard conserva los colores azules de la interfaz anterior.

Aquí aparece una capacidad interesante del contexto: al pedir actualizar el dashboard, el agente analiza que hay una sesión iniciada del lado derecho y entiende a qué parte de la web te refieres [03:05]. La interfaz se actualiza y luce mucho mejor.

El botón de cerrar sesión, sin embargo, queda muy oculto. En lugar de dar una instrucción técnica, el prompt solo describe el problema: el botón está muy oculto [03:32].

¿Necesito indicar el cambio exacto en el prompt? No siempre. Puedes describir el problema, como "el botón está muy oculto", y el agente deduce que falta contraste y lo hace más visible por su cuenta.

Esa es la parte poderosa: el agente interpreta que el botón no tiene contraste suficiente y lo hace más visible sin que le des el valor exacto.

Qué habilidades y conceptos practicas en esta clase

Más allá de los pasos, aquí entrenas varias competencias concretas de diseño asistido por IA.

• Modelos multiagénticos o con soporte de imágenes: usar Opus 4.8 para que la IA interprete una imagen de referencia [00:48].
• Prompting con contexto visual: arrastrar imágenes al chat para guiar la dirección de estilo [01:20].
• Valores hexadecimales: pasar colores exactos para botones y textos [02:12].
• Iteración de interfaz: refinar hover, contraste y colores en ciclos cortos [02:33].
• Design system: como técnica avanzada, desarrollar tu propio sistema de diseño [03:55].

El reto final es tuyo: usa el design mode para mejorar la interfaz de tu producto. Puedes apoyarte en imágenes de referencia, usar el selector para cambiar botones, colores, texto o fuentes, o dar el salto a crear tu propio design system.

¿Con qué imagen de referencia vas a empezar a rediseñar tu interfaz? Cuéntanos en los comentarios.