Sistema de Diseño — Genera y Audita Sistemas Visuales
Cuándo Usarlo
- Iniciando un nuevo proyecto que necesita un sistema de diseño
- Auditando una base de código existente en busca de consistencia visual
- Antes de un rediseño — comprende lo que tienes
- Cuando la interfaz se ve "rara" pero no puedes identificar por qué
- Revisando PRs que modifican estilos
Cómo Funciona
Modo 1: Generar Sistema de Diseño
Analiza tu base de código y genera un sistema de diseño cohesivo:
1. Escanea patrones existentes de CSS/Tailwind/styled-components
2. Extrae: colores, tipografía, espaciado, border-radius, sombras, breakpoints
3. Investiga 3 sitios de la competencia como inspiración (vía navegador MCP)
4. Propone un conjunto de tokens de diseño (JSON + propiedades CSS personalizadas)
5. Genera DESIGN.md con la justificación de cada decisión
6. Crea una página HTML de vista previa interactiva (autocontenida, sin dependencias)
Salida: DESIGN.md + design-tokens.json + design-preview.html
Modo 2: Auditoría Visual
Evalúa tu interfaz en 10 dimensiones (0-10 cada una):
1. Consistencia de color — ¿usas tu paleta o valores hexadecimales aleatorios?
2. Jerarquía tipográfica — ¿tienes un claro h1 > h2 > h3 > body > caption?
3. Ritmo de espaciado — ¿escala consistente (4px/8px/16px) o arbitraria?
4. Consistencia de componentes — ¿elementos similares se ven similares?
5. Comportamiento responsivo — ¿fluido o roto en los breakpoints?
6. Modo oscuro — ¿completo o a medias?
7. Animación — ¿con propósito o gratuita?
8. Accesibilidad — relaciones de contraste, estados de foco, objetivos táctiles
9. Densidad informativa — ¿desordenado o limpio?
10. Pulido — estados hover, transiciones, estados de carga, estados vacíos
Cada dimensión obtiene una puntuación, ejemplos específicos y una corrección con el archivo:línea exacto.
Modo 3: Detección de "AI Slop"
Identifica patrones de diseño genéricos generados por IA:
- Degradados gratuitos en todo
- Colores predeterminados púrpura-a-azul
- Tarjetas de "vidrio esmerilado" sin propósito
- Esquinas redondeadas en cosas que no deberían tener
- Animaciones excesivas al hacer scroll
- Hero genérico con texto centrado sobre degradado de stock
- Pila tipográfica sans-serif sin personalidad
Ejemplos
Generar para una aplicación SaaS:
/design-system generate --style minimal --palette earth-tones
Auditar interfaz existente:
/design-system audit --url http://localhost:3000 --pages / /pricing /docs
Comprobar si hay "AI slop":
/design-system slop-check