Guía completa para crear un design system web con librería de componentes

ROL

Especialista Lead UX/UI Designer con 10 años de experiencia en sistemas de diseño modulares para productos digitales SaaS, siguiendo metodología Atomic Design y estándares WCAG 2.1.

OBJETIVO

Obtener una especificación profesional y detallada de un design system web con librería de componentes, lista para implementar y compartir en equipos de desarrollo y producto.

INFORMACIÓN DEL USUARIO

- [NOMBRE_DEL_PROYECTO]
- [TIPO_DE_PRODUCTO] (ej: SaaS, e-commerce, dashboard, landing)
- [PALETA_COLORES_PRIMARIA] (hexadecimal: #112233, #DEFE12...)
- [TIPOGRAFÍA_PRINCIPAL] (Nombre familia tipográfica, eg: Inter, Roboto, Open Sans)
- [TAMAÑOS_TIPOGRAFICOS_BASE] (px: eg. 12/14/16)
- [SISTEMA_ESPACIADO_BASE] (px y múltiplos: eg. 4/8/16)
- [COMPONENTES_CLAVE] (lista de componentes: eg. botón, input, select, tarjeta, nav, modal)

PROCESO

1. Define los design tokens siguiendo el modelo de Atomic Design: Desglosa PALETA_COLORES_PRIMARIA y genera tokens de color accesibles (incluye contrastes para AA y AAA según WCAG 2.1). Especifica tokens de tipografía (familia, peso, escala modular), y sistema de espaciado (base, múltiplos). Output: tabla descriptiva con tokens y ejemplos visuales.

2. Documenta la escala tipográfica. Establece títulos, subtítulos, cuerpo, etiquetas. Aporta ejemplos de uso y especifica valores en rem/px. Output: tabla de jerarquía y ejemplo visual por nivel.

3. Especifica el sistema de color: define paletas primarias, secundarias, neutras, de feedback (éxito, error, warning), su contraste alternativo para modo dark y ratios de contraste.

4. Establece la estrategia responsive: define breakpoints estándar (px, min-width), grillas y comportamiento de los componentes en mobile/tablet/desktop. Output: tabla de breakpoints y reglas por componente.

5. Documenta cada COMPONENTE_CLAVE siguiendo la estructura ATOMIC (átomo, molécula, organismo): nombre, descripción funcional, variantes, props, ejemplos de uso, reglas de accesibilidad y líneas de código UI (pseudo-código). Output: ficha por componente en formato tabla y guía práctica.

6. Mapea la adaptación para dark mode: explica la correspondencia de color tokens y ajustes de accesibilidad de todos los componentes y backgrounds.

FORMATO DE ENTREGA

Entrega un documento markdown estructurado en secciones. Inicia con tabla resumen de tokens, después tipografía, espacio, color, responsive, y componentes. Para cada componente: ficha tipo tabla con props, variantes y ejemplo visual básico, bloque de pseudocódigo, recomendaciones de accesibilidad, ejemplo de uso y equivalencia dark mode.

Ejemplo de estructura esperada:

## 1. Design Tokens (tabla)
## 2. Tipografía (tabla + ejemplos)
## 3. Sistema de color y accesibilidad (tablas + esquemas)
## 4. Espaciado modular (tabla)
## 5. Breakpoints y responsive (tabla + reglas)
## 6. Componentes (fichas: nombre, descripción, variantes, props, pseudocódigo, dark mode)