Los agentes de código generativo son potentes, pero si se les deja a su libre albedrío, por defecto producen un desorden visual: degradados predecibles, espaciados sin calibrar y estructuras de componentes pesadas y obsoletas. Impeccable es un paquete de habilidades de diseño, creado por Paul Bakaus, que opera directamente dentro de Claude Code, Gemini CLI y Codex CLI (además de Cursor y GitHub Copilot) para imponer estrictos límites estéticos, con un mismo conjunto de reglas recompilado para cada harness.
Al aplicar un diseño de habilidades deliberado, puedes alejar a los agentes de los patrones genéricos y obligarlos a generar experiencias web precisas y de alto nivel visual.
El diseño de habilidades (skill design) es la práctica de construir rieles deterministas para modelos de IA no deterministas. En lugar de pedirle interminablemente a un agente que "haga que se vea mejor" o "mejore el rendimiento", inyectas un DESIGN.md
compilado y directivas funcionales que el agente debe respetar en cada iteración.
Impeccable construye sobre la habilidad frontend-design
de Anthropic y añade 23 comandos con un vocabulario de diseño compartido, más 58 reglas deterministas de detección de antipatrones (fuente Inter por defecto, degradados morado-azul, tarjetas anidadas, texto gris sobre fondos de color, iconos redondeados sobre cada encabezado, entre otros). Transforma a la IA de ser un desarrollador junior que intenta adivinar tu estética a un implementador estricto de las reglas visuales que tú definas.
Al integrar este flujo de trabajo, la precisión lo es todo. Impeccable respeta tu sistema de diseño existente en lugar de sobrescribirlo: al ejecutarse, escanea tu código base (tokens, componentes, configuración de Tailwind) y carga las reglas de marca desde tu propio DESIGN.md
, en vez de imponer una estética genérica. Por eso, si tu identidad se basa en una estética minimalista, la forma correcta de imponerla es declarándola tú mismo en ese archivo — paleta limitada de verde y rosa, fondo oscuro base en #0c1624
, tipografía y tono de voz — para que cada comando posterior la lea antes de generar nada. Impeccable no decide esa estética por ti; te da el vocabulario y el mecanismo para que la tuya se respete de forma consistente en cada iteración.
Impeccable expone 23 comandos que funcionan como un vocabulario compartido con el agente — cada uno nombra un tipo específico de intervención de diseño. Tres de los más útiles para un flujo de producción:
/audit
/normalize
DESIGN.md
. Útil cuando varias sesiones de un agente fueron introduciendo pequeñas divergencias con el tiempo./polish
Un flujo típico en Claude Code o Cursor se ve así: /impeccable audit
para diagnosticar, /impeccable normalize
para alinear lo que ya existe con tus tokens, y /impeccable polish
como pase final antes de hacer commit — cada uno leyendo el mismo DESIGN.md
/PRODUCT.md
para no salirse de tu marca.
Estos tres son solo el punto de partida: hay otros 20 comandos (/typeset
, /distill
, /colorize
, /layout
, /bolder
, /quieter
, /overdrive
, entre otros) que cubren tipografía, color, layout y movimiento. Puedes ver el listado completo, la documentación de instalación y el código fuente en el README oficial del repositorio.
Impeccable no impone arquitectura de frontend (no decide si usas Angular zoneless, señales o qué motor de animación usar) — eso queda en tus manos. Lo que sí hace es leer consistentemente las reglas visuales que tú definas. Un DESIGN.md
con restricciones estrictas de marca podría verse así, a modo de ejemplo:
brand:
background_base: "#0c1624"
allowed_accents: ["green", "pink"]
voice: "Calma, precisa, sin hype"
anti_references: "Evitar el blanco puro. No generar degradados genéricos. Rechazar toda iconografía agresiva o relacionada con armas, y evitar generar o mostrar manos en los recursos visuales."
Cualquier motor de movimiento o decisión de arquitectura (GSAP, Lenis, Angular con Signals, etc.) sigue siendo una decisión tuya de stack técnico — Impeccable simplemente evita que el agente reintroduzca los patrones visuales genéricos mientras la implementas.