UI/UX Pro Max - Inteligencia de Diseño

¿Qué hace UX Pro Max - Inteligencia de Diseño?

Inteligencia de diseño UI/UX para web, móvil y escritorio. Esta habilidad se debe usar al diseñar, construir, revisar o corregir interfaces, incluyendo páginas, componentes, sistemas de diseño, accesibilidad, interacción, maquetación responsiva, tipografía, color, gráficos e implementación de UI para pilas tecnológicas específicas. Datos locales localizables: 79 estilos localizables (50 activos), 192 paletas de producto y perfiles de razonamiento, 74 pares de fuentes, 119 pautas UX, 105 iconos, 17 ajustes preestablecidos de GSAP, 25 tipos de gráficos y 22 pilas.

Cuándo Aplicar

Cuando la tarea involucra estructura de UI, decisiones de diseño visual, patrones de interacción o control de calidad de la experiencia de usuario, se debe usar esta habilidad.

Casos de Uso Principales

Esta habilidad es más útil en los siguientes casos:

• Diseñar nuevas páginas (Landing Page, Dashboard, Admin, SaaS, Aplicación Móvil)
• Crear o refactorizar componentes de UI (botones, modales, formularios, tablas, gráficos, etc.)
• Seleccionar esquemas de color, sistemas de fuentes, normas de espaciado o sistemas de maquetación
• Revisar el código de UI en cuanto a experiencia de usuario, accesibilidad o consistencia visual
• Implementar estructuras de navegación, animaciones o comportamiento responsivo
• Tomar decisiones de diseño a nivel de producto (estilo, jerarquía de la información, expresión de marca)
• Mejorar la calidad percibida, claridad o usabilidad de la interfaz

Recomendado

Se recomienda usar esta habilidad en las siguientes situaciones:

• La UI se ve "poco profesional", pero la razón no es clara
• Se reciben comentarios sobre usabilidad o experiencia
• Se prepara la optimización de calidad de la UI antes del lanzamiento
• Se necesita alinear el diseño en múltiples plataformas (Web / iOS / Android)
• Se está construyendo un sistema de diseño o una biblioteca de componentes reutilizables

Omitir

No es necesario usar esta habilidad en los siguientes casos:

• Desarrollo de lógica puramente backend
• Diseño únicamente de API o base de datos
• Optimización de rendimiento no relacionada con la interfaz
• Trabajo de infraestructura o DevOps
• Scripts o tareas de automatización no visuales

Criterio de decisión: Si la tarea cambia cómo se ve una funcionalidad, cómo se usa, cómo se mueve o cómo se interactúa con ella, se debe usar esta habilidad.

Categorías de Reglas por Prioridad

Para consulta humana/de IA: usa 1→10 para decidir en qué categoría de reglas enfocarse primero; para reglas detalladas usa --domain <Dominio>. Los scripts no leen esta tabla.

Prioridad	Categoría	Impacto	Dominio	Verificaciones Clave (Debe Tener)	Anti-Patrones (Evitar)
1	Accesibilidad	CRÍTICO	ux	Contraste 4.5:1, Texto alternativo, Navegación por teclado, Etiquetas Aria	Eliminar anillos de enfoque, Botones solo con icono sin etiqueta
2	Toque e Interacción	CRÍTICO	ux	Tamaño mínimo 44×44px, Espaciado de 8px+, Retroalimentación de carga	Dependencia solo de hover, Cambios de estado instantáneos (0ms)
3	Rendimiento	ALTO	ux	WebP/AVIF, Carga diferida, Reservar espacio (CLS < 0.1)	Thrashing de maquetación, Desplazamiento acumulativo de maquetación
4	Selección de Estilo	ALTO	style, product	Coincidir con el tipo de producto, Consistencia, Iconos SVG (sin emojis)	Mezclar plano y esqueuomórfico aleatoriamente, Emojis como iconos
5	Maquetación y Responsividad	ALTO	ux	Puntos de ruptura mobile-first, Meta viewport, Sin desplazamiento horizontal	Desplazamiento horizontal, Anchos de contenedor fijos en px, Deshabilitar zoom
6	Tipografía y Color	MEDIO	typography, color	Base 16px, Altura de línea 1.5, Tokens de color semánticos	Texto < 12px en cuerpo, Gris sobre gris, Hex sin procesar en componentes
7	Animación	MEDIO	ux	Tiempo contextual, El movimiento transmite significado, Continuidad espacial	Una duración para cada transición, Animar ancho/alto, Sin movimiento reducido
8	Formularios y Retroalimentación	MEDIO	ux	Etiquetas visibles, Error cerca del campo, Texto de ayuda, Divulgación progresiva	Etiqueta solo como placeholder, Errores solo al inicio, Abrumar de entrada
9	Patrones de Navegación	ALTO	ux	Retroceso predecible, Navegación inferior ≤5, Enlaces profundos	Navegación sobrecargada, Comportamiento de retroceso roto, Sin enlaces profundos
10	Gráficos y Datos	BAJO	chart	Leyendas, Información sobre herramientas, Colores accesibles	Depender solo del color para transmitir significado

