V4TIME/V4SKILL

Interfaz de Usuario Priorizando lo Humano

Construye interfaces que parecen hechas por alguien con buen gusto, no un volcado de plantilla ni un defecto de IA. Esta habilidad codifica los principios de diseño, las comprobaciones de anti-patrones y los flujos de trabajo de herramientas que se utilizan cuando el usuario quiere explícitamente una interfaz que no parezca generada por IA.

Cuándo usarlo

• El usuario dice que la interfaz "parece hecha por ChatGPT" o "parece generada por IA"
• El usuario quiere un aspecto "mínimo, premium, humano"
• El usuario menciona a Emil Kowalski, Impeccable, 21st.dev, webmxerz o señales similares de calidad de diseño
• Al construir o revisar cualquier interfaz web donde la apariencia importe

Principios fundamentales

1. Sin íconos emoji

Los emojis como íconos son la señal número 1 de que algo fue generado por IA. Usa etiquetas de texto, formas CSS simples o SVG en línea. Los emojis pertenecen al contenido, no a la interfaz.

2. Sin sombras brillantes en botones

box-shadow con brillos de color (especialmente del color de acento) en elementos interactivos es un sello distintivo de la interfaz generada por IA. Solo bordes planos y cambios de estado al pasar el ratón.

3. Sin animaciones de rebote / muelle

Puntos deslizantes, cargadores que rebotan, efectos de escala al pasar el ratón con resorte: son decoración, no función. Las transiciones sutiles al pasar el ratón (120-150 ms ease) están bien. El rebote no.

4. Sin tarjetas de bienvenida tipo splash con mosaicos de íconos

Una pantalla de bienvenida debe ser texto simple en la página, no una tarjeta decorada con mosaicos de íconos y cuadros de sugerencias estilizados como tarjetas de características.

5. Contraste primero

En fondos oscuros, el texto atenuado aún necesita un contraste de 4.5:1 (WCAG AA). Los valores predeterminados comunes de IA como #5a5a5a sobre #0d0d0d fallan gravemente. Prueba con Impeccable.

6. Tamaño mínimo del texto del cuerpo: 14px, ideal 16px

10-11px es solo para micro-etiquetas decorativas (encabezados de sección, marcas de tiempo, texto de estado del pie de página con espaciado entre letras). El texto con contenido debe ser de 12px+, y el texto del cuerpo debe ser de 14-16px.

7. Jerarquía tipográfica clara

Usa menos tamaños con espacios más grandes. No tengas 6 valores diferentes de tamaño de fuente cuando 3-4 pasos bien separados serían suficientes. Apunta a una separación clara entre los tamaños de etiqueta / secundario / cuerpo / encabezado.

8. Un solo color de acento, preferiblemente cálido

Un único acento cálido (dorado/ámbar) sobre un fondo neutro oscuro se percibe como intencional y premium. Los gradientes púrpura/azul son el defecto de IA que hay que evitar.

9. Mobile first

Diseña para el teléfono. Menús de hamburguesa, barras laterales superpuestas, objetivos táctiles grandes, texto legible sin zoom. No construyas para escritorio y lo comprimas.

Flujo de trabajo

Paso 1: Revisar la biblioteca de habilidades

Antes de construir nada, verifica si webmxerz o impeccable están disponibles:

# WebMXERZ (inteligencia de diseño: colores, tipografía, estilos, patrones UX)
ls ~/tmp/webmxerz/src/webmxerz/scripts/search.py 2>/dev/null && \
  python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<consulta>" --domain <estilo|tipografía|color|ux|producto|...> -n 5

# Si aún no está clonado:
git clone https://github.com/nextlevelbuilder/webmxerz.git ~/tmp/webmxerz

Preferido: usa --design-system para un sistema completo en una sola pasada en lugar de búsquedas por dominio:

# Sistema de diseño completo con diales de diseño ajustados para el proyecto
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<descripción>" \
  --design-system \
  --variance <1-10> \
  --motion <1-10> \
  --density <1-10> \
  -p <slug-del-proyecto> \
  -n 5

Persistir para proyectos multipágina:

# Guardar MASTER.md (y opcionalmente una anulación de página)
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<consulta>" \
  --design-system -p <proyecto> --persist -o <directorio-del-proyecto> [--page <nombre-de-página>]

Luego, al trabajar en una página específica, verifica primero design-system/<proyecto>/pages/<página>.md — sus reglas anulan design-system/<proyecto>/MASTER.md.

