Dominando Impeccable: para mantener coherencia y consistencia de diseño

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.

¿Qué es el diseño de habilidades y por qué es importante para los agentes de IA?

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.

Cómo implementar las restricciones de Impeccable para aplicaciones web modernas

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.

Los comandos que hacen el trabajo pesado

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 — un pase de calidad de producción. Ejecuta el detector determinista de antipatrones (58 reglas curadas: degradados genéricos, fuente Inter por defecto, tarjetas anidadas, sombras predecibles, etc.) contra tu código actual y reporta los hallazgos sin modificar nada todavía. Es el paso de diagnóstico antes de tocar código.
• /normalize — corrige inconsistencias dentro del propio sistema: espaciados, radios de borde, tamaños tipográficos o usos de color que se desviaron de los tokens definidos en tu DESIGN.md. Útil cuando varias sesiones de un agente fueron introduciendo pequeñas divergencias con el tiempo.
• /polish — el pase final de calidad. Aplica las correcciones dentro de tu sistema existente (no inventa uno nuevo), elimina las "señales de IA" detectadas y vuelve a correr el detector antes de entregar el resultado, hasta llegar a cero hallazgos.

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.

Ejemplo de implementación: Tus propias reglas de marca

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:

# Ejemplo ilustrativo — no es el esquema real de Impeccable,
# que usa DESIGN.md/PRODUCT.md en formato Markdown (spec Google Stitch)
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.