Impeccable es un skill de diseño open source creado por Paul Bakaus que le da a tu agente de código un solo comando, /impeccable, con 24 subcomandos para construir, criticar y pulir interfaces, más un detector de 62 reglas que marca la UI con cara de “hecha por IA” sin usar ningún LLM. Funciona con Claude Code, Cursor, Codex y más de una docena de agentes, y al momento de publicar esta nota superaba las 88.500 estrellas en GitHub.
¿Qué es Impeccable?
Impeccable es un vocabulario de diseño para agentes de IA. Tú describes lo que quieres, el agente elige el comando adecuado y el resultado sigue reglas de diseño explícitas, en lugar de repetir lo que el modelo vio con más frecuencia durante su entrenamiento.
El README es transparente sobre su origen: frontend-design, de Anthropic, fue el primer design skill de uso masivo para Claude, e Impeccable partió de ahí. Lo que agrega es estructura:
- Un flujo de configuración que registra qué es tu producto y para quién es.
- 24 comandos que funcionan como vocabulario compartido con el agente:
polish,audit,critique,distilly más. - Un detector que corre como código normal, dentro del ciclo del agente o completamente fuera de él.
Es gratuito y open source, con licencia Apache 2.0.
¿Qué es el “AI slop” y cómo lo detecta Impeccable?
AI slop es el término que se usa en inglés para el diseño genérico que producen los modelos cuando nadie los guía. Como todos aprendieron de las mismas plantillas SaaS, repiten las mismas señales en cada proyecto: Inter para todo, gradientes de morado a azul, cards dentro de cards, texto gris sobre fondos de color y el iconito en un cuadrado redondeado encima de cada título.
Impeccable ataca el problema desde dos lados. El skill le indica al agente qué evitar: fuentes sobreutilizadas, negro o gris puros en lugar de neutros tintados, y animaciones con efecto rebote o elástico. El detector, en cambio, revisa el código ya escrito.
Sus 62 reglas son un catálogo que mantiene el propio proyecto, no un benchmark independiente. Cubren señales típicas de IA (texto con gradiente, bordes laterales tipo pestaña, gradientes morados, brillos oscuros) y calidad de diseño en general: largo de línea, padding apretado, objetivos táctiles demasiado pequeños o niveles de título que se saltan. La propia documentación lo aclara: un escaneo limpio significa que estas reglas no encontraron problemas, no que el diseño sea bueno.
¿Cómo se instala Impeccable?
Desde la raíz de tu proyecto:
npx impeccable install
El instalador detecta qué agentes tienes (por ejemplo ~/.claude, ~/.codex o un .cursor local del proyecto), te deja mantener o cambiar esa selección y te pregunta si quieres instalarlo en el proyecto actual o de forma global. Para usarlo en scripts sin preguntas interactivas:
npx impeccable install --providers=claude,codex,cursor --scope=project
Después, recarga tu agente. Para actualizar más adelante:
npx impeccable update
Hay otras vías de instalación:
- Plugin de Claude Code: ejecuta
/plugin marketplace add pbakaus/impeccabley luego instala Impeccable desde/plugin. - VS Code con GitHub Copilot:
code --install-extension renaissance-geek.impeccable. - Copia manual: desde las carpetas
dist/del repo, una por herramienta.
El skill no necesita Node en tiempo de ejecución; Node solo lo usa el instalador npx. El skill trae un pequeño lanzador que ejecuta un binario autocontenido, que se descarga una sola vez en ~/.impeccable/bin/ si no viene incluido.
Al momento de publicar esta nota, impeccable.style indica además que la app de GitHub Copilot trae Impeccable integrado, activable desde Settings → Experimental.
¿Cómo se empieza a usar Impeccable?
El primer comando en cualquier proyecto es:
/impeccable init
En Codex los skills se invocan con $ en lugar de /, así que escribes $impeccable.
init inspecciona el proyecto y solo te pregunta lo que no puede deducir. Con eso escribe un archivo PRODUCT.md con quiénes son tus usuarios, para qué sirve el producto, sus restricciones y su tono. Todos los comandos posteriores leen ese archivo primero, así que el agente diseña para tus usuarios y no para un comprador SaaS genérico.
Si ya tienes un sistema visual, /impeccable document genera un DESIGN.md a partir de tu código existente. Cuando ese archivo existe, el detector también verifica tus fuentes, colores, radios de borde y tamaños tipográficos contra él. Así, desviarse del design system pasa a ser un error de lint y no un comentario de code review.
¿Qué comandos de Impeccable conviene aprender primero?
Todos se ejecutan con /impeccable <comando> <objetivo>. Estos seis cubren la mayor parte del trabajo diario:
| Comando | Qué hace |
|---|---|
craft |
Flujo completo: planificar, construir e iterar visualmente |
critique |
Revisión UX: jerarquía, claridad, resonancia emocional |
audit |
Revisión técnica: accesibilidad, rendimiento, responsive |
polish |
Pasada final y alineación con el design system antes de publicar |
distill |
Reduce una pantalla recargada a lo esencial |
harden |
Manejo de errores, i18n, desbordes de texto y casos borde |
El objetivo puede escribirse en lenguaje natural:
/impeccable audit the header
/impeccable polish the checkout form
Si usas un comando constantemente, /impeccable pin audit crea un atajo independiente /audit. Y si escribes solo /impeccable, verás la lista completa de los 24.
¿Cómo funcionan los checks automáticos en Claude Code, Cursor y Codex?
Esto es lo que separa a Impeccable de un simple archivo de reglas. En Claude Code, Cursor, Codex, GitHub Copilot y Grok Build, el instalador agrega también un hook nativo: cada vez que el agente edita un archivo de UI, se ejecuta el detector y los hallazgos vuelven al agente mientras el cambio sigue en contexto.
Se activa por proyecto con /impeccable hooks on, y puedes revisar el estado con /impeccable hooks status. Tu herramienta también tiene que permitir el hook:
- Claude Code: acepta la confianza del workspace. Puedes revisar los hooks
PostToolUseyStopdesde/hooks. - Codex: abre Settings → Hooks en la app, o
/hooksen la CLI, y aprueba ambos hooks. Si una actualización cambia su definición, tendrás que aprobarlos otra vez. - Cursor: confía en el workspace y busca
.cursor/hooks.jsonen Customize → Hooks. - GitHub Copilot: haz commit de
.github/hooks/impeccable.jsony mézclalo en la rama principal.
El momento en que llegan los avisos varía por herramienta. En Claude Code y Codex hay una revisión rápida después de cada edición y otra más amplia, sobre los archivos tocados, cuando el agente termina su turno. Si un hook parece no hacer nada, /impeccable doctor te dice si realmente está instalado y activo.
Cuando una decisión marcada es intencional, registra una excepción puntual en lugar de desactivar la regla. Así, por ejemplo, Inter queda permitida como fuente de marca y la regla sigue vigilando el resto:
/impeccable hooks ignore-value overused-font Inter --reason "Brand font"
¿Se puede usar el detector en CI sin un agente de IA?
Sí. La CLI ejecuta las mismas 62 reglas sin modelo y sin API key:
npx impeccable detect src/
npx impeccable detect http://localhost:3000
npx impeccable detect --json src/ > findings.json
npx impeccable detect --github src/
Los códigos de salida son 0 (sin hallazgos principales), 2 (con hallazgos principales) y 1 (algún objetivo no pudo escanearse), suficiente para hacer fallar un pull request. --github genera anotaciones de GitHub Actions. Los escaneos de URL usan un viewport de 1280×800 por defecto; agrega --viewport 390x844 para revisar la versión móvil. También existe una extensión de Chrome que muestra los mismos hallazgos en DevTools.
¿Impeccable es gratis? ¿Qué datos envía?
Es gratuito y con licencia Apache 2.0, pero hay un detalle que conviene conocer antes de desplegarlo en un equipo. Cuando empieza un diseño nuevo, el skill le pide a impeccable.style un conjunto de direcciones visuales para elegir; esa solicitud siempre ocurre. Por defecto, además, envía un registro anónimo de qué dirección ganó. Según el README, nunca se envían nombres de proyecto, archivos, código ni el PRODUCT.md.
Puedes desactivarlo de tres formas: con npx impeccable telemetry off, con la variable DO_NOT_TRACK=1, o agregando "telemetry": false en .impeccable/config.json para todo el proyecto.
Dos notas más del README que deberían estar en cualquier despliegue en equipo:
- Hooks y aprobación. En Claude Code, los hooks instalados se ejecutan con independencia de la aprobación de herramientas. Revísalos antes de correr sesiones desatendidas.
- Live mode. Es solo para proyectos locales de confianza: puede ejecutar un script de validación definido en
package.jsony nunca debe inyectarse en un sitio en producción.
¿Impeccable, Hallmark o frontend-design?
Los tres atacan el mismo problema con distinta cantidad de maquinaria, y los tres están entre los claude code skills de diseño más usados:
| frontend-design | Hallmark | Impeccable | |
|---|---|---|---|
| Origen | Anthropic | Nutlope / Together AI | Paul Bakaus |
| Formato | Un solo SKILL.md | Skill + referencias | Skill + CLI + hooks |
| Comandos | Ninguno | 4 verbos | 24 comandos |
| Detector | Autocrítica del modelo | 57 controles internos | 62 reglas sin LLM |
| Uso en CI | No | No | Sí (detect --json, --github) |
frontend-design es el punto de partida: un único frontend design skill que le pide al modelo planificar, revisar el plan contra el brief, construir y autocriticarse. Hallmark agrega un catálogo de temas y es la opción liviana cuando quieres páginas distintivas puntuales. Impeccable encaja mejor cuando la calidad del diseño tiene que sostenerse en todo un código y en todo un equipo: recuerda tu producto en PRODUCT.md y tu sistema en DESIGN.md, revisa cada edición y puede bloquear un merge.
¿Y tú? ¿Qué es lo primero que cambias cuando tu agente te entrega una interfaz que se nota “hecha por IA”?
- Impeccable
- frontend-design de Anthropic
- Hallmark
- Prefiero otra opción (cuéntanos cuál)
Comenta abajo o, si este artículo te llegó por correo, responde directamente al email: tu respuesta se publica aquí.
Relacionado: Awesome DESIGN.md: suelta un archivo y tu agente de código finalmente entiende tu sistema de diseño