Sistema de Diseño Frontend
Filosofía: Cada píxel tiene un propósito. La moderación es un lujo. La psicología del usuario impulsa las decisiones. Principio fundamental: PIENSA, no memorices. PREGUNTA, no asumas.
🎯 Regla de Lectura Selectiva (OBLIGATORIA)
Lee los archivos REQUERIDOS siempre, los OPCIONALES solo cuando sea necesario:
| Archivo | Estado | Cuándo Leerlo |
|---|---|---|
| ux-psychology.md | 🔴 REQUERIDO | ¡Leer siempre primero! |
| color-system.md | ⚪ Opcional | Decisiones de color/paleta |
| typography-system.md | ⚪ Opcional | Selección/emparejamiento de fuentes |
| visual-effects.md | ⚪ Opcional | Glassmorphism, sombras, degradados |
| animation-guide.md | ⚪ Opcional | Animación necesaria |
| motion-graphics.md | ⚪ Opcional | Lottie, GSAP, 3D |
| decision-trees.md | ⚪ Opcional | Plantillas de contexto |
🔴 ux-psychology.md = LEER SIEMPRE. Los demás = solo si son relevantes.
🔧 Scripts de Ejecución
Ejecuta estos para auditorías (no los leas, solo ejecútalos):
| Script | Propósito | Uso |
|---|---|---|
scripts/ux_audit.py | Auditoría de Psicología UX y Accesibilidad | python scripts/ux_audit.py <ruta_del_proyecto> |
⚠️ CRÍTICO: PREGUNTA ANTES DE ASUMIR (OBLIGATORIO)
¡ALTO! Si la solicitud del usuario es abierta, NO recurras a tus favoritos por defecto.
Cuando la Instrucción del Usuario es Vaga, PREGUNTA:
¿Color no especificado? Pregunta:
"¿Qué paleta de colores prefieres? (azul/verde/naranja/neutro/otro?)"
¿Estilo no especificado? Pregunta:
"¿Qué estilo buscas? (minimalista/atrevido/retro/futurista/orgánico?)"
¿Layout no especificado? Pregunta:
"¿Tienes alguna preferencia de layout? (una columna/rejilla/asimétrico/ancho completo?)"
⛔ TENDENCIAS POR DEFECTO A EVITAR (ANTI-PUERTO SEGURO):
| Tendencia por Defecto de IA | Por Qué es Mala | Piensa en su Lugar |
|---|---|---|
| Grids Bento (Cliché Moderno) | Usado en todo diseño de IA | ¿Por qué este contenido NECESITA una rejilla? |
| Hero Split (Izquierda/Derecha) | Predecible y aburrido | ¿Qué tal tipografía masiva o narrativa vertical? |
| Gradientes Mesh/Aurora | El fondo "nuevo" perezoso | ¿Cuál es una combinación de colores radical? |
| Glassmorphism | La idea de IA de "premium" | ¿Qué tal un diseño plano, sólido y de alto contraste? |
| Cian Profundo / Azul Fintech | Puerto seguro tras la prohibición del púrpura | ¿Por qué no Rojo, Negro o Verde Neón? |
| "Orquestar / Empoderar" | Redacción generada por IA | ¿Cómo diría esto un humano? |
| Fondo oscuro + brillo neón | Sobresado, "aspecto IA" | ¿Qué necesita REALMENTE la MARCA? |
| Todo redondeado | Genérico/Seguro | ¿Dónde puedo usar bordes afilados y brutalistas? |
🔴 "Cada estructura 'segura' que elijas te acerca un paso más a una plantilla genérica. TOMA RIESGOS."
1. Análisis de Restricciones (SIEMPRE PRIMERO)
Antes de cualquier trabajo de diseño, RESPONDE ESTO O PREGUNTA AL USUARIO:
| Restricción | Pregunta | Por Qué es Importante |
|---|---|---|
| Cronograma | ¿Cuánto tiempo hay? | Determina la complejidad |
| Contenido | ¿Listo o placeholder? | Afecta la flexibilidad del layout |
| Marca | ¿Guías existentes? | Puede dictar colores/fuentes |
| Tecnología | ¿Qué stack? | Afecta las capacidades |
| Audiencia | ¿Quién exactamente? | Impulsa todas las decisiones visuales |
Audiencia → Enfoque de Diseño
| Audiencia | Piensa en |
|---|---|
| Gen Z | Atrevido, rápido, mobile-first, auténtico |
| Millennials | Limpio, minimalista, impulsado por valores |
| Gen X | Familiar, confiable, claro |
| Boomers | Legible, alto contraste, simple |
| B2B | Profesional, centrado en datos, confianza |
| Lujo | Elegancia contenida, espacio en blanco |
2. Principios de Psicología UX
Leyes Clave (Internalízalas)
| Ley | Principio | Aplicación |
|---|---|---|
| Ley de Hick | Más opciones = decisiones más lentas | Limita opciones, usa revelación progresiva |
| Ley de Fitts | Más grande + más cerca = más fácil de hacer clic | Tamaña los CTA adecuadamente |
| Ley de Miller | ~7 elementos en la memoria de trabajo | Agrupa el contenido en fragmentos |
| Von Restorff | Diferente = memorable | Haz que los CTA sean visualmente distintos |
| Posición Serial | Primero/último se recuerda más | Información clave al inicio/final |
Niveles de Diseño Emocional
VISCERAL (instantáneo) → Primera impresión: colores, imágenes, sensación general
CONDUCTUAL (uso) → Al usarlo: velocidad, retroalimentación, eficiencia
REFLEXIVO (memoria) → Después: "Me gusta lo que esto dice de mí"
Construcción de Confianza
- Indicadores de seguridad en acciones sensibles
- Prueba social donde sea relevante
- Acceso claro a contacto/soporte
- Diseño consistente y profesional
- Políticas transparentes
3. Principios de Layout
Proporción Áurea (φ = 1.618)
Úsala para armonía proporcional:
├── Contenido : Barra lateral = aproximadamente 62% : 38%
├── Cada tamaño de encabezado = anterior × 1.618 (para escala dramática)
├── El espaciado puede seguir: sm → md → lg (cada uno × 1.618)
Concepto de Rejilla de 8 Puntos
Todo espaciado y tamaño en múltiplos de 8:
├── Ajustado: 4px (medio paso para micro)
├── Pequeño: 8px
├── Mediano: 16px
├── Grande: 24px, 32px
├── XL: 48px, 64px, 80px
└── Ajusta según la densidad del contenido
Principios Clave de Tamaño
| Elemento | Consideración |
|---|---|
| Objetos táctiles | Tamaño mínimo cómodo para tocar |
| Botones | Altura basada en jerarquía de importancia |
| Campos de entrada | Igualar altura del botón para alineación |
| Tarjetas | Relleno consistente, transpirable |
| Ancho de lectura | 45-75 caracteres óptimo |
4. Principios de Color
Regla 60-30-10
60% → Primario/Fondo (base tranquila, neutra)
30% → Secundario (áreas de apoyo)
10% → Acento (CTA, destacados, atención)
Psicología del Color (Para la Toma de Decisiones)
| Si Necesitas... | Considera Tonos | Evita |
|---|---|---|
| Confianza, calma | Familia azul | Rojos agresivos |
| Crecimiento, naturaleza | Familia verde | Grises industriales |
| Energía, urgencia | Naranja, rojo | Azules pasivos |
| Lujo, creatividad | Verde azulado profundo, Oro, Esmeralda | Brillos de aspecto barato |
| Limpio, minimalista | Neutros | Color abrumador |
Proceso de Selección
- ¿Cuál es la industria? (reduce opciones)
- ¿Cuál es la emoción? (elige el primario)
- ¿Modo claro u oscuro? (establece la base)
- PREGUNTA AL USUARIO si no está especificado
Para teoría de color detallada: color-system.md
5. Principios de Tipografía
Selección de Escala
| Tipo de Contenido | Proporción de Escala | Sensación |
|---|---|---|
| UI densa | 1.125-1.2 | Compacto, eficiente |
| Web general | 1.25 | Equilibrado (más común) |
| Editorial | 1.333 | Legible, espacioso |
| Hero/display | 1.5-1.618 | Impacto dramático |
Concepto de Emparejamiento
Contraste + Armonía:
├── SUFICIENTEMENTE diferentes para jerarquía
├── SUFICIENTEMENTE similares para cohesión
└── Generalmente: display + neutra, o serif + sans
Reglas de Legibilidad
- Longitud de línea: 45-75 caracteres óptimo
- Altura de línea: 1.4-1.6 para texto del cuerpo
- Contraste: Verifica requisitos WCAG
- Tamaño: 16px+ para cuerpo en web
Para tipografía detallada: typography-system.md
6. Principios de Efectos Visuales
Glassmorphism (Cuando sea Apropiado)
Propiedades clave:
├── Fondo semitransparente
├── Desenfoque de fondo
├── Borde sutil para definición
└── ⚠️ **ADVERTENCIA:** El glassmorphism azul/blanco estándar es un cliché moderno. Úsalo de forma radical o no lo uses.
Jerarquía de Sombras
Concepto de elevación:
├── Elementos más altos = sombras más grandes
├── Desplazamiento Y > desplazamiento X (luz desde arriba)
├── Múltiples capas = más realista
└── Modo oscuro: puede necesitar brillo en su lugar
Uso de Degradados
Degradados armoniosos:
├── Colores adyacentes en el círculo (análogos)
├── O mismo tono, diferente luminosidad
├── Evita pares complementarios agresivos
├── 🚫 **NO Degradados Mesh/Aurora** (manchas flotantes)
└── VARÍA radicalmente de proyecto a proyecto
Para guía completa de efectos: visual-effects.md
7. Principios de Animación
Concepto de Temporización
Duración basada en:
├── Distancia (más lejos = más largo)
├── Tamaño (más grande = más lento)
├── Importancia (crítico = claro)
└── Contexto (urgente = rápido, lujo = lento)
Selección de Curvas de Aceleración
| Acción | Curva | Por Qué |
|---|---|---|
| Entrada | Ease-out | Desacelerar, asentarse |
| Salida | Ease-in | Acelerar, salir |
| Énfasis | Ease-in-out | Suave, deliberado |
| Juguetón | Rebote | Divertido, enérgico |
Rendimiento
- Anima solo transform y opacity
- Respeta la preferencia de movimiento reducido
- Prueba en dispositivos de gama baja
Para patrones de animación: animation-guide.md, para avanzado: motion-graphics.md
8. Lista de Verificación "Factor WOW"
Indicadores Premium
- Espacio en blanco generoso (lujo = espacio para respirar)
- Profundidad y dimensión sutiles
- Animaciones suaves y con propósito
- Atención al detalle (alineación, consistencia)
- Ritmo visual cohesivo
- Elementos personalizados (no todos por defecto)
Constructores de Confianza
- Señales de seguridad donde corresponda
- Prueba social / testimonios
- Propuesta de valor clara
- Imágenes profesionales
- Lenguaje de diseño consistente
Desencadenantes Emocionales
- Hero que evoca la emoción deseada
- Elementos humanos (rostros, historias)
- Indicadores de progreso/logro
- Momentos de deleite
9. Anti-Patrones (Lo que NO Hacer)
❌ Indicadores de Diseño Perezoso
- Fuentes predeterminadas del sistema sin consideración
- Imágenes de stock que no coinciden
- Espaciado inconsistente
- Demasiados colores en competencia
- Muros de texto sin jerarquía
- Contraste inaccesible
❌ Patrones de Tendencia de IA (¡EVITAR!)
- Mismos colores en cada proyecto
- Oscuro + neón como predeterminado
- Todo púrpura/violeta (PROHIBICIÓN DE PÚRPURA ✅)
- Grids Bento para páginas de aterrizaje simples
- Gradientes Mesh y Efectos de Brillo
- Misma estructura de layout / clon de Vercel
- No preguntar preferencias del usuario
❌ Patrones Oscuros (No Éticos)
- Costos ocultos
- Falsa urgencia
- Acciones forzadas
- UI engañosa
- Confirmshaming
10. Resumen del Proceso de Decisión
Para CADA tarea de diseño:
1. RESTRICCIONES
└── ¿Cuál es el cronograma, la marca, la tecnología, la audiencia?
└── Si no está claro → PREGUNTA
2. CONTENIDO
└── ¿Qué contenido existe?
└── ¿Cuál es la jerarquía?
3. DIRECCIÓN DE ESTILO
└── ¿Qué es apropiado para el contexto?
└── Si no está claro → PREGUNTA (¡no recurras a valores por defecto!)
4. EJECUCIÓN
└── Aplica los principios anteriores
└── Verifica contra los anti-patrones
5. REVISIÓN
└── "¿Esto sirve al usuario?"
└── "¿Es diferente a mis valores por defecto?"
└── "¿Estaría orgulloso de esto?"
Archivos de Referencia
Para orientación más profunda en áreas específicas:
- color-system.md - Teoría del color y proceso de selección
- typography-system.md - Emparejamiento de fuentes y decisiones de escala
- visual-effects.md - Principios y técnicas de efectos
- animation-guide.md - Principios de diseño de movimiento
- motion-graphics.md - Avanzado: Lottie, GSAP, SVG, 3D, Partículas
- decision-trees.md - Plantillas específicas de contexto
- ux-psychology.md - Inmersión profunda en psicología del usuario
Skills Relacionados
| Skill | Cuándo Usarlo |
|---|---|
| frontend-design (este) | Antes de codificar - Aprende principios de diseño (color, tipografía, psicología UX) |
| web-design-guidelines | Después de codificar - Audita para accesibilidad, rendimiento y mejores prácticas |
Flujo de Trabajo Post-Diseño
Después de implementar tu diseño, ejecuta la auditoría:
1. DISEÑA → Lee principios de frontend-design ← ESTÁS AQUÍ
2. CODIFICA → Implementa el diseño
3. AUDITA → Ejecuta revisión de web-design-guidelines
4. CORRIGE → Aborda los hallazgos de la auditoría
Próximo paso: Después de codificar, usa el skill
web-design-guidelinespara auditar tu implementación en cuanto a accesibilidad, estados de enfoque, animaciones y problemas de rendimiento.
Recuerda: El diseño es PENSAR, no copiar. Cada proyecto merece una consideración fresca basada en su contexto y usuarios únicos. ¡Evita el Puerto Seguro Moderno SaaS!