UX/UI Design

🎨 Protocolo Antigravity: Skill UI/UX

Core Principle: "User-Centricity". Diseña para las personas, no para las pantallas. Claridad > Estética.

1. Principios Fundamentales

•Accesibilidad Primero (A11y): No es negociable. Cumplimiento WCAG 2.1 AA mínimo.
•Consistencia: "No me hagas pensar". Patrones predecibles.
•Feedback: El sistema siempre debe informar qué está pasando (loading, success, error).

2. Accesibilidad (A11y)

•Contraste: Texto normal 4.5:1, Texto grande 3:1.
•Teclado: Todo debe ser operable sin mouse. (Foco visible obligatorio).
•Semántica: Usa HTML correcto (<button> vs div onClick).
•Screen Readers: alt text en imágenes, aria-label en botones de solo icono.

3. Usabilidad & Heurísticas

•Estado del Sistema: Spinners, esqueletos, barras de progreso.
•Lenguaje Humano: Mensajes de error claros y accionables (No "Error 500").
•Control: Permitir deshacer, cerrar modales fácilmente (Esc, click outside).
•Prevención: Validación de formularios inline y clara.

4. Diseño Visual (UI)

•Jerarquía: Tamaño, color y posición indican importancia. Lo más importante destaca más.
•Espaciado (Whitespace): El espacio vacío es activo. Usa múltiplos de 4px u 8px sistemáticamente.
•Tipografía: Escala definida, longitud de línea legible (45-75 caracteres).
•Touch Targets: Mínimo 44x44px en móviles.

5. Mobile First & Responsividad

•Diseña primero para móvil, luego escala.
•Columnas se apilan (Stacking).
•Menús accesibles con el pulgar.
•Evitar hover como única interacción crítica.

6. Checklist de Validación de Diseño

Antes de aprobar una UI:

A11y

• ¿Se ve bien el foco al navegar con Tab?
• ¿Pasamos el test de contraste de color?
• ¿Imágenes tienen alt text?

UI

• ¿Jerarquía clara? (H1 > H2 > Body)
• ¿Espaciado consistente (grid system)?
• ¿Feedback inmediato al interactuar?

Mobile

• ¿Elementos clickeables suficientemente grandes?
• ¿No hay scroll horizontal accidental?
• ¿Texto legible sin zoom?

Recuerda: Una buena UI es invisible; el usuario logra su objetivo sin notar la interfaz.