GuíaBásico

Guía de Sistemas de UI e Implementación de Diseño

Aprende a implementar diseño en código de forma sistemática: pasar de escribir CSS suelto para cada pantalla a un sistema de diseño real, con design tokens (color, espaciado y tipografía como variables con sentido), CSS utility-first con Tailwind, escalas de espaciado y tipografía, color y contraste accesible medido con WCAG, componentes con variantes (un `Button` o `ProductCard` que se configura por props, patrón `cva`), modo oscuro y responsivo dentro del sistema, y primitivas accesibles al estilo shadcn/Radix. El eje es la consistencia a escala: cuando cada color, espacio y componente sale de un sistema y no de una decisión ad-hoc, la interfaz se ve coherente, se mantiene sola y es accesible por defecto. Cada módulo ejecuta en Node.js la lógica del sistema —resolución de tokens, el mapeo de utilidades de Tailwind a CSS, el cálculo de contraste WCAG, la resolución de variantes— para verificar que el sistema es coherente y accesible, no solo que "se ve bien". El hilo conductor es el sistema de diseño del storefront de Mercado: sus tokens en modo claro y oscuro, su configuración de Tailwind, su `Button` y su `ProductCard` con variantes, y su UI responsiva y accesible. Se apoya en la Guía de Fundamentos Web y en la Guía de Fundamentos de React dentro del ecosistema Fullstack de NIEVA.