lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

UI/UX Pro Max - Inteligencia de Diseño

Guía integral de diseño para aplicaciones web y móviles. Contiene 67 estilos, 96 paletas de colores, 57 pares tipográficos, 99 pautas de UX y 25 tipos de gráficos en 13 stacks tecnológicos. Base de datos buscable con recomendaciones basadas en prioridad.

Cuándo Aplicar

Consulte estas pautas cuando:

• Diseñe nuevos componentes de UI o páginas
• Elija paletas de colores y tipografía
• Revise código en busca de problemas de UX
• Cree landing pages o dashboards
• Implemente requisitos de accesibilidad

Categorías de Reglas por Prioridad

Prioridad	Categoría	Impacto	Dominio
1	Accesibilidad	CRÍTICO	ux
2	Táctil e Interacción	CRÍTICO	ux
3	Rendimiento	ALTO	ux
4	Layout y Responsive	ALTO	ux
5	Tipografía y Color	MEDIO	typography, color
6	Animación	MEDIO	ux
7	Selección de Estilo	MEDIO	style, product
8	Gráficos y Datos	BAJO	chart

Referencia Rápida

1. Accesibilidad (CRÍTICO)

• color-contrast - Relación mínima de 4.5:1 para texto normal
• focus-states - Anillos de enfoque visibles en elementos interactivos
• alt-text - Texto alternativo descriptivo para imágenes significativas
• aria-labels - aria-label para botones solo con ícono
• keyboard-nav - El orden de tabulación coincide con el orden visual
• form-labels - Usar label con atributo for

2. Táctil e Interacción (CRÍTICO)

• touch-target-size - Áreas táctiles mínimas de 44x44px
• hover-vs-tap - Usar clic/toque para interacciones principales
• loading-buttons - Deshabilitar botón durante operaciones asíncronas
• error-feedback - Mensajes de error claros cerca del problema
• cursor-pointer - Agregar cursor-pointer a elementos cliqueables

3. Rendimiento (ALTO)

• image-optimization - Usar WebP, srcset, lazy loading
• reduced-motion - Verificar prefers-reduced-motion
• content-jumping - Reservar espacio para contenido asíncrono

4. Layout y Responsive (ALTO)

• viewport-meta - width=device-width initial-scale=1
• readable-font-size - Mínimo 16px para texto del cuerpo en móvil
• horizontal-scroll - Asegurar que el contenido quepa en el ancho de la ventana
• z-index-management - Definir escala de z-index (10, 20, 30, 50)

5. Tipografía y Color (MEDIO)

• line-height - Usar 1.5-1.75 para texto del cuerpo
• line-length - Limitar a 65-75 caracteres por línea
• font-pairing - Hacer coincidir personalidades de fuente de título/cuerpo

6. Animación (MEDIO)

• duration-timing - Usar 150-300ms para microinteracciones
• transform-performance - Usar transform/opacity, no width/height
• loading-states - Pantallas esqueleto o spinners

7. Selección de Estilo (MEDIO)

• style-match - Hacer coincidir el estilo con el tipo de producto
• consistency - Usar el mismo estilo en todas las páginas
• no-emoji-icons - Usar íconos SVG, no emojis

8. Gráficos y Datos (BAJO)

• chart-type - Hacer coincidir el tipo de gráfico con el tipo de datos
• color-guidance - Usar paletas de colores accesibles
• data-table - Proporcionar una alternativa de tabla para accesibilidad

Cómo Usar

Busque dominios específicos usando la herramienta CLI a continuación.

---

Prerrequisitos

Verifique si Python está instalado:

python3 --version || python --version

Si Python no está instalado, instálelo según el sistema operativo del usuario:

macOS:

brew install python3

Ubuntu/Debian:

sudo apt update && sudo apt install python3

Windows:

winget install Python.Python.3.12

---

Cómo Usar Esta Habilidad

Cuando el usuario solicite trabajo de UI/UX (diseñar, construir, crear, implementar, revisar, corregir, mejorar), siga este flujo de trabajo:

Paso 1: Analizar los Requisitos del Usuario

Extraiga información clave de la solicitud del usuario:

• Tipo de producto: SaaS, e-commerce, portafolio, dashboard, landing page, etc.
• Palabras clave de estilo: minimalista, divertido, profesional, elegante, modo oscuro, etc.
• Industria: salud, fintech, juegos, educación, etc.
• Stack: React, Vue, Next.js, o por defecto html-tailwind

Paso 2: Generar Sistema de Diseño (REQUERIDO)

Siempre comience con --design-system para obtener recomendaciones completas con razonamiento:

python3 skills/ui-ux-pro-max/scripts/search.py "<tipo_producto> <industria> <palabras_clave>" --design-system [-p "Nombre del Proyecto"]

Este comando:

