UI Design Brain
Este skill proporciona una base de conocimiento curada de más de 60 patrones de componentes de interfaz de usuario extraídos de component.gallery y enriquecidos con las mejores prácticas, guías de diseño y reglas de uso. Reemplaza las suposiciones genéricas con conocimiento real de sistemas de diseño al generar interfaces.
Antes de escribir cualquier código de interfaz de usuario, consulta este skill para seleccionar los componentes adecuados y seguir sus mejores prácticas. Lee components.md para obtener la referencia completa.
Cuándo usar este skill
Aplícalo siempre que el usuario solicite construir, diseñar o generar:
- Páginas web, páginas de aterrizaje, sitios de marketing
- Paneles de control SaaS, paneles de administración, páginas de configuración
- Formularios, tablas de datos, estructuras de navegación
- Modales, paneles laterales, popovers o patrones de superposición
- Cualquier componente de interfaz en React, HTML/CSS o Tailwind
Filosofía de diseño
Cada interfaz generada debe sentirse moderna, minimalista y lista para producción, no como una plantilla.
Principios fundamentales
- Contención sobre decoración. Menos elementos, altamente refinados. El espacio en blanco es una característica.
- La tipografía establece la jerarquía. Combina una fuente de visualización distintiva con una fuente de cuerpo limpia. Maximiza el contraste de peso entre títulos y etiquetas.
- Un solo momento de color fuerte. Primero una paleta neutra (blancos cálidos, casi negros, tonos medios apagados). Introduce un acento seguro. Si pudiera aparecer en un póster o portada de libro, probablemente sea atemporal.
- El espaciado es estructura. Usa una cuadrícula de 8 px. Los espacios más ajustados agrupan elementos relacionados; los espacios generosos dejan respirar el contenido principal.
- La accesibilidad no es negociable. Mínimos de contraste WCAG AA. Indicadores de enfoque. HTML semántico. Navegación por teclado.
- Sin estética genérica de IA. Evita: degradados morados sobre blanco, valores predeterminados de Inter/Roboto, cuadrículas de tarjetas espaciadas uniformemente y diseños prefabricados. Cada interfaz debe sentirse diseñada para su contexto específico.
Nivel de calidad
El resultado debe coincidir con lo que esperarías de un diseñador de producto sénior en una empresa SaaS de primer nivel:
- Ritmo visual limpio con asimetría intencional
- Indicadores de interacción obvios (estados hover, focus, active)
- Casos extremos bien manejados (estados vacíos, carga, error)
- Adaptable sin artefactos de punto de interrupción
Flujo de trabajo
Paso 1 — Identificar componentes
Lee la solicitud del usuario y determina qué componentes de interfaz se necesitan. Consulta components.md para encontrar cada componente por nombre o alias.
Asignaciones comunes:
- "navegación" → Encabezado, Navegación, Migas de pan, Pestañas
- "formulario" → Formulario, Entrada de texto, Selección, Casilla de verificación, Botón de opción, Botón
- "visualización de datos" → Tabla, Tarjeta, Lista, Insignia, Avatar
- "retroalimentación" → Alerta, Notificación, Modal, Spinner, Barra de progreso, Estado vacío
- "entrada" → Entrada de texto, Área de texto, Selección, Cuadro combinado, Selector de fecha, Carga de archivo, Control deslizante
- "superposición" → Modal, Panel lateral, Popover, Tooltip, Menú desplegable
Paso 2 — Aplicar las mejores prácticas
Para cada componente de la interfaz, sigue sus mejores prácticas de la referencia. Reglas clave que se aplican en general:
Diseño
- Formularios de una sola columna: más rápidos de escanear
- Carriles verticales consistentes en filas repetidas (listas, tablas)
- Ranuras de ancho fijo para iconos y acciones, incluso cuando estén vacías
- Tarjetas: jerarquía medio → título → metadatos → acción
Interacción
- Botones: etiquetas con verbo primero ("Guardar cambios", no "Enviar"), un botón primario por sección
- Modales: proporciona siempre X, Cancelar y Escape; atrapa el foco; devuelve el foco al cerrar
- Notificaciones: cierre automático en 4–6 s, permite cierre manual, apila las más nuevas arriba
- Alternadores: efecto inmediato solo; usa casillas de verificación en formularios que requieran Guardar
Tipografía y espaciado
- Jerarquía estricta de encabezados (h1 → h2 → h3), un h1 por página
- Objetivos táctiles mínimos de 44 px en móvil
- Etiquetas sobre entradas (formularios verticales) o al lado (horizontales)
- Texto de marcador de posición como pista de formato, nunca como reemplazo de etiqueta
Estados
- Estados vacíos: ilustración + título útil + CTA principal
- Carga: pantallas esqueleto > spinners (mostrar después de un retraso de 300 ms)
- Validación: en línea al perder el foco, no en cada pulsación de tecla
- Elementos deshabilitados: visualmente distintos pero aún legibles
Paso 3 — Elegir una dirección de diseño
Selecciona el preset de estilo que mejor coincida con la intención del usuario, o pregunta si no está claro:
SaaS moderno (predeterminado)
- Paleta neutra, un acento fuerte
- Cuadrícula de 8 px, espacio en blanco generoso
- Limpio, profesional, espacioso
Minimalista tipo Apple
- Casi monocromático, grises cálidos
- Jerarquía de tipo grande, kerning ajustado en texto de visualización
- Abundante espacio en blanco, microinteracciones (150–250 ms ease-out)
Empresarial / Corporativo
- Denso en información, regiones bien definidas
- Escala de espaciado compacta (4/8/12/16/24 px)
- Manejo robusto de formularios, totalmente navegable por teclado
Creativo / Portafolio
- Audaz, expresivo, fuerte personalidad visual
- Diseños asimétricos, contraste dramático de escala
- Tipografía editorial, colores de acento vivos
Panel de datos
- Denso en datos, optimizado para escaneabilidad
- Alineación vertical consistente entre filas
- Jerarquía de métricas clara: KPI → tendencia → detalle
Paso 4 — Generar código
Escribe código listo para producción siguiendo estas reglas:
Stack: React + Tailwind CSS (a menos que el usuario especifique lo contrario)
Espaciado: Escala de espaciado de Tailwind (p-2, gap-4, etc.) en una cuadrícula de 8px
Colores: Variables CSS o configuración de Tailwind para consistencia de paleta
Tipografía: Utilidades de texto de Tailwind; combinaciones de fuentes expresivas mediante Google Fonts
Estados: Implementar hover, focus, active, disabled para todos los elementos interactivos
Adaptable: Mobile-first; probar en 375, 768, 1440 px
Accesibilidad: HTML semántico, ARIA donde sea necesario, gestión del foco
Referencia rápida de componentes
A continuación se muestran los 15 componentes más utilizados. Para la referencia completa de más de 60 componentes con mejores prácticas, alias y ejemplos de diseño, consulta components.md.
| Componente | Cuándo usarlo | Regla clave |
|---|---|---|
| Botón | Desencadenar acciones | Etiquetas con verbo primero; un botón primario por sección |
| Tarjeta | Representar una entidad | Medio → título → metadatos → acción; sombra O borde, no ambos |
| Modal | Atención enfocada | Atrapar foco; X + Cancelar + Escape para cerrar |
| Navegación | Enlaces de página/sección | Máximo 5–7 elementos; estado activo claro |
| Tabla | Datos estructurados | Encabezado fijo; números alineados a la derecha; columnas ordenables |
| Pestañas | Cambiar paneles | 2–7 pestañas; indicador activo; acordeón en móvil |
| Formulario | Recopilar entrada | Una sola columna; etiquetas arriba; validación en línea al perder el foco |
| Notificación | Confirmación breve | Cierre automático en 4–6 s; acción de deshacer para operaciones destructivas |
| Alerta | Estado importante | Colores semánticos + icono; máximo 2 oraciones |
| Panel lateral | Panel secundario | Derecha para detalle, izquierda para navegación; 320–480 px en escritorio |
| Entrada de búsqueda | Encontrar contenido | Atajo Cmd/Ctrl+K; debounce 200–300 ms |
| Estado vacío | Sin datos | Ilustración + título + CTA; enfoque positivo |
| Esqueleto | Marcador de posición de carga | Coincidir con la forma del diseño real; animación de brillo |
| Insignia | Etiqueta de estado/metadatos | 1–2 palabras; forma de píldora para estado; paleta de colores limitada |
| Menú desplegable | Opciones de acción/navegación | 7±2 elementos; acciones destructivas al final en rojo |
Antipatrones que debes evitar
Nunca generes estos: indican una interfaz genérica y de baja calidad:
- Insignias arcoíris: cada estado de un color brillante diferente sin significado semántico
- Modal dentro de modal: usa una página o panel lateral para flujos complejos
- Botón de envío deshabilitado sin explicación: indica siempre lo que falta
- Spinner para diseños predecibles: usa pantallas esqueleto en su lugar
- Enlaces "Haga clic aquí": el texto del enlace debe describir el destino
- Menú de hamburguesa en escritorio: usa navegación visible cuando el espacio lo permita
- Carruseles de avance automático: permite que los usuarios controlen la navegación
- Campos de formulario solo con marcador de posición: usa siempre etiquetas visibles
- Botones de igual peso: establece jerarquía primario/secundario/terciario
- Texto muy pequeño (< 12 px): texto del cuerpo mínimo 14 px, prefiere 16 px