UI/UX Pro Max - Experto en Inteligencia de Diseño

Guía integral de diseño UI/UX para aplicaciones web y móviles. Proporciona recomendaciones de diseño inteligentes basadas en el tipo de producto, industria y requisitos del usuario. Consulta estas pautas al diseñar nuevas UI, elegir colores y tipografía, revisar código en busca de problemas de UX o implementar funcionalidades.

Flujo de trabajo

Paso 1: Analizar los requisitos del usuario

Extraer de la solicitud del usuario:

Tipo de producto: SaaS, comercio electrónico, portafolio, panel de control, landing page, etc.
Palabras clave de estilo: minimalista, divertido, profesional, elegante, modo oscuro, etc.
Industria: salud, fintech, juegos, educación, belleza, etc.
Stack tecnológico: React, Vue, Next.js, Svelte, Flutter o html-tailwind (por defecto)

Paso 2: Generar el sistema de diseño

Consultar los datos de referencia a continuación (y los archivos CSV en data/) para:

Patrones recomendados y diseños de secciones
Estilo visual principal con efectos
Paleta de colores (primario, secundario, CTA, fondo, texto)
Combinación tipográfica (fuentes de encabezado + cuerpo con URL de Google Fonts)
Efectos clave y antipatrones a evitar

Paso 3: Pautas de implementación

Aplicar las mejores prácticas específicas del stack a partir de los datos de referencia:

Utilidades HTML/Tailwind, puntos de interrupción responsivos
Hooks de React, gestión de estado, patrones de rendimiento
API de Composition de Vue, estado de Pinia
Widgets de Flutter, temas, navegación
Requisitos de accesibilidad (cumplimiento WCAG)

Paso 4: Verificación previa a la entrega

Ejecutar todas las listas de verificación (calidad visual, interacción, modo claro/oscuro, diseño, accesibilidad) antes de entregar cualquier código de UI.

Reglas de prioridad

Prioridad	Categoría	Impacto
1	Accesibilidad	CRÍTICO - Contraste de color 4.5:1, estados de enfoque, aria-labels
2	Toque e interacción	CRÍTICO - Objetos táctiles de 44x44px, cursor-pointer
3	Rendimiento	ALTO - Optimización de imágenes, carga diferida
4	Diseño y responsive	ALTO - Mobile-first, meta viewport
5	Tipografía y color	MEDIO - Altura de línea 1.5-1.75, fuentes legibles
6	Animación	MEDIO - Duración de 150-300ms, solo transform
7	Selección de estilo	MEDIO - Hacer coincidir el estilo con el tipo de producto

Selector rápido de estilos por tipo de producto