1. Busca en 5 dominios en paralelo (producto, estilo, color, landing, tipografía)
2. Aplica reglas de razonamiento desde ui-reasoning.csv para seleccionar las mejores coincidencias
3. Devuelve un sistema de diseño completo: patrón, estilo, colores, tipografía, efectos
4. Incluye antipatrones a evitar

Ejemplo:

python3 skills/ui-ux-pro-max/scripts/search.py "servicio de spa de belleza y bienestar" --design-system -p "Serenity Spa"

Paso 2b: Persistir Sistema de Diseño (Patrón Maestro + Sobrescrituras)

Para guardar el sistema de diseño y recuperarlo jerárquicamente entre sesiones, agregue --persist:

python3 skills/ui-ux-pro-max/scripts/search.py "<consulta>" --design-system --persist -p "Nombre del Proyecto"

Esto crea:

• design-system/MASTER.md — Fuente de Verdad Global con todas las reglas de diseño
• design-system/pages/ — Carpeta para sobrescrituras específicas de página

Con sobrescritura de página específica:

python3 skills/ui-ux-pro-max/scripts/search.py "<consulta>" --design-system --persist -p "Nombre del Proyecto" --page "dashboard"

Esto también crea:

• design-system/pages/dashboard.md — Desviaciones específicas de página del archivo Maestro

Cómo funciona la recuperación jerárquica:

1. Al construir una página específica (ej., "Checkout"), primero verifique design-system/pages/checkout.md
2. Si el archivo de página existe, sus reglas sobrescriben el archivo Maestro
3. Si no, use exclusivamente design-system/MASTER.md

Paso 3: Complementar con Búsquedas Detalladas (según sea necesario)

Después de obtener el sistema de diseño, use búsquedas por dominio para obtener detalles adicionales:

python3 skills/ui-ux-pro-max/scripts/search.py "<palabra_clave>" --domain <dominio> [-n <max_resultados>]

Cuándo usar búsquedas detalladas:

Necesidad	Dominio	Ejemplo
Más opciones de estilo	style	--domain style "glassmorphism oscuro"
Recomendaciones de gráficos	chart	--domain chart "dashboard en tiempo real"
Mejores prácticas de UX	ux	--domain ux "animación accesibilidad"
Fuentes alternativas	typography	--domain typography "elegante lujo"
Estructura de landing	landing	--domain landing "hero prueba-social"

Paso 4: Pautas del Stack (Por defecto: html-tailwind)

Obtenga mejores prácticas específicas de implementación. Si el usuario no especifica un stack, use por defecto html-tailwind.

python3 skills/ui-ux-pro-max/scripts/search.py "<palabra_clave>" --stack html-tailwind

Stacks disponibles: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose

---

Referencia de Búsqueda

Dominios Disponibles

Dominio	Uso para	Ejemplos de Palabras Clave
product	Recomendaciones de tipo de producto	SaaS, e-commerce, portafolio, salud, belleza, servicio
style	Estilos de UI, colores, efectos	glassmorphism, minimalismo, modo oscuro, brutalismo
typography	Pares tipográficos, Google Fonts	elegante, divertido, profesional, moderno
color	Paletas de colores por tipo de producto	saas, ecommerce, salud, belleza, fintech, servicio
landing	Estructura de página, estrategias de CTA	hero, hero-céntrico, testimonial, precios, prueba-social
chart	Tipos de gráficos, recomendaciones de librerías	tendencia, comparación, línea de tiempo, embudo, pastel
ux	Mejores prácticas, antipatrones	animación, accesibilidad, z-index, carga
react	Rendimiento de React/Next.js	waterfall, bundle, suspense, memo, rerender, cache
web	Pautas de interfaz web	aria, focus, teclado, semántico, virtualizar
prompt	Prompts de IA, palabras clave CSS	(nombre del estilo)

Stacks Disponibles

Stack	Enfoque
html-tailwind	Utilidades de Tailwind, responsive, a11y (POR DEFECTO)
react	Estado, hooks, rendimiento, patrones
nextjs	SSR, enrutamiento, imágenes, rutas API
vue	Composition API, Pinia, Vue Router
svelte	Runes, stores, SvelteKit
swiftui	Vistas, Estado, Navegación, Animación
react-native	Componentes, Navegación, Listas
flutter	Widgets, Estado, Layout, Temas
shadcn	Componentes shadcn/ui, temas, formularios, patrones
jetpack-compose	Composables, Modificadores, Elevación de Estado, Recomposición

---

Flujo de Trabajo de Ejemplo

Solicitud del usuario: "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"

Paso 1: Analizar Requisitos

• Tipo de producto: Servicio de Belleza/Spa
• Palabras clave de estilo: elegante, profesional, suave
• Industria: Belleza/Bienestar
• Stack: html-tailwind (por defecto)

Paso 2: Generar Sistema de Diseño (REQUERIDO)

python3 skills/ui-ux-pro-max/scripts/search.py "servicio de spa de belleza y bienestar elegante" --design-system -p "Serenity Spa"

Salida: Sistema de diseño completo con patrón, estilo, colores, tipografía, efectos y antipatrones.

