Impeccable: la skill gratis que quita el «diseño de IA» a tus webs en Claude Code (prueba real)

Impeccable es una skill de diseño para agentes de programación como Claude Code, Codex, Cursor o Gemini CLI. Le da al agente un vocabulario de 24 comandos (critique, audit, polish, bolder, adapt...) y un detector con 62 reglas que encuentra los vicios típicos del «diseño de IA»: la fuente Inter en todo, degradados de morado a azul, tarjetas dentro de tarjetas o texto gris sobre fondo de color.

Es gratis y de código abierto. Lo único que pagas son los tokens del agente que ya usas. En nuestra prueba, una revisión completa de una landing y un arreglo de la versión móvil costaron 0,49 USD en total con Claude Code. Abajo tienes cómo instalarlo, qué hizo de verdad sobre una página nuestra y dos detalles de seguridad que conviene conocer antes de activarlo.

Qué es Impeccable y quién lo hace

• Repositorio: github.com/pbakaus/impeccable
• Autor: Paul Bakaus. Parte de la skill frontend-design de Anthropic y la amplía mucho.
• Versión analizada: 4.8.0 (motor 0.1.18), commit c8891a9 del 5 de noviembre de 2026.
• Licencia: Apache 2.0, no MIT. En la práctica es igual de permisiva: puedes usarla en proyectos comerciales y de clientes, modificarla y redistribuirla. Si la redistribuyes, mantén el aviso de licencia y el archivo NOTICE.md e indica qué cambiaste. Apache 2.0 añade además una licencia de patentes explícita, que MIT no tiene.
• Contenido de terceros: las guías de iOS y Android derivan de platform-design-skills, con licencia MIT, y así lo declara NOTICE.md.
• Agentes compatibles: Claude Code, Cursor, Codex CLI, GitHub Copilot, Gemini CLI, OpenCode, Devin, Kiro, Trae y una docena más.

El problema que ataca lo has visto mil veces. Pides a un agente una landing sin más contexto y te entrega la misma página que a todo el mundo. Impeccable lo combate de tres formas: palabras concretas para pedir cambios de diseño, un revisor que puntúa la página y un detector que no usa IA.

Los 24 comandos, agrupados

El número 24 es craft, que ya está obsoleto. Se usan así:

/impeccable init
/impeccable critique la sección de precios
/impeccable quieter la landing
/impeccable adapt index.html

init se ejecuta una vez por proyecto: lee tu código, te pregunta lo que no puede deducir (para quién es el producto, qué debe conseguir) y escribe PRODUCT.md. Todos los comandos posteriores lo leen. El propio README recomienda objetivos pequeños: revisar a fondo una sección da mejor resultado que mirar una página entera por encima.

Instalar Impeccable

La forma más rápida, desde la raíz de tu proyecto:

npx impeccable install

El instalador detecta tus agentes, pregunta si instalar en el proyecto o de forma global y ofrece el hook de diseño, que lanza el detector cada vez que el agente edita un archivo de interfaz. Recarga el agente y ejecuta /impeccable init. Para actualizar: npx impeccable update.

Otras vías:

• Plugin de Claude Code: /plugin marketplace add pbakaus/impeccable y después instálalo desde /plugin.
• Copia manual, sin Node: clona el repositorio y copia .claude/skills/impeccable en el .claude/skills/ de tu proyecto o en ~/.claude/skills/. Así no se instala el hook.

git clone --depth 1 https://github.com/pbakaus/impeccable
mkdir -p tu-proyecto/.claude/skills
cp -r impeccable/.claude/skills/impeccable tu-proyecto/.claude/skills/

La skill usa un pequeño motor compilado que viene junto a ella o que se descarga una vez en ~/.impeccable/bin/. No necesita Node ni Python para funcionar.

Si es la primera vez que añades una skill, tienes el paso a paso en Skills de Claude Code: qué son y cómo instalarlas.

Prueba real: Impeccable revisa una landing de taller de bicis

