Diseño UI moderno

No te pedimos que diseñes a mano. Te pedimos algo más útil: entrenar el ojo para distinguir lo que se ve profesional de lo que se ve amateur, y saber pedirle a la IA que apunte a lo primero. La IA dibuja; vos ponés el criterio.

Casi todo el salto de calidad sale de cuatro decisiones: cuánto aire dejás, cómo ordenás los tamaños del texto, qué colores usás y dónde, y cuánto te aguantás de no agregar cosas. Vamos una por una.

Minimalismo no es “poner poco”: es sacar todo lo que no aporta para que lo que importa respire. Cada elemento tiene que justificar por qué está. Si dudás, sacalo. El amateur agrega; el profesional resta.

Tres enemigos típicos del equipo de marketing apurado: demasiado texto en negrita (si todo grita, nada se escucha), tres colores compitiendo por atención, y cinco botones donde alcanzaba con uno.

El espacio en blanco no es espacio “perdido”: es lo que agrupa, separa y jerarquiza. La regla profesional es usar una escala en vez de números al azar. Casi todos los sistemas (Tailwind incluido) usan múltiplos de 4 u 8px: 4, 8, 12, 16, 24, 32… Así todo queda alineado a una grilla invisible y se ve prolijo sin que sepas por qué.

La regla de oro del agrupamiento: los elementos relacionados van más juntos que los no relacionados. Un título y su párrafo, cerca (8–12px); dos secciones distintas, lejos (32–64px). El ojo lee los grupos antes que las palabras.

Usá un sistema de espaciado basado en múltiplos de 4px (escala 4/8/12/16/24/32/48/64).
Aplicalo de forma consistente en toda la {{página/landing}}:
- gap chico (8–12px) entre elementos de un mismo grupo,
- gap mediano (16–24px) entre grupos de una sección,
- gap grande (48–64px) entre secciones distintas.
Dejá aire generoso: que respire. No amontones.

Buena tipografía = el lector sabe en qué orden mirar, sin pensar. Eso se logra con jerarquía: pocos tamaños bien diferenciados, no diez parecidos. El contraste entre el título y el cuerpo tiene que ser obvio. Tocá cada nivel:

Tres palancas, además del tamaño: el peso (bold para títulos, regular para cuerpo), el interlineado (texto largo respira mejor con líneas más separadas, ~1.6) y el ancho de línea (entre 60 y 75 caracteres; una línea que cruza toda la pantalla cansa). Y un consejo de oro: una sola familia tipográfica casi siempre alcanza. Como mucho, dos.

Una paleta no es “mis colores favoritos”: es un sistema con roles. La fórmula que nunca falla es 60-30-10: 60% un color base (casi siempre un neutro de fondo), 30% un color secundario (la estructura: texto, navbar) y solo 10% un acento para lo que querés que la gente clickee.

El acento (el teal de IEB) es poderoso justamente porque es escaso. Si lo ponés en el título, el botón, el ícono y el borde, deja de guiar la atención. Lo reservás para el CTA principal y listo. Lo otro clave es el contraste: el texto tiene que leerse cómodo sobre su fondo (apuntá a un ratio de contraste alto, tema que retomamos en accesibilidad).

Lo “premium” no es un truco: es la suma de detalles consistentes. Mismo contenido, dos ejecuciones. Arrastrá el divisor para comparar la card amateur contra la premium:

¿Qué cambió, punto por punto? Espaciado generoso en vez de amontonado. Una sola jerarquía clara (badge → título → dato → CTA) en vez de todo en negrita. El acento teal reservado solo para el botón. Bordes finos y una sombra sutil en lugar de un marco grueso. Y restraint: un botón principal, no dos peleándose. Nada es espectacular por separado; juntos cambian todo.

La palabra mágica al promptear es consistencia: que los radios de borde, los espaciados, los tamaños de texto y el uso del color sean los mismos en toda la web. La consistencia es lo que el ojo lee como “esto lo hizo alguien que sabe”.

El error es pedir cada pantalla por separado y que cada una salga distinta. La movida pro es pedir primero el sistema de diseño (colores, tipos, espaciado, estilo de componentes) y que todo lo demás lo respete. Un prompt para arrancar:

Antes de diseñar pantallas, definamos el SISTEMA DE DISEÑO de la web de {{empresa: ej. IEB}} y usalo de forma consistente en TODO el proyecto.

Estética: minimalista, premium, mucho aire. Estilo {{referencia: ej. limpio y sobrio tipo fintech}}.

1) Color (regla 60-30-10):
   - Base/fondo: {{ej. gris muy claro #F7F8FB}}
   - Estructura/texto: {{ej. navy #1B2A4A}}
   - Acento (SOLO CTAs): {{ej. teal #00D4AA}}
   Usá el acento con moderación: solo botones y links principales.

2) Tipografía: una sola familia. Jerarquía clara con pocos tamaños
   (display, h2, h3, cuerpo, caption). Cuerpo con interlineado ~1.6 y
   ancho de línea cómodo. Nada de MAYÚSCULAS en párrafos.

3) Espaciado: escala de múltiplos de 4px (4/8/12/16/24/32/48/64).
   Aplicala consistente. Aire generoso entre secciones.

4) Componentes: bordes finos, esquinas redondeadas suaves,
   sombras sutiles. Un solo botón principal por pantalla.

Devolvé el sistema en una lista clara. Recién después diseñamos pantallas.

Esta {{card/sección/landing}} se ve amateur. Elevala a nivel premium SIN cambiar el contenido:
- más espaciado y aire (escala de 4px),
- una jerarquía tipográfica clara (no todo en negrita),
- usá el acento {{teal}} SOLO en el CTA principal,
- bordes finos y sombra sutil en vez de marcos gruesos,
- dejá un único botón principal.
Mantené la consistencia con el resto del sitio.