Paso 3: Complementar con Búsquedas Detalladas (según sea necesario)

# Obtener pautas de UX para animación y accesibilidad
python3 skills/ui-ux-pro-max/scripts/search.py "animación accesibilidad" --domain ux

# Obtener opciones de tipografía alternativas si es necesario
python3 skills/ui-ux-pro-max/scripts/search.py "elegante lujo serif" --domain typography

Paso 4: Pautas del Stack

python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive formulario" --stack html-tailwind

Luego: Sintetizar el sistema de diseño + las búsquedas detalladas e implementar el diseño.

---

Formatos de Salida

El flag --design-system soporta dos formatos de salida:

# Cuadro ASCII (por defecto) - mejor para terminal
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - mejor para documentación
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

---

Consejos para Mejores Resultados

1. Sea específico con las palabras clave - "dashboard SaaS de salud" > "app"
2. Busque varias veces - Diferentes palabras clave revelan diferentes perspectivas
3. Combine dominios - Estilo + Tipografía + Color = Sistema de diseño completo
4. Siempre verifique UX - Busque "animación", "z-index", "accesibilidad" para problemas comunes
5. Use el flag de stack - Obtenga mejores prácticas específicas de implementación
6. Itere - Si la primera búsqueda no coincide, pruebe con diferentes palabras clave

---

Reglas Comunes para UI Profesional

Estos son problemas frecuentemente pasados por alto que hacen que la UI se vea poco profesional:

Íconos y Elementos Visuales

Regla	Hacer	No Hacer
Sin íconos emoji	Usar íconos SVG (Heroicons, Lucide, Simple Icons)	Usar emojis como 🎨 🚀 ⚙️ como íconos de UI
Estados hover estables	Usar transiciones de color/opacidad en hover	Usar transformaciones de escala que cambien el layout
Logotipos de marca correctos	Investigar SVG oficial de Simple Icons	Adivinar o usar rutas de logotipo incorrectas
Tamaño de ícono consistente	Usar viewBox fijo (24x24) con w-6 h-6	Mezclar diferentes tamaños de íconos aleatoriamente

Interacción y Cursor

Regla	Hacer	No Hacer
Cursor pointer	Agregar cursor-pointer a todas las tarjetas cliqueables/hover	Dejar el cursor por defecto en elementos interactivos
Feedback hover	Proporcionar feedback visual (color, sombra, borde)	Sin indicación de que el elemento es interactivo
Transiciones suaves	Usar transition-colors duration-200	Cambios de estado instantáneos o demasiado lentos (>500ms)

Contraste de Modo Claro/Oscuro

Regla	Hacer	No Hacer
Tarjeta glass modo claro	Usar bg-white/80 u opacidad mayor	Usar bg-white/10 (demasiado transparente)
Contraste de texto claro	Usar #0F172A (slate-900) para texto	Usar #94A3B8 (slate-400) para texto del cuerpo
Texto atenuado claro	Usar #475569 (slate-600) como mínimo	Usar gray-400 o más claro
Visibilidad de borde	Usar border-gray-200 en modo claro	Usar border-white/10 (invisible)

Layout y Espaciado

Regla	Hacer	No Hacer
Navbar flotante	Agregar espaciado top-4 left-4 right-4	Pegar navbar a top-0 left-0 right-0
Padding de contenido	Considerar la altura del navbar fijo	Dejar que el contenido se oculte detrás de elementos fijos
max-width consistente	Usar el mismo max-w-6xl o max-w-7xl	Mezclar diferentes anchos de contenedor

---

Lista de Verificación Previa a la Entrega

Antes de entregar código de UI, verifique estos elementos:

Calidad Visual

• No se usan emojis como íconos (use SVG en su lugar)
• Todos los íconos provienen de un conjunto consistente (Heroicons/Lucide)
• Los logotipos de marca son correctos (verificados desde Simple Icons)
• Los estados hover no causan cambio de layout
• Use colores del tema directamente (bg-primary), no wrapper var()

Interacción

• Todos los elementos cliqueables tienen cursor-pointer
• Los estados hover proporcionan feedback visual claro
• Las transiciones son suaves (150-300ms)
• Los estados de enfoque son visibles para navegación por teclado

Modo Claro/Oscuro

• El texto en modo claro tiene suficiente contraste (4.5:1 mínimo)
• Los elementos de vidrio/transparentes son visibles en modo claro
• Los bordes son visibles en ambos modos
• Pruebe ambos modos antes de la entrega

Layout

• Los elementos flotantes tienen el espaciado adecuado desde los bordes
• Ningún contenido oculto detrás de navbars fijos
• Responsive a 375px, 768px, 1024px, 1440px
• Sin desplazamiento horizontal en móvil

Accesibilidad

• Todas las imágenes tienen texto alternativo
• Los campos del formulario tienen etiquetas
• El color no es el único indicador
• prefers-reduced-motion respetado