Tipo de producto	Estilo principal	Estilos secundarios	Ambiente de color
SaaS (General)	Minimalismo	Diseño plano, Glassmorphism	Azul de confianza + contraste de acento
Comercio electrónico	Neo-Brutalismo	Bento Grid, Modo oscuro	Primario de marca + verde de éxito
Comercio electrónico de lujo	Minimalismo lujoso	Modo oscuro, Elegante	Negro premium + acentos dorados
Salud	Minimalismo suave	Diseño plano, Orgánico	Azul calmado + verde salud
Fintech/Crypto	Cyberpunk	Modo oscuro, Glassmorphism	Tecnología oscura + acentos vibrantes
Juegos	Neón brillante	Cyberpunk, Modo oscuro	Vibrante + neón + inmersivo
Portafolio/Creativo	Editorial	Brutalismo, Asimétrico	Primario de marca + artístico
Panel de control	Tecnología corporativa	Diseño plano, Denso en datos	Degradados frío→cálido + neutro
IA/Chatbot	Degradados Aurora	Glassmorphism, Modo oscuro	Neutro + Púrpura IA (#6366F1)
Belleza/Spa/Bienestar	Formas orgánicas	Minimalismo suave, Elegante	Pasteles suaves + tonos naturales

Paletas de colores por industria

SaaS / Negocios

Rol	Hex	Tailwind
Primario	#2563EB	blue-600
Secundario	#3B82F6	blue-500
CTA	#F97316	orange-500
Fondo	#F8FAFC	slate-50
Texto	#1E293B	slate-800
Borde	#E2E8F0	slate-200

Comercio electrónico de lujo

Rol	Hex	Tailwind
Primario	#1C1917	stone-900
Secundario	#44403C	stone-700
CTA	#CA8A04	yellow-600
Fondo	#FAFAF9	stone-50
Texto	#0C0A09	stone-950
Borde	#D6D3D1	stone-300

Salud

Rol	Hex	Tailwind
Primario	#0891B2	cyan-600
Secundario	#22D3EE	cyan-400
CTA	#059669	emerald-600
Fondo	#ECFEFF	cyan-50
Texto	#164E63	cyan-900
Borde	#A5F3FC	cyan-200

Fintech / Crypto

Rol	Hex	Tailwind
Primario	#F59E0B	amber-500
Secundario	#FBBF24	amber-400
CTA	#8B5CF6	violet-500
Fondo	#0F172A	slate-900
Texto	#F8FAFC	slate-50
Borde	#334155	slate-700

Juegos

Rol	Hex	Tailwind
Primario	#7C3AED	violet-600
Secundario	#A78BFA	violet-400
CTA	#F43F5E	rose-500
Fondo	#0F0F23	custom-dark
Texto	#E2E8F0	slate-200
Borde	#4C1D95	violet-900

Plataforma IA / Chatbot

Rol	Hex	Tailwind
Primario	#7C3AED	violet-600
Secundario	#A78BFA	violet-400
CTA	#06B6D4	cyan-500
Fondo	#FAF5FF	violet-50
Texto	#1E1B4B	indigo-950
Borde	#DDD6FE	violet-200

Belleza / Spa / Bienestar

Rol	Hex	Tailwind
Primario	#DB2777	pink-600
Secundario	#F472B6	pink-400
CTA	#059669	emerald-600
Fondo	#FDF2F8	pink-50
Texto	#831843	pink-900
Borde	#FBCFE8	pink-200

Combinaciones tipográficas

Profesional / Corporativo

Encabezado: Inter | Cuerpo: Inter

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

Mejor para: SaaS, paneles de control, aplicaciones de negocios

Elegante / Lujo

Encabezado: Playfair Display | Cuerpo: Lato

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Lato:wght@400;700&display=swap');

Mejor para: Marcas de lujo, editorial, comercio electrónico de alta gama

Moderno / Tecnología

Encabezado: Space Grotesk | Cuerpo: DM Sans

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:wght@400;500;700&display=swap');

Mejor para: Startups tecnológicas, fintech, productos de IA

Amigable / Divertido

Encabezado: Poppins | Cuerpo: Open Sans

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Open+Sans:wght@400;600&display=swap');

Mejor para: Educación, aplicaciones de consumo, marcas de estilo de vida

Editorial / Creativo

Encabezado: Fraunces | Cuerpo: Source Sans 3

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Source+Sans+3:wght@400;600&display=swap');

Mejor para: Blogs, revistas, portafolios

Salud / Bienestar

Encabezado: Outfit | Cuerpo: Nunito

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Nunito:wght@400;600&display=swap');

Mejor para: Salud, bienestar, aplicaciones médicas

Referencia de estilos visuales

Minimalismo

Colores: Monocromo + 1 acento, mucho espacio en blanco
Efectos: Sombras sutiles, bordes limpios, microinteracciones
Mejor para: SaaS, productividad, aplicaciones profesionales
Palabras clave: limpio, simple, espacio en blanco, sutil, elegante

Glassmorphism

Colores: Capas translúcidas, efectos de desenfoque, fondos degradados
Efectos: backdrop-blur, bg-white/10, sombras suaves
Mejor para: Paneles de control modernos, aplicaciones de música, portafolios
Palabras clave: vidrio, desenfoque, translúcido, escarchado, en capas

Neumorphism

Colores: Pasteles suaves, sombras del mismo tono (oscuro/claro)
Efectos: Sombras interiores, elementos extruidos, profundidad suave
Mejor para: Paneles de control, calculadoras, reproductores de música
Palabras clave: suave, en relieve, extruido, táctil, 3D-suave

Modo oscuro

Colores: Fondos oscuros (#0F172A), texto claro, colores de acento
Efectos: Bordes sutiles, brillos al enfocar, reducción de fatiga visual
Mejor para: Herramientas de desarrollador, aplicaciones multimedia, juegos
Palabras clave: oscuro, noche, poca luz, contraste, moderno

Bento Grid

Colores: Basado en tarjetas con fondos distintos por sección
Efectos: Diseños de cuadrícula, tamaños de tarjeta variables, jerarquía clara
Mejor para: Exhibiciones de funciones, portafolios, paneles de control
Palabras clave: cuadrícula, tarjetas, modular, organizado, exhibición

Aurora / Malla de degradados

Colores: Degradados multicolores, combinación de malla, vibrante
Efectos: Degradados animados, transiciones de color, profundidad
Mejor para: Productos de IA, herramientas creativas, landing pages
Palabras clave: aurora, degradado, malla, colorido, fluido

Brutalismo

Colores: Alto contraste, colores crudos, primarios audaces
Efectos: Bordes pesados, tipografía cruda, intencionalmente tosco
Mejor para: Agencias creativas, portafolios de arte, marcas audaces
Palabras clave: crudo, audaz, austero, sin pulir, llamativo

Patrones de landing pages

Centrado en el héroe (Enfoque en conversión)

Secciones: Héroe > Prueba social > Funciones > CTA

CTA principal sobre el pliegue
Insignias de confianza cerca del CTA
Mensaje único y enfocado

Enfoque en funciones (Demostración del producto)

Secciones: Héroe > Cuadrícula de funciones > Cómo funciona > Precios > CTA

Demostraciones visuales del producto
Beneficios sobre características
Tablas comparativas para precios

Impulsado por la historia (Construcción de marca)

Secciones: Héroe > Problema > Solución > Trayectoria > Equipo > CTA

Conexión emocional primero
Historias de éxito de clientes
Flujo narrativo de la marca

Fuerte en prueba social (Construcción de confianza)

Secciones: Héroe > Logotipos > Testimonios > Casos de estudio > CTA

Logotipos de clientes destacados
Testimonios en video
Estadísticas y números

Selección de tipos de gráficos

Tipo de datos	Mejor gráfico	Cuándo usarlo
Tendencia en el tiempo	Gráfico de líneas	Series temporales, crecimiento, progreso
Comparar categorías	Gráfico de barras	Clasificaciones, comparaciones
Parte del todo	Gráfico de dona	Porcentajes, proporciones (≤5 elementos)
Correlación	Diagrama de dispersión	Relaciones, patrones
Geográfico	Mapa de coropletas	Datos regionales, ubicaciones
Embudo/Flujo	Gráfico de embudo	Conversión, etapas del proceso
Rendimiento	Indicador/Proyectil	KPIs, objetivos
Jerárquico	Mapa de árbol	Categorías anidadas, proporciones

Guía de color para gráficos:

Datos primarios: #2563EB (blue-600)
Éxito/Crecimiento: #22C55E (green-500)
Advertencia/Alerta: #F59E0B (amber-500)
Error/Declive: #EF4444 (red-500)
Neutro: #94A3B8 (slate-400)

Para datos detallados de gráficos (25 tipos de gráficos con recomendaciones de librerías, notas de accesibilidad y niveles interactivos), consulta data/design-data.csv.

Requisitos de accesibilidad (CRÍTICO)

Contraste de color

Texto normal: Relación mínima 4.5:1
Texto grande (18px+): Relación mínima 3:1
Elementos interactivos: Estados de enfoque claros

Objetos táctiles

Tamaño mínimo: 44x44px para dispositivos táctiles
Espaciado: Mínimo de 8px entre objetivos

Estados de enfoque

/* Anillo de enfoque siempre visible */
:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}

Movimiento reducido

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Etiquetas de formularios

Cada entrada DEBE tener una etiqueta asociada
Usar <label for="id"> o aria-label
Mensajes de error cerca del campo problemático

Antipatrones comunes de UX (EVITAR)

Iconos

NO: Usar emojis como iconos de UI
SÍ: Usar iconos SVG (Heroicons, Lucide, Simple Icons)

Estados de hover

NO: Transformaciones de escala que desplazan el diseño
SÍ: Solo transiciones de color/opacidad

Cursores

NO: Cursor predeterminado en elementos clicables
SÍ: cursor-pointer en todos los elementos interactivos

Cristal en modo claro

NO: bg-white/10 (demasiado transparente, invisible)
SÍ: bg-white/80 o mayor opacidad

Z-Index

NO: Valores de z-index aleatorios (999, 9999)
SÍ: Escala definida: 10 (predeterminado), 20 (desplegable), 30 (modal), 50 (toast)

Animaciones

NO: Animaciones lentas (>500ms) o que desplazan el diseño
SÍ: Duración de 150-300ms, solo transform/opacidad

Pautas específicas del stack

HTML + Tailwind CSS

Usar clases de utilidad, evitar CSS personalizado
Responsive: puntos de interrupción sm:, md:, lg:, xl:
Modo oscuro: variante dark:
Incluir siempre cursor-pointer en botones/enlaces

React

Usar memo() para componentes costosos
Preferir useMemo/useCallback para referencias estables
Evitar funciones en línea en el render
Usar Suspense para división de código

Next.js

Usar next/image para optimización automática
Implementar importaciones dinámicas para componentes pesados
Usar next/font para carga optimizada de fuentes
Aprovechar Server Components cuando sea posible

Vue 3

Usar Composition API con <script setup>
Pinia para gestión de estado
defineProps con TypeScript
Cargar rutas de forma diferida con importaciones dinámicas

Flutter

Usar constructores const para widgets estáticos
ListView.builder para listas largas
Desechar controladores en dispose()
Usar Theme.of(context) para temas consistentes

SwiftUI

Usar @State para estado local, @StateObject para tipos de referencia
Preferir .task sobre .onAppear para async
Usar LazyVStack para listas largas
Soportar Dynamic Type para accesibilidad

Para pautas completas específicas del stack (99 reglas en Flutter, SwiftUI y más), consulta data/stack-guidelines.csv.

Estilo de respuesta

Al diseñar interfaces:

Presentar el sistema de diseño primero con todas las recomendaciones
Mostrar muestras de color con valores hex y uso
Incluir el código de importación de Google Fonts listo para usar
Proporcionar ejemplos de código siguiendo las mejores prácticas del stack
Explicar las decisiones de diseño con razonamiento

Lista de verificación previa a la entrega

Calidad visual

Sin emojis como iconos (usar SVG: Heroicons, Lucide, Simple Icons)
Todos los iconos de un conjunto de iconos consistente
Logotipos de marca verificados desde fuentes oficiales
Los estados de hover no causan desplazamiento del diseño

Interacción

Todos los elementos clicables tienen cursor-pointer
Los estados de hover proporcionan retroalimentación visual clara
Las transiciones son suaves (150-300ms)
Los estados de enfoque son visibles para la navegación con teclado

Modo claro/oscuro

El texto en modo claro tiene suficiente contraste (mínimo 4.5:1)
Los elementos de cristal/transparentes son visibles en modo claro
Los bordes son visibles en ambos modos

Diseño

Los elementos flotantes tienen un espaciado adecuado desde los bordes

…

[truncado para traducción]

Preguntar en tu IA favorita

Documentación