Visual Engineering

Los 5 pilares

1. Sistema de Diseño — tokens en tres capas (primitivos → semánticos → componente)
2. Arquitectura CSS — utility-first con tokens, Container Queries
3. Motion Design — productiva vs expresiva, tokens de duración y easing
4. Accesibilidad visual — ratios WCAG 2.1, foco visible, semántica HTML
5. Performance visual — Core Web Vitals (LCP, CLS, INP)

Cuándo activarme

• "Crea un componente con estilos..."
• "Diseña el sistema de tokens"
• "El CLS de la página es alto"
• "Necesito dark mode"