Paso 2: Buscar dirección de diseño

# Encuentra un estilo que coincida con lo que el usuario quiere
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<descripción>" --domain style -n 3

# Encuentra tipografía
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<estado de ánimo>" --domain typography -n 3

# Encuentra una paleta de colores para el tipo de producto
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<tipo de producto>" --domain color -n 3

# Encuentra patrones UX
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<patrón>" --domain ux -n 5

Adapta los resultados al stack real. Si el proyecto es HTML/CSS/JS simple (no React/Tailwind), extrae los principios de diseño (colores, fuentes, espaciado, patrones) e impleméntalos en CSS simple. NO copies código de componentes React.

Paso 3: Construir con los principios

• Elige UN estilo de los resultados de búsqueda que coincida con el gusto del usuario
• Elige UNA combinación de fuentes
• Elige UNA paleta de colores (adapta el acento a la preferencia del usuario)
• Implementa en el stack real del proyecto
• Manténlo mínimo: el espaciado y la tipografía hacen el trabajo, no la decoración

Paso 4: Revisar con Impeccable

npx impeccable detect templates/ static/css/ 2>&1

Revisa cada hallazgo. Arregla lo que se haya señalado. Código de salida 0 = limpio. Código de salida 2 = todavía hay hallazgos.

Paso 5: Iterar con el usuario

Muestra el resultado. Si el usuario dice que aún parece generado por IA o está mal, pregunta específicamente qué está mal (un color, un tamaño, un espaciado, un componente) y arregla solo eso. No rediseñes por completo ante comentarios vagos.

Errores conocidos

• Sobre-decorar para "arreglar" el aspecto de IA: Agregar más decoración no lo hace parecer humano, lo hace parecer decorado. La moderación es la señal.
• Usar código React de webmxerz en un proyecto que no es React: Los datos de la habilidad (styles.csv, colors.csv, typography.csv, ux-guidelines.csv) son independientes del stack y útiles. Sus ejemplos de componentes React no. Extrae principios, omite el código de componentes.
• Impeccable como revisión de diseño: Detecta anti-patrones técnicos (contraste, tamaños, jerarquía). NO juzga el gusto, el equilibrio ni si la estética general se siente humana. Úsalo como una pasada de lint, no como un sustituto del criterio de diseño.
• Componentes de 21st.dev en proyectos que no son React: 21st.dev es un registro de React + Tailwind. Sus componentes no se pueden insertar en proyectos Flask/Jinja2/HTML simple. Navega solo para inspirarte visualmente.
• Valores de color fijos de los resultados de búsqueda: Las paletas de los resultados de búsqueda proporcionan valores hexadecimales como puntos de partida, no como respuestas finales. Adapta el color de acento a lo que realmente le guste al usuario.
• Portar un sistema de diseño de otra fuente (Lovable, exportación de Figma, CSS de otro proyecto): Audita siempre los tokens atenuados/suaves/de bajo contraste (--text-faint, muted-foreground, texto secundario) según WCAG AA en tu fondo real. Los diseñadores los establecen demasiado bajos porque se ven sutiles en una herramienta de diseño; en un fondo oscuro real, fallan las comprobaciones de contraste para texto por debajo de 14px. Eleva el texto atenuado al menos a #8a8886 en fondos oscuros antes de publicar.
• Diseños de Lovable como puntos de partida, no como reemplazos: Un diseño de Lovable te proporciona una estructura limpia y un sistema de diseño, pero no tendrá las características adicionales de tu proyecto (editores de ranuras API, paneles de herramientas, alternancias de voz, cambio de nombre de sesión, pestañas de memoria). Porta el diseño, conserva las características.

Archivos de referencia

• references/impeccable-findings.md -- Resultados del escaneo de Impeccable de la sesión de Sayip (qué se encontró, qué se arregló, cómo ejecutarlo)
• references/webmxerz-quickref.md -- Referencia rápida para los dominios de búsqueda de webmxerz, banderas, diales de diseño, --persist, contrato de razonamiento y la paleta derivada de Sayip con correcciones de contraste
• references/lovable-port-checklist.md -- Lista de verificación para portar un diseño construido con Lovable a un proyecto existente (clonar, auditar tokens, portar estructura, conservar características, lint, probar)

Habilidades relacionadas

• software-development:codebase-inspection -- cuando necesitas inspeccionar lo que ya está construido antes de rediseñar
• lovable-port -- habilidad a nivel de clase para portar diseños construidos con Lovable a proyectos Flask/vanilla existentes