风格要配得上用途

El estilo debe coincidir con el propósito

Problema

La IA tiene una estética predeterminada al generar UI, aplicando lo mismo a todo:

• Tarjetas de vidrio esmerilado (backdrop-filter: blur() + blanco semitransparente)
• Sombras de neumorfismo (hundido/relieve)
• Degradados de púrpura a azul, botones, texto y bordes degradados
• Manchas de color borrosas sobre fondos oscuros
• box-shadow con brillo neón, que se agranda, eleva o rota al pasar el ratón
• Cada bloque es una tarjeta con bordes redondeados de 24px, con un emoji antes del título
• Textos como "✨ Impulsado por IA", "🚀 Comienza ahora"

Resultado: una herramienta de aprobación de gastos para finanzas o un visor de registros para operaciones parece un lanzador de juegos o una página de aterrizaje de criptomonedas. Los usuarios lo usan ocho horas al día, se ve recargado, es difícil encontrar cosas y da una impresión poco profesional y poco fiable.

También al revés: un pequeño juego para amigos, una ruleta de sorteo o un diario de mascotas se convierten en tablas grises con botones azules por defecto, sin ninguna gracia.

El estilo no es cuestión de "si se ve bonito", sino de "si es adecuado".

Primer paso: mirar lo que ya existe en el proyecto

Prioridad de mayor a menor:

1. Sistema de diseño / biblioteca de componentes / archivos de tema existentes (tailwind.config, theme.ts, variables CSS, enlaces de Figma, guías de marca): úsalos, no reinventes la rueda.
2. Páginas ya existentes en el proyecto: las nuevas páginas deben pertenecer a la misma familia.
3. Normas de la plataforma: aplicaciones nativas de Windows siguen Fluent/WinUI, macOS sigue HIG, Android sigue Material. Los materiales de la plataforma (como Mica/Acrylic en Windows 11) son legítimos cuando se usan en los lugares previstos por la plataforma (fondo de ventana, menús desplegables), no para dar desenfoque a cada tarjeta.
4. Si no hay nada de lo anterior, entonces decides tú según el contexto.

Segundo paso: evaluar el contexto

Observa estas señales:

Señal	Hacia la sobriedad	Hacia lo animado
¿Quién lo usa?	Empleados, profesionales, clientes de clientes	Jugadores ocasionales, amigos, niños, aficionados
¿Cómo se usa?	Largas horas diarias, repitiendo la misma tarea	Abierto de vez en cuando, para divertirse un rato
Contenido	Tablas, números, formularios, registros, código	Imágenes, personajes, historias, logros, interacciones
Coste del error	Alto: dinero, datos, contratos, producción	Bajo: solo repetir
Lo que el usuario quiere sentir	Fiable, eficiente, profesional, que no moleste	Divertido, sorprendente, con personalidad, que quiera compartir

Tercer paso: elegir la dirección según el contexto

Negocios / Productividad / Herramientas internas / Paneles de datos / Herramientas para desarrolladores

• Colores: predominantemente neutros (blanco, gris claro, gris oscuro), un color de acento para la acción principal y estados clave; los colores de estado (éxito/advertencia/error) tienen significado fijo, no se usan para decorar.
• Tipografía: fuente del sistema o una sans-serif madura; los números usan monoespaciada o font-variant-numeric: tabular-nums para alinear columnas.
• Densidad: densidad de información media a alta, filas de tabla compactas, el espacio en blanco sirve para agrupar, no para parecer "elegante".
• Decoración: casi ninguna. Esquinas ligeramente redondeadas (4–8px), bordes finos o sombras muy sutiles, sin degradados, brillos, vidrio esmerilado ni manchas de fondo.
• Animaciones: solo para feedback (carga, expansión, cambios de estado), 150–200 ms, sin animaciones de entrada, zoom al pasar el ratón ni parallax.
• Iconos: un conjunto de iconos lineales coherente (Lucide, Fluent Icons, Material Symbols), sin emojis.
• Textos: directos y concretos: "Guardar", "Exportar CSV", "3 registros pendientes de aprobación".

Entretenimiento / Juegos / Creatividad / Redes sociales / Infantil / Intereses personales