Referencia Rápida

1. Accesibilidad (CRÍTICO)

• color-contrast - Mínimo 4.5:1 para texto normal (texto grande 3:1); Material Design
• focus-states - Anillos de enfoque visibles en elementos interactivos (2–4px; Apple HIG, MD)
• alt-text - Texto alternativo descriptivo para imágenes significativas
• aria-labels - aria-label para botones solo con icono; accessibilityLabel en nativo (Apple HIG)
• icon-context - La semántica depende del uso: los iconos decorativos junto a texto visible se ocultan del árbol de accesibilidad; los iconos significativos necesitan una alternativa de texto; los controles de icono necesitan un nombre accesible y estado aplicable
• keyboard-nav - El orden de tabulación coincide con el orden visual; soporte completo de teclado (Apple HIG)
• form-labels - Usa label con atributo for
• skip-links - Saltar al contenido principal para usuarios de teclado
• heading-hierarchy - Secuencial h1→h6, sin saltos de nivel
• color-not-only - No transmitir información solo con color (añadir icono/texto)
• dynamic-type - Soporte de escalado de texto del sistema; evitar truncamiento a medida que el texto crece (Apple Dynamic Type, MD)
• reduced-motion - Respetar prefers-reduced-motion; reducir/deshabilitar animaciones cuando se solicite (Apple Reduced Motion API, MD)
• voiceover-sr - accessibilityLabel/accessibilityHint significativos; orden de lectura lógico para VoiceOver/lectores de pantalla (Apple HIG, MD)
• escape-routes - Proporcionar cancelar/volver en modales y flujos de varios pasos (Apple HIG)
• keyboard-shortcuts - Preservar atajos del sistema y de accesibilidad; ofrecer alternativas de teclado para arrastrar y soltar (Apple HIG)
• focus-not-obscured - UI fija, superposiciones y banners no deben ocultar el control enfocado por teclado (WCAG 2.2 AA)
• focus-not-obscured-enhanced - Mantener todo el componente enfocado visible (WCAG 2.2 AAA)
• focus-appearance - Verificar el área del indicador de enfoque y el contraste de estado 3:1; el enfoque visible por sí solo no es suficiente (WCAG 2.2 AAA)
• dragging-alternative - Cada acción de arrastre controlada por el autor necesita una alternativa de puntero único y de teclado (WCAG 2.2 AA)
• web-target-size - Los objetivos de puntero web necesitan 24×24 CSS px o una excepción documentada; no sustituir unidades nativas (WCAG 2.2 AA)
• consistent-help - Los mecanismos de ayuda repetidos se mantienen en el mismo orden relativo en un conjunto de páginas (WCAG 2.2 A)
• redundant-entry - Reutilizar información ya proporcionada en el mismo proceso a menos que la reentrada sea esencial (WCAG 2.2 A)
• accessible-authentication - Permitir gestores de contraseñas y pegado; proporcionar una ruta de autenticación no cognitiva (WCAG 2.2 Mínimo, AA). El criterio mejorado AAA no está representado en el conjunto de datos
• auto-rotation-controls - Los carruseles y el contenido en movimiento necesitan controles de pausa/parada y deben detenerse al enfocarse o con movimiento reducido (WAI)
• contextual-live-badge-updates - Anunciar un contado/estado cambiado como una frase contextual completa sin mover el enfoque; usar una región live/status apropiada y solo actualizaciones atómicas cuando sea necesario

2. Toque e Interacción (CRÍTICO)

