Sistema de Diseño — Genera y Audita Sistemas Visuales
Cuándo Usarlo
- Al iniciar un nuevo proyecto que necesita un sistema de diseño
- Al auditar una base de código existente para verificar consistencia visual
- Antes de un rediseño — entiende lo que tienes
- Cuando la interfaz se ve "rara" pero no puedes precisar por qué
- Al revisar 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 CSS/Tailwind/styled-components para patrones existentes
2. Extrae: colores, tipografía, espaciado, border-radius, sombras, breakpoints
3. Investiga 3 sitios de la competencia para inspiración (mediante 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 — ¿h1 > h2 > h3 > body > caption claramente definidos?
3. Ritmo de espaciado — ¿escala consistente (4px/8px/16px) o arbitraria?
4. Consistencia de componentes — ¿elementos similares se ven similares?
5. Comportamiento responsive — ¿fluido o roto en los breakpoints?
6. Modo oscuro — ¿completo o a medio hacer?
7. Animaciones — ¿intencionadas o gratuitas?
8. Accesibilidad — relaciones de contraste, estados de foco, objetivos táctiles
9. Densidad de información — ¿recargada o limpia?
10. Pulido — estados hover, transiciones, estados de carga, estados vacíos
Cada dimensión recibe una puntuación, ejemplos específicos y una corrección con archivo y línea exactos.
Modo 3: Detección de Plantillas IA
Identifica patrones de diseño genéricos generados por IA:
- Gradientes gratuitos en todo
- Combinaciones predeterminadas morado a azul
- Tarjetas con "morfismo de vidrio" sin propósito
- Esquinas redondeadas en elementos que no deberían tenerlas
- Animaciones excesivas al hacer scroll
- Hero genérico con texto centrado sobre gradiente prediseñado
- 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
Verificar plantillas IA:
/design-system slop-check