Para el artículo sobre crear una landing con Claude Code y 4 skills hicimos una página para un taller de bicicletas ficticio de Quito. Le pasamos esa misma página a Impeccable en un proyecto vacío, con Claude Code en modo no interactivo, solo con permiso para leer:

claude -p "/impeccable critique index.html. Responde en español. No edites archivos."

En 50 segundos y por 0,25 USD devolvió una nota de 24 sobre 32 (75 %) con las 10 heurísticas de usabilidad. Encontró problemas que no habíamos visto:

• [P1] Sin navegación en el móvil. Por debajo de 900 px el menú desaparecía y no había nada que lo sustituyera.
• [P1] El diferencial del negocio no tiene imagen. La bici de carga que recoge tu bici solo existe en el texto.
• [P1] Falta prueba social y zona de cobertura. «Norte de Quito» no dice si llegan a tu barrio.
• [P2] El botón flotante de WhatsApp tapa el último botón y el texto legal.
• Detalles finos: faltaba scroll-margin-top (los títulos quedan bajo la cabecera fija al saltar a un ancla) y no había og:image, justo en una página cuyo único canal es WhatsApp.

Cada problema venía con el comando que lo arregla. Le pedimos el siguiente, esta vez con permiso para editar:

claude -p "/impeccable adapt index.html: arregla la navegación móvil y el solapamiento del botón flotante."

En 46 segundos y por 0,23 USD añadió un botón de menú de 44 px con aria-expanded, un panel desplegable que se cierra con Escape o al tocar un enlace, y un fundido que oculta el botón flotante mientras hay otro botón de WhatsApp a la vista. Fueron 36 líneas nuevas en el HTML.

Lo que no hizo tan bien

• El botón flotante sigue tapando el texto de la portada en la primera pantalla del móvil. El arreglo solo lo oculta cuando hay otro botón de WhatsApp visible. Se ve en la captura del menú.
• No detectó la etiqueta encima del título («TALLER DE BICICLETAS · LA FLORESTA»), que su propia guía de calidad prohíbe. Tiene sentido: en la prueba el detector no se ejecutó, porque limitamos al agente a leer y editar archivos, y el modelo por sí solo se salta reglas. El propio informe lo avisaba como «modo degradado».
• No verificó en pantalla. Sin un navegador disponible, el agente dijo claramente que no había comprobado el resultado. Las capturas de arriba las hicimos nosotros con Playwright.

La conclusión práctica: Impeccable da más cuando dejas que ejecute su motor y su hook, y cuando el agente puede abrir la página en un navegador.

El detector: 62 reglas sin IA y sin coste

El detector es la parte más útil para equipos pequeños, porque no llama a ningún modelo ni necesita clave de API. Se ejecuta en la terminal o en tu CI:

npx impeccable detect src/                   # escanea una carpeta
npx impeccable detect http://localhost:5173  # escanea la página renderizada
npx impeccable detect --json .               # salida para scripts
npx impeccable detect --github src/          # anotaciones en GitHub Actions
npx impeccable detect --list-rules           # lista de reglas

En los archivos JSX o TSX aplica las reglas de patrones (fuente sobreusada, texto con degradado, tarjetas anidadas, etiquetas encima del título...). Las que necesitan la página dibujada, como el contraste bajo o el texto diminuto, solo funcionan al escanear una URL. Devuelve el código de salida 2 si encuentra problemas, así que puedes bloquear un PR con él.

Si tu marca usa Inter a propósito, permítela en todo el proyecto:

npx impeccable ignores add-value overused-font Inter --reason "Fuente de marca"

También hay una extensión gratuita para Chrome que marca los mismos fallos sobre cualquier web abierta.

Cuánto cuesta usar Impeccable

Para gastar lo mínimo:

