Sistema de Diseño Frontend
Filosofía: Cada píxel tiene un propósito. La moderación es lujo. La psicología del usuario impulsa las decisiones. Principio Central: PIENSA, no memorices. PREGUNTA, no asumas.
🎯 Regla de Lectura Selectiva (OBLIGATORIO)
Lee los archivos REQUERIDOS siempre, OPCIONALES solo cuando sea necesario:
| Archivo | Estado | Cuándo Leer |
|---|---|---|
| ux-psychology.md | 🔴 REQUERIDO | ¡Siempre leer primero! |
| color-system.md | ⚪ Opcional | Decisiones de color/paleta |
| typography-system.md | ⚪ Opcional | Selección/combinación 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 = SIEMPRE LEER. Otros = solo si son relevantes.
🔧 Scripts en Tiempo de Ejecución
Ejecuta estos para auditorías (no leas, solo ejecuta):
| Script | Propósito | Uso |
|---|---|---|
scripts/ux_audit.py | Auditoría de Psicología UX y Accesibilidad | python scripts/ux_audit.py <project_path> |
⚠️ CRÍTICO: PREGUNTA ANTES DE ASUMIR (OBLIGATORIO)
¡ALTO! Si la solicitud del usuario es abierta, NO uses tus favoritos por defecto.
Cuando el Prompt del Usuario es Vago, PREGUNTA:
¿Color no especificado? Pregunta:
"¿Qué paleta de colores prefieres? (azul/verde/naranja/neutro/otro?)"
¿Estilo no especificado? Pregunta:
"¿Qué estilo buscas? (minimalista/audaz/retro/futurista/orgánico?)"
¿Diseño no especificado? Pregunta:
"¿Tienes preferencia de diseño? (columna única/rejilla/asimétrico/ancho completo?)"
⛔ TENDENCIAS POR DEFECTO A EVITAR (PUERTO NO SEGURO):
| Tendencia por Defecto de IA | Por Qué Es Mala | Piensa en su Lugar |
|---|---|---|
| Cuadrículas Bento (Cliché Moderno) | Usado en cada diseño de IA | ¿Por qué este contenido NECESITA una rejilla? |
| Dividir Héroe (Izquierda/Derecha) | Predecible y Aburrido | ¿Qué tal Tipografía Masiva o Narrativa Vertical? |
| Degradados Mesh/Aurora | El fondo perezoso "nuevo" | ¿Cuál es una combinación radical de colores? |
| Glassmorphism | La idea de IA de "premium" | ¿Qué tal plano sólido y de alto contraste? |
| Cian Oscuro / Azul Fintech | Puerto seguro de 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 + resplandor neón | Sobreexplotado, "aspecto de IA" | ¿Qué necesita REALMENTE la MARCA? |
| Todo redondeado | Genérico/Seguro | ¿Dónde puedo usar bordes afilados y brutales? |
🔴 "Cada estructura 'segura' que elijas te acerca un paso más a una plantilla genérica. ASUME 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é Importa |
|---|---|---|
| Cronograma | ¿Cuánto tiempo? | Determina la complejidad |
| Contenido | ¿Listo o placeholder? | Afecta la flexibilidad del diseño |
| Marca | ¿Directrices 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 | Audaz, rápido, móvil-primero, 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 moderada, espacio en blanco |
2. Principios de Psicología UX
Leyes Fundamentales (Internalízalas)
| Ley | Principio | Aplicación |
|---|---|---|
| Ley de Hick | Más opciones = decisiones más lentas | Limita opciones, usa divulgación progresiva |
| Ley de Fitts | Más grande + más cerca = más fácil de hacer clic | Tamaño adecuado de CTAs |
| Ley de Miller | ~7 elementos en memoria de trabajo | Agrupa contenido |
| Von Restorff | Diferente = memorable | Haz que los CTAs sean visualmente distintos |
| Posición Serial | Primero/último más recordado | 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) → Usándolo: 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 coherente y profesional
- Políticas transparentes
3. Principios de Diseño
Proporción Áurea (φ = 1.618)
Usar 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 Cuadrícula de 8 Puntos
Todo el 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
└── Ajustar según la densidad del contenido
Principios Clave de Tamaño
| Elemento | Consideración |
|---|---|
| Objetivos táctiles | Tamaño de toque cómodo mínimo |
| Botones | Altura basada en jerarquía de importancia |
| Entradas | Coincidir 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 soporte)
10% → Acento (CTAs, destacados, atención)
Psicología del Color (Para la Toma de Decisiones)
| Si Necesitas... | Considera Matices | 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 | Colores brillantes 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 del color detallada: color-system.md
5. Principios de Tipografía
Selección de Escala
| Tipo de Contenido | Relació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 |
| Héroe/pantalla | 1.5-1.618 | Impacto dramático |
Concepto de Combinación
Contraste + Armonía:
├── SUFICIENTEMENTE DIFERENTE para jerarquía
├── SUFICIENTEMENTE SIMILAR para cohesión
└── Generalmente: pantalla + neutro, 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: Verificar 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 radicalmente 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 resplandor en su lugar
Uso de Degradados
Degradados armoniosos:
├── Colores adyacentes en la rueda (análogos)
├── O el mismo tono, diferente luminosidad
├── Evitar pares complementarios duros
├── 🚫 **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 Tiempo
Duración basada en:
├── Distancia (más lejos = más larga)
├── Tamaño (más grande = más lento)
├── Importancia (crítico = claro)
└── Contexto (urgente = rápido, lujo = lento)
Selección de Easing
| Acción | Easing | Por Qué |
|---|---|---|
| Entrando | Ease-out | Desacelerar, asentarse |
| Saliendo | Ease-in | Acelerar, salir |
| Énfasis | Ease-in-out | Suave, deliberado |
| Juguetón | Bounce | Divertido, enérgico |
Rendimiento
- Animar solo transform y opacity
- Respetar preferencia de movimiento reducido
- Probar en dispositivos de gama baja
Para patrones de animación: animation-guide.md, para avanzado: motion-graphics.md
8. Lista de Verificación de "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
Disparadores Emocionales
- Héroe 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 del sistema por defecto sin consideración
- Imágenes de stock que no coinciden
- Espaciado inconsistente
- Demasiados colores competidores
- Muros de texto sin jerarquía
- Contraste inaccesible
❌ Patrones de Tendencia de IA (¡EVITAR!)
- Mismos colores en cada proyecto
- Oscuro + neón como predeterminado
- Púrpura/violeta en todo (PROHIBICIÓN DE PÚRPURA ✅)
- Cuadrículas Bento para páginas de aterrizaje simples
- Degradados Mesh y Efectos de Resplandor
- Misma estructura de diseño / clon de Vercel
- No preguntar preferencias del usuario
❌ Patrones Oscuros (No Éticos)
- Costos ocultos
- Urgencia falsa
- 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, marca, tecnología, 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 uses valores por defecto!)
4. EJECUCIÓN
└── Aplicar principios anteriores
└── Verificar contra anti-patrones
5. REVISIÓN
└── "¿Esto sirve al usuario?"
└── "¿Es esto diferente de mis valores por defecto?"
└── "¿Estaría orgulloso de esto?"
Archivos de Referencia
Para guía más profunda en áreas específicas:
- color-system.md - Teoría del color y proceso de selección
- typography-system.md - Combinación 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
Habilidades Relacionadas
| Habilidad | Cuándo Usar |
|---|---|
| frontend-design (esta) | Antes de codificar - Aprende principios de diseño (color, tipografía, psicología UX) |
| web-design-guidelines | Después de codificar - Auditar accesibilidad, rendimiento y mejores prácticas |
Flujo de Trabajo Posterior al Diseño
Después de implementar tu diseño, ejecuta la auditoría:
1. DISEÑO → Leer principios de frontend-design ← ESTÁS AQUÍ
2. CÓDIGO → Implementar el diseño
3. AUDITORÍA → Ejecutar revisión de web-design-guidelines
4. CORREGIR → Abordar hallazgos de la auditoría
Próximo Paso: Después de codificar, usa la habilidad
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!