El enfoque de trabajo
Design Tokens define los valores que referenciarán los componentes nuevos. Primero inspecciona variables CSS, providers, archivos de tokens y dependencias del framework; luego lee el briefing funcional. Si ya hay sistema, lo amplía para cubrir sus carencias en vez de sustituirlo.
La salida sigue la stack: propiedades CSS personalizadas, configuración Tailwind o módulo de tema. El flujo incluye paletas claras y oscuras, espaciado, tipografía, composición, movimiento y valores adaptables. El agente explica la dirección elegida y las decisiones que se apartan de ella.
Entregables esperados
- Un archivo de tokens o extensión de tema en el formato del proyecto.
- Paletas clara y oscura deliberadas con roles semánticos.
- Una explicación breve de dirección visual y decisiones de implementación.
Del brief a la revisión
- 01Inspeccionar la base existente
Busca variables CSS, configuración Tailwind, providers de tema y exportaciones de tokens. Identifica carencias como modo oscuro o movimiento antes de generar.
- 02Conectar briefing y stack
Lee el briefing activo y su dirección estética. Elige el formato adecuado; si la stack no está clara, usa propiedades CSS personalizadas por defecto.
- 03Definir escalas relacionadas
Crea colores semánticos y valores coherentes de espaciado, tipografía y composición. Incluye movimiento y puntos de ruptura que los componentes puedan referenciar.
- 04Construir ambos modos
Diseña valores oscuros deliberadamente y admite patrones de preferencia del sistema y selección manual de la fuente. Explica cómo amplían el sistema existente.