• touch-target-size - Mínimo 44×44pt (Apple) / 48×48dp (Material); extender el área de impacto más allá de los límites visuales si es necesario
• touch-spacing - Espaciado mínimo de 8px/8dp entre objetivos táctiles (Apple HIG, MD)
• hover-vs-tap - Usar clic/toque para interacciones primarias; no depender solo de hover
• loading-buttons - Deshabilitar el botón durante operaciones asíncronas; mostrar spinner o progreso
• error-feedback - Mensajes de error claros cerca del problema
• cursor-pointer - Añadir cursor-pointer a elementos cliqueables (Web)
• gesture-conflicts - Evitar deslizamiento horizontal en el contenido principal; preferir desplazamiento vertical
• tap-delay - Usar touch-action: manipulation para reducir el retraso de 300ms (Web)
• standard-gestures - Usar gestos estándar de la plataforma de manera consistente; no redefinir (ej. deslizar hacia atrás, pellizcar para zoom) (Apple HIG)
• system-gestures - No bloquear gestos del sistema (Centro de Control, deslizar hacia atrás, etc.) (Apple HIG)
• press-feedback - Retroalimentación visual al presionar (ondulación/resaltado; capas de estado MD)
• haptic-feedback - Usar háptico para confirmaciones y acciones importantes; evitar el uso excesivo (Apple HIG)
• gesture-alternative - No depender de interacciones solo con gestos; siempre proporcionar controles visibles para acciones críticas
• safe-area-awareness - Mantener los objetivos táctiles principales alejados del notch, Dynamic Island, barra de gestos y bordes de pantalla
• no-precision-required - Evitar requerir toques de precisión de píxel perfecto en iconos pequeños o bordes delgados
• swipe-clarity - Las acciones de deslizamiento deben mostrar un indicador o pista clara (chevron, etiqueta, tutorial)
• drag-threshold - Usar un umbral de movimiento antes de iniciar el arrastre para evitar arrastres accidentales

3. Rendimiento (ALTO)

• image-optimization - Usar WebP/AVIF, imágenes responsivas (srcset/sizes), carga diferida de activos no críticos
• image-dimension - Declarar ancho/alto o usar aspect-ratio para evitar el desplazamiento de maquetación (Core Web Vitals: CLS)
• font-loading - Usar font-display: swap/optional para evitar texto invisible (FOIT); reservar espacio para reducir el desplazamiento de maquetación (MD)
• font-preload - Precargar solo fuentes críticas; evitar el uso excesivo de precarga en cada variante
• critical-css - Priorizar CSS above-the-fold (CSS crítico en línea u hoja de estilo cargada temprano)
• lazy-loading - Cargar diferidamente componentes no héroe mediante importación dinámica / división a nivel de ruta
• bundle-splitting - Dividir el código por ruta/característica (React Suspense / Next.js dynamic) para reducir la carga inicial y TTI
• third-party-scripts - Cargar scripts de terceros con async/defer; auditar y eliminar los innecesarios (MD)
• reduce-reflows - Evitar lecturas/escrituras frecuentes de maquetación; agrupar lecturas y luego escrituras del DOM
• content-jumping - Reservar espacio para contenido asíncrono para evitar saltos de maquetación (Core Web Vitals: CLS)
• lazy-load-below-fold - Usar loading="lazy" para imágenes y medios pesados que están below-the-fold
• virtualize-lists - Virtualizar listas con 50+ elementos para mejorar la eficiencia de memoria y el rendimiento de desplazamiento
• main-thread-budget - Mantener el trabajo por fotograma bajo ~16ms para 60fps; mover tareas pesadas fuera del hilo principal (HIG, MD)
• progressive-loading - Usar pantallas esqueleto / shimmer en lugar de spinners de bloqueo largos para operaciones >1s (Apple HIG)
• input-latency - Mantener la latencia de entrada bajo ~100ms para toques/desplazamientos (estándar de capacidad de respuesta de Material)
• tap-feedback-speed - Proporcionar retroalimentación visual dentro de los 100ms posteriores al toque (Apple HIG)
• debounce-throttle - Usar debounce/throttle para eventos de alta frecuencia (scroll, resize, input)
• offline-support - Proporcionar mensajes de estado sin conexión y respaldo básico (PWA / móvil)
• network-fallback - Ofrecer modos degradados para redes lentas (imágenes de menor resolución, menos animaciones)

4. Selección de Estilo (ALTO)

• style-match - Coincidir el estilo con el tipo de producto (usa --design-system para recomendaciones)
• consistency - Usar el mismo estilo en todas las páginas
• no-emoji-icons - Usar iconos SVG (Heroicons, Lucide), no emojis
• color-palette-from-product - Elegir la paleta del producto/industria (buscar --domain color)
• effects-match-style - Sombras, desenfoque, radio alineados con el estilo elegido (glass / flat / clay etc.)
• platform-adaptive - Respetar los modismos de la plataforma (iOS HIG vs Material): navegación, controles, tipografía, movimiento
• state-clarity - Hacer que los estados hover/pressed/disabled sean visualmente distintos mientras se mantiene el estilo (capas de estado de Material)
• elevation-consistent - Usar una escala de elevación/sombra consistente para tarjetas, hojas, modales; evitar valores de sombra aleatorios
• dark-mode-pairing - Diseñar variantes claro/oscuro juntas para mantener la marca, el contraste y el estilo consistentes
• icon-style-consistent - Usar un conjunto de iconos/lenguaje visual (grosor de trazo, radio de esquina) en todo el producto
• system-controls - Preferir controles nativos/del sistema sobre personalizados; personalizar solo cuando la marca lo requiera (Apple HIG)
• blur-purpose - Usar desenfoque para indicar el descarte de fondo (modales, hojas), no como decoración (Apple HIG)
• primary-action - Cada pantalla debe tener solo un CTA principal; las acciones secundarias deben ser visualmente subordinadas (Apple HIG)

