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, los 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 = LÉELO SIEMPRE. Los demás = solo si son relevantes.
🔧 Scripts de Ejecución
Ejecuta estos para auditorías (no leas, solo ejecuta):
| Script | Propósito | Uso |
|---|---|---|
| Auditoría Manual | Auditoría de Psicología UX y Accesibilidad | Usa las herramientas de desarrollo del navegador y Lighthouse |
⚠️ CRÍTICO: PREGUNTA ANTES DE ASUMIR (OBLIGATORIO)
¡ALTO! Si la solicitud del usuario es abierta, NO recurras a tus favoritos.
Cuando la Pregunta 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/audaz/retro/futurista/orgánico?)"
¿Diseño no especificado? Pregunta:
"¿Tienes preferencia de diseño? (una columna/cuadrícula/asimétrico/ancho completo?)"
⛔ TENDENCIAS POR DEFECTO A EVITAR (PUERTO SEGURO ANTIPATRÓN):
| Tendencia por Defecto de IA | Por Qué es Mala | Piensa en su Lugar |
|---|---|---|
| Cuadrículas Bento (Cliché Moderno) | Usado en todos los diseños de IA | ¿Por qué este contenido NECESITA una cuadrícula? |
| Héroe Dividido (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 de colores radical? |
| Glassmorphism | La idea de IA de "premium" | ¿Qué tal un plano sólido y de alto contraste? |
| Azul Cian Profundo / 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 + brillo neón | Sobr utilizado, "aspecto de 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. ASUME RIESGOS."
1. Análisis de Restricciones (SIEMPRE PRIMERO)
Antes de cualquier trabajo de diseño, RESPONDE ESTAS o PREGUNTA AL USUARIO:
| Restricción | Pregunta | Por Qué es Importante |
|---|---|---|
| Cronograma | ¿Cuánto tiempo? | Determina la complejidad |
| Contenido | ¿Listo o marcador de posición? | 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 |
|---|---|
| Generación Z | Audaz, rápido, primero móvil, auténtico |
| Millennials | Limpio, minimalista, impulsado por valores |
| Generación 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 Fundamentales (Internalízalas)
| Ley | Principio | Aplicación |
|---|---|---|
| Ley de Hick | Más opciones = decisiones más lentas | Limita las opciones, usa divulgación progresiva |
| Ley de Fitts | Más grande + más cerca = más fácil de hacer clic | Tamaña adecuadamente los CTA |
| 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) → 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 consistente y profesional
- Políticas transparentes
3. Principios de Diseño
Proporción Áurea (φ = 1.618)
Úsala para armonía proporcional:
├── Contenido : Barra lateral ≈ 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
├── Medio: 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 de toque cómodo mínimo |
| Botones | Altura basada en la jerarquía de importancia |
| Entradas | Coincide con la 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 y neutral)
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? (limita las 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:
├── DIFERENTE suficiente para la jerarquía
├── SIMILAR suficiente para la cohesión
└── Generalmente: pantalla + neutral, o serif + sans
Reglas de Legibilidad
- Longitud de línea: 45-75 caracteres óptimo
- Altura de línea: 1.4-1.6 para el cuerpo del texto
- Contraste: Verifica los requisitos WCAG
- Tamaño: 16px+ para el 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 la rueda (análogos)
├── O el mismo tono, diferente luminosidad
├── Evita pares complementarios agresivos
├── 🚫 **NO Degradados Mesh/Aurora** (manchas flotantes)
└── VARÍA radicalmente de proyecto a proyecto
Para la 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 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 | Salida suave | Desacelerar, asentarse |
| Salida | Entrada suave | Acelerar, salir |
| Énfasis | Entrada-salida suave | 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 avanzados: 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
- Héroe que evoca la emoción deseada
- Elementos humanos (rostros, historias)
- Indicadores de progreso/logro
- Momentos de deleite
9. Antipatrones (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 que compiten
- Muros de texto sin jerarquía
- Contraste inaccesible
❌ Patrones de Tendencia de IA (¡EVITAR!)
- Los 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 Brillo
- Misma estructura de diseño / clon de Vercel
- No preguntar las 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, 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 lo predeterminado!)
4. EJECUCIÓN
└── Aplica los principios anteriores
└── Revisa contra los antipatrones
5. REVISIÓN
└── "¿Esto sirve al usuario?"
└── "¿Es esto diferente de mis valores predeterminados?"
└── "¿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 - 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 Usarla |
|---|---|
| frontend-design (esta) | Antes de codificar - Aprende principios de diseño (color, tipografía, psicología UX) |
| web-design-guidelines | Después de codificar - Audita por 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ÑO → Lee los principios de frontend-design ← ESTÁS AQUÍ
2. CÓDIGO → Implementa el diseño
3. AUDITORÍA → Ejecuta la revisión de web-design-guidelines
4. CORREGIR → Aborda los hallazgos de la auditoría
Próximo paso: Después de codificar, usa la habilidad
web-design-guidelinespara auditar tu implementación en busca de 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 de SaaS!