| name | impeccable |
| description | Design skill para frontend. Obliga al agente a clarificar audiencia, proposito y direccion visual antes de escribir codigo. Detecta patrones genericos de IA (Inter, purple gradients, cards anidadas, gray-on-color) y propone alternativas con caracter. |
| license | MIT |
| compatibility | opencode |
Impeccable — Design Skill para El Primor
Adaptado de pbakaus/impeccable (38k estrellas).
Cuando activar
Cuando el usuario pide crear una web, landing, dashboard, UI o cualquier interfaz visual. Activala durante Fase 2 (Investigar) y Fase 3 (Planificar).
Pre-design: clarificar antes de diseñar
Antes de escribir una linea de CSS, asegura estas respuestas:
- ¿Marca o producto? — Si es marca (landing, marketing) → visual mas expresivo. Si es producto (dashboard, app) → funcional, denso, escaneable.
- ¿Audiencia? — tecnica, general, ejecutiva, joven...
- ¿Personalidad visual? — seria, juguetona, minimalista, tecnica, editorial...
- ¿Referencias? — pide ejemplos de sitios que le gusten al usuario
Anti-patrones a evitar
JAMAS uses estos patrones genericos de IA:
- ❌ Inter como fuente (demasiado comun, parece template)
- ❌ Gradientes purple-to-blue (el clasico de IA)
- ❌ Cards anidadas dentro de cards
- ❌ Texto gris sobre fondo de color
- ❌ Iconos cuadrados redondeados sobre cada heading
- ❌ Negro puro (#000) o gris puro — siempre tinta ligeramente
- ❌ Easing bounce/elastic (parece anticuado)
- ❌ Hero sections con SVG generico o gradiente
Flujo de diseño
- Clarifica las 4 preguntas pre-design
- Busca referencias visuales que coincidan con la direccion
- Define la paleta antes de codificar (2-3 colores, no mas)
- Elige la fuente (nunca Inter/Arial — busca algo con caracter)
- Diseña mobile-first y expande a desktop
- Audita el resultado contra los anti-patrones