5. Maquetación y Responsividad (ALTO)

• viewport-meta - width=device-width initial-scale=1 (nunca deshabilitar zoom)
• mobile-first - Diseñar primero para móvil, luego escalar a tableta y escritorio
• breakpoint-consistency - Usar puntos de ruptura sistemáticos (ej. 375 / 768 / 1024 / 1440)
• readable-font-size - Mínimo 16px de texto de cuerpo en móvil (evita el auto-zoom de iOS)
• line-length-control - Móvil 35–60 caracteres por línea; escritorio 60–75 caracteres
• horizontal-scroll - Sin desplazamiento horizontal en móvil; asegurar que el contenido quepa en el ancho de la ventana gráfica
• spacing-scale - Usar sistema de espaciado incremental de 4pt/8dp (Material Design)
• touch-density - Mantener el espaciado de los componentes cómodo para el tacto: no apretado, sin causar toques incorrectos
• container-width - Ancho máximo consistente en escritorio (max-w-6xl / 7xl)
• z-index-management - Definir escala de z-index en capas (ej. 0 / 10 / 20 / 40 / 100 / 1000)
• fixed-element-offset - La barra de navegación fija/barra inferior debe reservar un relleno seguro para el contenido subyacente
• scroll-behavior - Evitar regiones de desplazamiento anidadas que interfieran con la experiencia de desplazamiento principal
• viewport-units - Preferir min-h-dvh sobre 100vh en móvil
• orientation-support - Mantener la maquetación legible y operable en modo horizontal
• content-priority - Mostrar el contenido principal primero en móvil; plegar u ocultar el contenido secundario
• visual-hierarchy - Establecer jerarquía mediante tamaño, espaciado, contraste — no solo color
• compact-label-overflow - Elegir insignia, etiqueta de estado, chip de filtro o valor extraíble según su semántica; mantener las etiquetas esenciales disponibles y divulgar el truncamiento inevitable a los usuarios de puntero y teclado
• chip-collection-reflow - Envolver la colección antes de reducir las etiquetas; hacer que un resumen de desbordamiento +n sea una divulgación operable en lugar de ocultar valores

6. Tipografía y Color (MEDIO)

• line-height - Usar 1.5-1.75 para el texto del cuerpo
• line-length - Limitar a 65-75 caracteres por línea
• font-pairing - Coincidir las personalidades de las fuentes de encabezado/cuerpo
• font-scale - Escala de tipo consistente (ej. 12 14 16 18 24 32)
• contrast-readability - Texto más oscuro sobre fondos claros (ej. slate-900 sobre blanco)
• text-styles-system - Usar el sistema de tipos de la plataforma: estilos Dynamic Type de iOS 11 / roles de tipo Material 5 (display, headline, title, body, label) (HIG, MD)
• weight-hierarchy - Usar font-weight para reforzar la jerarquía: Encabezados en negrita (600–700), Cuerpo regular (400), Etiquetas medium (500) (MD)
• color-semantic - Definir tokens de color semánticos (primary, secondary, error, surface, on-surface) no hex sin procesar en componentes (sistema de color de Material)
• color-dark-mode - El modo oscuro usa variantes tonales desaturadas / más claras, no colores invertidos; probar el contraste por separado (HIG, MD)
• color-accessible-pairs - Los pares de primer plano/fondo deben cumplir 4.5:1 (AA) o 7:1 (AAA); usar herramientas para verificar (WCAG, MD)
• color-not-decorative-only - El color funcional (rojo de error, verde de éxito) debe incluir icono/texto; evitar significado solo con color (HIG, MD)
• truncation-strategy - Preferir envoltura sobre truncamiento; al truncar usar puntos suspensivos y proporcionar el texto completo mediante tooltip/expand (Apple HIG)
• letter-spacing - Respetar el interletraje predeterminado por plataforma; evitar el seguimiento apretado en el texto del cuerpo (HIG, MD)
• number-tabular - Usar figuras tabulares/monoespaciadas para columnas de datos, precios y