1. Usa el detector gratis primero. Arregla lo que encuentre sin gastar un token y deja al agente solo las decisiones de diseño.
2. Pide comandos sobre objetivos pequeños. critique la sección de precios lee menos código y cuesta menos que revisar todo el sitio.
3. Si ya pagas una suscripción de Claude, Codex o Copilot, Impeccable no añade nada a la factura: usa la cuota que ya tienes.
4. Si no quieres pagar nada, funciona también con Gemini CLI y OpenCode, que admiten modelos gratuitos. La calidad del resultado depende del modelo, así que revisa el diseño a mano.

Seguridad: dos cosas a revisar antes de activarlo

• El hook se ejecuta fuera de tu aprobación. En Claude Code, los hooks instalados corren aunque rechaces los comandos del modelo, y la primera edición puede descargar el motor. Para una ejecución sin hooks: claude --settings '{"disableAllHooks": true}'.
• El modo live puede lanzar un agente sin permisos. Al aplicar cambios de texto desde el navegador, si no hay una sesión de chat activa, ejecuta codex o claude con las aprobaciones y el sandbox desactivados. Pon IMPECCABLE_LIVE_COPY_AGENT=chat (o off) en el entorno antes de iniciar live. Úsalo solo en tu copia local, nunca en un sitio desplegado.

Sobre la telemetría: al empezar un diseño nuevo, la skill descarga direcciones visuales del catálogo de impeccable.style y registra de forma anónima cuál elegiste. Según el README, nunca envía tu código ni tu PRODUCT.md. Desactívala con npx impeccable telemetry off o DO_NOT_TRACK=1.

Si te preocupa lo que hacen las skills que instalas, lee también cómo auditar skills antes de instalarlas.

Errores frecuentes

• El comando /impeccable no aparece. Recarga el agente después de instalar. En Codex se usa $impeccable o el menú /skills. En Cursor y Gemini CLI quizá tengas que activar las Agent Skills en la configuración.
• «Context loading did not run». El lanzador no se pudo ejecutar (permisos, red o Windows sin sh). La skill sigue funcionando leyendo tus archivos, pero sin detector. En Windows usa scripts/impeccable.cmd.
• El hook no hace nada en Codex. Abre /hooks y aprueba el hook del proyecto (otra vez después de cada actualización que lo cambie).
• El detector no avisa del contraste. Esas reglas solo funcionan sobre una URL. Arranca tu servidor y ejecuta npx impeccable detect http://localhost:3000.
• El repositorio se llena de archivos en .impeccable/. Copia en tu .gitignore el bloque del README. Deja en el repositorio config.json, design.json, PRODUCT.md y DESIGN.md.

Preguntas frecuentes

¿Impeccable es gratis?

Sí. La skill, el CLI, el detector y la extensión de Chrome son gratuitos y de código abierto con licencia Apache 2.0. Solo pagas los tokens del agente con el que lo uses.

¿Puedo usarlo en proyectos de clientes?

Sí. Apache 2.0 permite el uso comercial. Si redistribuyes la skill modificada, conserva la licencia y el NOTICE.md e indica qué cambiaste.

¿Sirve para crear webs desde cero o solo para mejorar las que ya tengo?

Sirve para las dos cosas, pero el autor dice que rinde más sobre interfaces que ya existen. Para empezar, elige un componente y pásale critique.

¿En qué se diferencia de la skill frontend-design de Anthropic?

Impeccable nació de ella. Añade los 24 comandos, el contexto del proyecto en PRODUCT.md y DESIGN.md, el detector determinista, el hook automático y el modo en vivo.

Conclusión

Impeccable es de las skills con mejor relación entre coste y resultado: es gratis, la revisión de una landing cuesta unos céntimos y encontró fallos reales de móvil que se nos habían pasado. Empieza por npx impeccable detect en tu proyecto, que no cuesta nada, y luego pide un critique sobre la sección que más te importa. Revisa el hook y no uses el modo live fuera de tu copia local.

Si estás montando una landing desde cero, sigue con cómo crear una landing con Claude Code combinando 4 skills. Si buscas más skills útiles, prueba find-skills, la skill que busca skills por ti.