• Colores: pueden ser vivos, atrevidos, coloridos, memorables; pueden tener paletas temáticas, degradados, fondos ilustrados.
• Tipografía: los títulos pueden usar fuentes de exhibición con personalidad, pero el cuerpo debe seguir siendo legible.
• Decoración: se pueden usar ilustraciones, pegatinas, texturas, personajes, elementos dibujados a mano, pero deben encajar con el tema, no simplemente aplicar efectos "genéricos" llamativos. Un juego pixel art debe ser pixel art, un tema de cuento de hadas debe verse como un cuento, no un neón púrpura genérico.
• Animaciones: pueden ser más ricas: elásticas, con partículas, animaciones de celebración, sonido, que den una sensación de recompensa a las acciones.
• Textos: pueden tener tono, personalidad y humor.

Zona intermedia

Productos tipo herramienta para consumidores (contabilidad, tareas pendientes, calendario, registro de ejercicios), portafolios, páginas de aterrizaje de productos: tono sobrio, prioridad a la usabilidad, y añadir personalidad en algunos lugares (estados vacíos, momentos de finalización, color de marca, ilustraciones).

Animado no es igual a estilo predeterminado de IA. El vidrio esmerilado, los degradados púrpura-azul y el brillo neón, incluso en contextos de entretenimiento, siguen siendo "estilo IA genérico", no el estilo del producto. Un estilo animado bueno es temático.

Cuando no estés seguro: pregunta al usuario

Cuando el contexto no esté claro, o el usuario pueda tener varias opciones, pregunta antes de escribir. La pregunta debe ser concreta, dando direcciones para elegir, no "¿Qué estilo prefieres?":

✓ "¿Qué dirección prefieres para el estilo?
   A. Profesional y limpio: fondo claro, colores neutros, tablas compactas, como Linear / Notion
   B. Amable y relajado: más redondeado, colores suaves, con pocas ilustraciones, como la página de ajustes de Duolingo
   C. Con personalidad: colores y animaciones llamativos, adecuado para exposición o entretenimiento
   Si no estás seguro, haré la primera versión con la opción A."

Si el entorno lo permite, también puedes hacer dos o tres muestras (solo variaciones de color y tipografía de la misma interfaz) para que el usuario elija.

No preguntes cuando no sea necesario: si el usuario ya ha dicho el propósito ("para finanzas de la empresa"), el proyecto ya tiene un estilo, o la necesidad es obvia ("haz un Tetris"), hazlo según tu criterio y menciona la dirección elegida al final para que el usuario pueda corregir.

Cuarto paso: autoevaluación al terminar

Toma cada elemento decorativo de la interfaz y pregúntate: si lo quito, ¿qué pierde el usuario? Si la respuesta es "nada", y es una interfaz de herramienta, quítalo.

Revisa punto por punto:

• Busca en el código backdrop-filter, linear-gradient, box-shadow con colores brillantes, animation, emojis: ¿cada uno tiene un propósito?
• ¿El color de acento aparece solo en la acción principal y estados clave? ¿O está por todas partes?
• Haz una captura de pantalla (véase fondo amigable): ¿lo primero que se ve es el contenido y la acción principal, o la decoración?
• Ponte en el lugar del usuario: si lo usara ocho horas al día / diez minutos para jugar, ¿es adecuado este estilo?

Límites

• Si el usuario pide explícitamente un estilo ("quiero ciberpunk", "hazlo llamativo"), sigue sus indicaciones, aunque sea una herramienta.
• Si el usuario da una imagen de referencia, un sitio web de referencia o guías de marca, usa eso como referencia.
• Las páginas de demostración, marketing o exhibición pueden ser más expresivas que las herramientas diarias, pero deben seguir en línea con la marca y la audiencia.

Lista de verificación

• ¿El proyecto tiene un sistema de diseño, tema o páginas existentes? ¿Los estoy usando?
• ¿Cuál es el contexto? ¿Quién lo usa, durante cuánto tiempo, cuál es el coste de un error?
• Si el contexto no está claro, ¿he preguntado al usuario con opciones concretas?
• Interfaz de herramienta: ¿no tiene vidrio esmerilado, degradados púrpura-azul, brillo neón, fondos con manchas, iconos emoji ni animaciones sin sentido?
• Interfaz de entretenimiento: ¿tiene personalidad acorde al tema, no es una tabla gris ni un estilo llamativo genérico de IA?
• ¿El color de acento solo se usa donde debe?
• ¿Cada elemento decorativo tiene una razón de ser?