Impeccable: la web que no parece hecha por la IA

Qué es y por qué importa

Abres tu web y se nota enseguida: la ha hecho la IA. Inter por todas partes, un degradado de morado a azul, tarjetas dentro de otras tarjetas, texto gris sobre un fondo de color. El README de Impeccable los enumera como las señales que vuelven en cada proyecto: todos los modelos de IA han aprendido de las mismas webs hechas en serie.

Impeccable sirve para quitarlas. Es una skill, es decir, un paquete de instrucciones para Claude Code, con 24 comandos que se convierten en un vocabulario común entre tú y él. Además hay un detector con 62 reglas fijas que funciona sin IA y sin claves API. Es de código abierto en GitHub, con licencia Apache 2.0 y más de 90.000 estrellas a finales de octubre.

Es para quien construye solo con Claude Code, sin diseñador. Para diseñar una página nueva desde cero hay otra guía, GUSTO. Esta parte de otra pregunta: la web ya la tienes, ¿cómo le quitas la cara de IA?

1. Qué necesitas y cómo la instalas en Claude Code

Necesitas Claude Code, la carpeta del proyecto y una versión reciente de Node.js, el programa que ejecuta npx (compruébalo con node -v en la terminal). Luego:

1. Desde la carpeta principal del proyecto, lanza el instalador, la línea de aquí abajo.
2. Elige las herramientas que usas entre las que encuentra, por ejemplo Claude Code, y si instalarla en este proyecto o en todos.
3. Cuando te proponga el control automático en cada cambio, di que sí: lo vemos en el punto 5.
4. Reinicia Claude Code para que cargue la skill.

npx impeccable install

Como alternativa está el plugin: en Claude Code escribe /plugin marketplace add pbakaus/impeccable, luego abre /plugin, instala Impeccable desde Discover y reinicia. Yo uso el instalador: es el camino que recomienda el README, y el control automático llega con él.

2. El primer comando: /impeccable init

Todos los comandos pasan por /impeccable. El primero, una vez por proyecto, lo escribes en el chat de Claude Code:

/impeccable init

Primero lee el proyecto: documentos, funciones, código, imágenes. Luego solo te pregunta lo que falta: para quién es el producto, en qué situación lo usan, para qué sirve, qué límites respetar. Y te hace confirmar lo que ha entendido por su cuenta.

Luego escribe PRODUCT.md, un archivo de texto en el proyecto, con los hechos en los que estáis de acuerdo y las decisiones abiertas. Sirve porque cada comando parte de ahí y sabe a quién habla la página, en vez de adivinarlo. Reléelo y corrígelo; si el producto cambia, vuelve a lanzar init.

Si la web ya tiene un estilo propio, escribe también /impeccable document: lo guarda en DESIGN.md, y el detector comprueba que tus páginas no se alejen de él.

3. Revisa tu web en un minuto, sin IA

La parte que más me gusta: el detector funciona desde la terminal, sin Claude y sin claves. En lugar de src/ pon la carpeta del código, un archivo o una dirección, también http://localhost:3000. Para las direcciones usa Chrome, Chromium o Edge; con --viewport 390x844 ves la página al tamaño de un móvil.

npx impeccable detect src/

• Encuentra las señales de la IA: degradados morados, texto relleno con un degradado, brillos oscuros, animaciones que rebotan, la tipografía demasiado usada.
• Y los problemas de calidad: líneas demasiado largas, espacios apretados, botones demasiado pequeños para tocarlos, títulos que se saltan un nivel.

Mira el número con el que termina: 0, ningún problema principal; 2, problemas encontrados; 1, hay algo que no ha podido revisar, así que la revisión ha fallado. Con --json te da los resultados en un formato que Claude lee al momento; --list-rules te muestra todas las reglas.

Y recuerda lo que dice el README: una revisión limpia es un indicio, no una prueba. Esas reglas no han encontrado nada, pero abre la página igualmente, también en el móvil.

4. Los cinco comandos que usar primero en la página que ya tienes

Se escriben en el chat de Claude Code: /impeccable, el comando y qué mirar, con palabras normales. Cambia las partes entre [ ] por las tuyas.

critique: qué la frena

Una revisión de diseño: dónde la página parece genérica o confusa y qué arreglar primero. No cambia nada, te da un informe.

/impeccable critique la página de inicio. Quien llega aquí tiene que [descargar la app]. Dime qué hace que parezca hecha con IA y qué arreglarías primero.

audit: las revisiones técnicas

Accesibilidad, velocidad, temas, móvil. Cada problema tiene una prioridad de P0, que bloquea, a P3, retoque. Audit también deja el código como está.

/impeccable audit la página de precios. De cada problema dime a quién perjudica y cómo se arregla. No cambies nada todavía.

distill: quita lo que sobra

Quita lo que estorba a la acción principal: información repetida, decoración que no dice nada. Si la acción principal no está clara, primero te la pregunta.

/impeccable distill la página de inicio. La acción principal es [apuntarse a la lista de espera]. Quita las tarjetas dentro de tarjetas, mantén [los precios].

typeset: la tipografía

Jerarquía de títulos, tamaños, longitud de las líneas. Mantiene tus tipografías, salvo que pidas cambiarlas: si Inter vino por defecto, díselo.

/impeccable typeset toda la web. La tipografía actual es la de por defecto, no la de la marca: propónme una alternativa adecuada para [quién usa el producto].

polish: la última pasada

Pule una página cuya dirección ya está bien: estados que faltan, espacios, alineaciones. Cambia el código, así que mira los cambios. Si lo que falla es la dirección, pide que la rehaga.

/impeccable polish la página de registro. Mantén el layout y los colores de la marca. Al final dime qué has cambiado y vuelve a lanzar npx impeccable detect.

5. El control automático en cada cambio

Con el instalador, Claude Code recibe dos hooks, es decir, comandos que se lanzan solos. Después de cada cambio en un archivo de la interfaz, un control rápido busca imágenes rotas, texto que se sale, brillos; al final del turno, uno más amplio mira los archivos tocados. Lo que encuentra vuelve a Claude, que lo corrige o te explica la elección. Los ves con /hooks.

• /impeccable hooks status te dice si está activo; /impeccable hooks off lo apaga, /impeccable hooks on lo vuelve a encender.
• npx impeccable install --no-hooks instala sin hook, solo esa vez.
• /impeccable doctor comprueba que esté bien instalado: si no dice nada, también puede estar apagado.

¿Y si Inter es de verdad tu tipografía? Díselo una vez: la regla sigue activa para las demás, y la excepción vale tanto para el hook como para detect.

npx impeccable ignores add-value overused-font Inter --reason "Tipografía de la marca"

Errores comunes

• Fiarse de un detect limpio. Es un indicio, no una prueba: abre la página y pide una critique.
• Usar polish para cambiar de dirección. Polish pule, no rediseña.
• Apagarlo todo por culpa de una tipografía. Añade la excepción con ignores add-value y mantén las demás reglas.
• Subir a git toda la carpeta .impeccable/, con capturas y archivos temporales. Copia en tu .gitignore el bloque del README.

Lista de comprobación

• Tras reiniciar, Claude Code ve /impeccable
• PRODUCT.md existe y lo he releído y corregido
• npx impeccable detect sobre mi código termina con 0
• /impeccable hooks status dice que el control automático está activo

Preguntas frecuentes