Design System
El Design System es una pieza central del arnés porque convierte decisiones visuales en reglas aplicables. Sin esa traducción, la IA puede generar interfaces rápidas pero inconsistentes, difíciles de mantener o alejadas del producto real.
Por qué importa
Sección titulada «Por qué importa»El Design System protege:
- Consistencia visual.
- Accesibilidad.
- Reutilización de componentes.
- Coherencia entre diseño y código.
- Reducción de defectos de layout.
- Velocidad de implementación sin perder control.
Foundations
Sección titulada «Foundations»Las foundations son la base del sistema visual.
Se suelen extraer:
- Tokens de color.
- Tipografía.
- Spacing.
- Radios.
- Elevación.
- Variables de Figma.
- Nodos relevantes.
La salida esperada es contexto aplicable al proyecto, no una captura decorativa.
Componentes
Sección titulada «Componentes»Una vez estabilizadas las foundations, el arnés trabaja por familias de componentes:
- Variantes.
- Estados.
- Propiedades.
- Comportamientos.
- Restricciones de layout.
- Evidencia visual.
- Diferencias entre diseño y código existente.
Evidencia
Sección titulada «Evidencia»La evidencia evita interpretaciones vagas.
Puede incluir:
- Screenshots.
- Enlaces o IDs de nodos.
- Metadata de variantes.
- Comparativa con implementación actual.
- Supuestos detectados.
- Riesgos de accesibilidad o responsive.
Relación con agentes
Sección titulada «Relación con agentes»- Spec Author identifica si el DS condiciona la tarea.
- Implementer aplica tokens, componentes y restricciones.
- Reviewer valida que el resultado respeta la spec visual y los guardarraíles.
Errores habituales
Sección titulada «Errores habituales»- Empezar por componentes sin foundations.
- Copiar Figma literalmente sin traducirlo a arquitectura.
- Ignorar estados o variantes.
- No dejar evidencia de la fuente.
- Tratar el DS como estética y no como calidad de producto.
Default recomendado
Sección titulada «Default recomendado»Mantén el Design System como guardarraíl activo: cada tarea de interfaz debe explicitar qué reglas visuales aplica y cómo se validaron.