Glassmorphism vs neo-brutalism en Lovable

Elegir un tema de diseño en Lovable define la personalidad de tu app y la experiencia de tus usuarios. Aquí verás cómo aplicar glassmorphism y neo-brutalism paso a paso, qué prompts funcionan mejor y por qué conviene fijar el estilo antes de construir el resto del producto.

¿Qué son glassmorphism y neo-brutalism y cuándo conviene usarlos?

Los temas de diseño no son decoración: comunican tono y posicionamiento. Cada uno responde a un perfil de usuario distinto, así que la elección depende del tipo de app que estés creando.

El glassmorphism es un estilo que ha dominado los últimos años en web apps. La interfaz se ve como una pieza de vidrio, con fondos borrosos que dejan ver elementos detrás. Funciona bien cuando quieres un acabado limpio, moderno y elegante.

El neo-brutalism, en cambio, es más cartoon y llamativo. Usa líneas gruesas y colores brillantes para lograr un look único y expresivo. Encaja en productos que buscan personalidad fuerte, como plataformas cripto o apps con identidad bold.

¿Qué es glassmorphism? Es un estilo de UI donde los componentes parecen vidrio translúcido sobre fondos borrosos con color. Necesitas elementos de fondo con color para que el efecto se note.

¿Cómo aplicar glassmorphism en Lovable con un buen prompt?

La clave está en ser específico. No basta con pedir el estilo, también hay que indicar los elementos de fondo que harán que el efecto se note [01:25].

El prompt usado en la clase incluyó tres instrucciones claras dentro del dashboard:

• Convertir todos los componentes a un estilo glassmorphism.
• Utilizar un círculo grande con gradiente borroso de fondo para crear efectos detrás del vidrio.
• Hacer refactor de todos los componentes del dashboard para seguir el nuevo tema.

La palabra refactor es clave: significa rehacer algo, y le indica al modelo que reescriba los componentes existentes en lugar de solo añadir capas encima [02:05]. Tras el primer prompt, Lovable modificó el index CSS para dejar el estilo disponible en toda la app, pero los cambios visuales fueron mínimos.

¿Qué hacer cuando Lovable dice que aplicó cambios pero no se ven?

Esto pasa con frecuencia. La solución que mostró la clase fue tomar un screenshot de la pantalla y pegarlo dentro del prompt junto con la instrucción [03:30]. Así el LLM puede ver lo que está pasando y entender qué está mal.

El segundo prompt fue más quirúrgico: pedir que las cards que envuelven la galería de fotos y el photo dropper dejaran de ser blancas y se volvieran translúcidas, y añadir círculos grandes de colores borrosos al fondo del dashboard. Esa combinación de remover lo opaco y sumar color al fondo es lo que hace que el glassmorphism realmente se note.

¿Por qué a veces Lovable no aplica bien un cambio de diseño? Porque trabaja sin contexto visual. Pegar un screenshot dentro del prompt le da información directa de qué está fallando y suele resolver el problema en una iteración.

¿Cómo cambiar a neo-brutalism y por qué fijar el tema desde el inicio?

El mismo flujo aplica para cambiar a neo-brutalism. La instrucción fue replicar los cambios anteriores, pero pidiendo un efecto neo-brutalism en toda la UI [04:40]. Aquí ocurrió un detalle revelador: por error se escribió neon brutalism en lugar de neo-brutalism. Lovable interpretó literalmente, añadió brillos y animaciones, y entregó una estética muy neón que igual funcionaría para una plataforma cripto.

Ese desliz confirma una regla básica al construir con IA: el modelo sigue tus palabras. La precisión del prompt define el resultado.

¿Por qué bloquear el estilo antes de construir el resto?

Uno de los aprendizajes más prácticos de la clase es no dejar el cambio de tema para el final [04:55]. Cuando un proyecto ya está grande, modificar el sistema de diseño obliga a Lovable a tocar muchísimo código de una sola vez, y ahí es donde más falla.

La recomendación concreta:

• Define tu style guide y tu tema antes de empezar a construir features.
• Aplica los cambios de diseño en pasos pequeños, no en bloques masivos.
• Itera con prompts específicos en lugar de pedidos amplios como "no funciona".

El ejercicio de la clase también dejó claro el valor del prompting iterativo: ajustar, ver resultado, capturar pantalla, volver a ajustar. Ese ciclo es lo que separa una UI mediocre de una que se siente intencional.

En la próxima clase entra 21st Dev, una herramienta para usar componentes personalizados de la web y llevar la experiencia visual mucho más lejos. ¿Qué tema vas a probar primero en tu proyecto, glassmorphism o neo-brutalism? Cuéntalo en los comentarios.