Impeccable: qué es, cómo instalarlo y cómo utilizarlo en 2026

Guía de diseño frontend con inteligencia artificial · Actualizada el 4 de noviembre de 2026 · Para España y Latinoamérica

Impeccable es una herramienta de diseño para agentes de programación con IA que ayuda a crear y mejorar interfaces web con criterios profesionales de UI/UX. Desarrollada por Paul Bakaus y publicada en GitHub, combina una skill de diseño, comandos especializados y un detector automático de problemas visuales que funciona sin recurrir a modelos de lenguaje.

Su objetivo es corregir uno de los problemas habituales del desarrollo asistido por IA: las interfaces funcionales que terminan pareciéndose demasiado entre sí. Tipografías poco diferenciadas, tarjetas repetitivas, degradados innecesarios, jerarquías débiles y paletas de colores previsibles son algunos de los patrones que intenta evitar.

Impeccable se integra con Claude Code, Cursor, Codex, GitHub Copilot, Gemini CLI y otros agentes compatibles. No es un constructor web independiente: trabaja junto al agente que analiza y modifica el código del proyecto.

La instalación habitual se realiza desde la terminal:

npx impeccable install

Después de seleccionar el agente y el ámbito de instalación, hay que recargar la herramienta y ejecutar:

/impeccable init

En Codex se utiliza:

$impeccable init

La versión tomada como referencia en esta guía es Impeccable 4.8.0, con CLI 4.8.0 y motor del detector 0.1.18. Según los lanzamientos oficiales consultados, se publicó el 26 de octubre de 2026. El proyecto utiliza la licencia Apache 2.0.

Ficha de Impeccable

Dato	Información
Proyecto	Impeccable
Autor	Paul Bakaus (@pbakaus)
Repositorio	github.com/pbakaus/impeccable
Versión de referencia	4.8.0
Versión de CLI	4.8.0
Motor del detector	0.1.18
Licencia	Apache-2.0
Requisito de Node.js	18.19.0 o posterior para instalar mediante npm
Instalación	npm / npx
Interfaz principal	Agente de programación con IA
Detector	Motor en Rust con reglas deterministas
Documentación	impeccable.style/docs

Paul Bakaus tiene una trayectoria conocida en el ecosistema web. Creó jQuery UI, trabajó como Developer Advocate en Google y participó en proyectos como AMP y Chrome DevTools.

El repositorio de Impeccable se creó en noviembre de 2025. En noviembre de 2026, rondaba las 95.000-100.000 estrellas en GitHub, con un crecimiento de miles de estrellas por semana. Como esta cifra cambia constantemente, lo más fiable es consultar el repositorio para conocer el dato actualizado.

Resumen rápido: ¿merece la pena utilizar Impeccable?

Sí, sobre todo si utilizas Claude Code, Cursor o Codex para desarrollar interfaces y has observado que los resultados tienden a repetir los mismos recursos visuales.

Impeccable aporta tres elementos principales:

• Instrucciones de diseño reutilizables: ayudan al agente a tomar decisiones visuales con mayor contexto.
• Comandos especializados: permiten trabajar sobre aspectos concretos de una interfaz, como la tipografía, el color, la composición o la experiencia de usuario.
• Un detector independiente: identifica patrones visuales problemáticos mediante reglas deterministas, sin consumir tokens de IA.

No sustituye el criterio de un diseñador ni garantiza una buena experiencia de usuario. Su utilidad está en convertir decisiones de diseño en instrucciones más concretas y repetibles, y en facilitar las revisiones durante el desarrollo.

Lo más interesante de Impeccable

• Dirección visual: ayuda al agente a elegir una identidad visual en lugar de recurrir siempre a los mismos componentes.
• Tipografía: permite trabajar la jerarquía, los tamaños y la personalidad tipográfica.
• Color: facilita la construcción de paletas y la mejora del contraste.
• Composición: ayuda a revisar espacios, distribución y jerarquía visual.
• Interacción: incorpora instrucciones para animaciones, estados y comportamientos.
• Revisión: ofrece comandos como critique, audit y polish.
• Detección automática: utiliza un motor independiente para localizar antipatrones de diseño, incluso en procesos de integración continua.

En una entrevista con Latent Space publicada en julio de 2026, Bakaus explicó que Impeccable «nunca va a ser una herramienta de diseño de una sola pasada». También señaló que los diseñadores representan al menos la mitad de su audiencia. La herramienta está pensada para acompañar un proceso iterativo, no para pulsar un botón y obtener un producto terminado.

¿Para quién es recomendable?

Perfil	Utilidad
Desarrollador frontend	Alta
Usuario de Claude Code	Alta
Usuario de Cursor	Alta
Usuario de Codex	Alta
Diseñador UI/UX	Complementaria
Creador de landing pages	Alta
Desarrollador de dashboards	Alta
Principiante en frontend	Media-alta
Desarrollador backend sin trabajo visual	Baja

Tiene más sentido incorporarlo a proyectos donde la interfaz influye directamente en el resultado comercial: páginas de producto, aplicaciones SaaS, dashboards, tiendas online y sitios de contenido.

¿Qué es Impeccable y qué problema resuelve?

Impeccable es un proyecto de código abierto que proporciona conocimientos y herramientas de diseño a los agentes de programación con inteligencia artificial.

Su punto de partida fue la skill frontend-design de Anthropic, una de las primeras guías de diseño frontend ampliamente adoptadas para Claude. Impeccable amplió ese enfoque con más comandos, archivos de contexto persistente y un motor propio para detectar problemas visuales.

En la distribución actual, frontend-design aparece como una denominación antigua que remite a Impeccable.

La idea detrás del proyecto es sencilla: un asistente de programación puede generar código frontend rápidamente, pero eso no significa que sepa tomar buenas decisiones de diseño.

El problema del diseño genérico generado por IA

Cuando se pide a un agente que cree una página web sin proporcionarle referencias ni criterios visuales, es frecuente obtener una interfaz funcional, pero poco diferenciada.

Entre los patrones más habituales están:

• Degradados previsibles: fondos morados y azules utilizados sin una razón relacionada con la marca.
• Tarjetas repetitivas: demasiados contenedores, superficies anidadas y bloques con la misma estructura.
• Tipografía sin personalidad: la misma fuente, con Inter como ejemplo recurrente, y jerarquías casi idénticas en proyectos muy diferentes.
• Contraste insuficiente: textos secundarios difíciles de leer y poca diferenciación entre los elementos importantes.
• Iconografía decorativa: iconos dentro de fichas cuadradas redondeadas que ocupan espacio sin aportar información.

A este fenómeno se le suele llamar AI slop: contenido o interfaces generados rápidamente que cumplen una función básica, pero muestran poca originalidad, escasa coherencia visual o una ejecución superficial.

No es un término técnico con una definición universal. En diseño frontend se utiliza para describir interfaces que parecen construidas a partir de una plantilla genérica, sin decisiones visuales suficientemente meditadas.

Una explicación habitual es que los modelos han aprendido de conjuntos de datos con muchos patrones compartidos. Cuando nadie especifica una dirección visual, tienden a producir soluciones estadísticamente frecuentes. En el desarrollo web, una de esas soluciones es la típica landing page SaaS con degradados, tarjetas redondeadas y tipografía intercambiable.

Cómo intenta solucionar el problema

Impeccable introduce una capa de conocimiento de diseño entre la petición del usuario y el trabajo del agente.

En lugar de limitarse a recibir una instrucción como:

Crea una página moderna para una aplicación SaaS.

El agente puede trabajar con información más concreta:

• Quién utilizará el producto.
• Qué problema resuelve.
• Qué personalidad debe transmitir.
• Qué referencias visuales conviene seguir.
• Qué colores y tipografías corresponden a la marca.
• Qué patrones visuales deben evitarse.
• Qué componentes ya existen en el proyecto.

Cuanto mejor sea ese contexto, más posibilidades tendrá el agente de producir una interfaz coherente con el producto, en lugar de una composición genérica.

¿Es un plugin, una skill o un generador de páginas?

Impeccable reúne varias piezas que cumplen funciones diferentes:

Concepto	Función
Skill	Proporciona instrucciones y conocimientos de diseño al agente
CLI	Instala, actualiza y ejecuta las herramientas del proyecto
Comandos	Permiten solicitar tareas concretas de diseño
Detector	Busca problemas visuales mediante reglas deterministas
Hooks	Ejecutan el detector cuando el agente edita archivos de interfaz
Integraciones	Adaptan la instalación a diferentes agentes

No es un framework como React, una biblioteca de componentes como shadcn/ui ni un constructor visual independiente.

El agente sigue siendo quien analiza el proyecto, modifica archivos y genera código. Impeccable le proporciona un método de trabajo más orientado al diseño.

Cómo funciona Impeccable

El funcionamiento se puede entender mediante cuatro etapas:

1. Contexto: el agente conoce el producto, el público y la dirección visual mediante PRODUCT.md y DESIGN.md.
2. Instrucciones: la skill de Impeccable aplica criterios de diseño y ayuda a seleccionar el trabajo adecuado.
3. Implementación: el agente modifica componentes, estilos, tipografías y comportamientos mediante comandos y código frontend.
4. Revisión: critique, audit y el detector identifican problemas que pueden corregirse en nuevas iteraciones.

1. El agente obtiene contexto

Impeccable utiliza archivos de contexto para conocer el proyecto. Así evita proponer una identidad visual completamente distinta cada vez que se trabaja en una página.

2. El usuario solicita una tarea

Puedes utilizar comandos como:

/impeccable polish the homepage
/impeccable critique the pricing page
/impeccable typeset the article layout

También puedes describir el resultado que buscas mediante lenguaje natural.

3. El agente trabaja sobre el código

La skill guía al agente para que examine la interfaz existente, seleccione los criterios relevantes y realice los cambios en los archivos del proyecto.

No necesitas escribir manualmente CSS para cada ajuste: el agente se encarga de implementar las modificaciones siguiendo las instrucciones disponibles.

4. Se revisa el resultado

Los comandos de revisión y el detector ayudan a encontrar problemas que pueden pasar inadvertidos durante una implementación rápida.

La decisión final sigue correspondiendo al desarrollador. Una advertencia automática no significa necesariamente que exista un problema real, y una interfaz sin advertencias tampoco tiene por qué ser una buena interfaz.

Funciones y comandos principales de Impeccable

Una de las partes más útiles de Impeccable es su sistema de comandos. En lugar de depender únicamente de instrucciones improvisadas, el usuario dispone de un vocabulario de diseño que permite solicitar tareas específicas.

La versión 4.8.0 organiza 24 comandos bajo el comando general /impeccable, aunque algunas referencias anteriores mencionan 23 o 24. La cifra puede variar entre versiones. Uno de ellos, craft, está obsoleto en la versión actual.

La diferencia entre utilizar un comando específico y pedir simplemente que una página sea más bonita está en el procedimiento que activa. Por ejemplo, bolder no es solo un adjetivo: se utiliza para trabajar la jerarquía, la escala y la tipografía de una interfaz.

Comandos para crear y planificar

Comando	Función	Cuándo utilizarlo
impeccable	Punto de entrada y orientación general	Cuando no sabes qué tarea conviene realizar
shape	Define la experiencia y prepara un plan antes de programar	Antes de construir una página compleja
init	Recoge el contexto del producto	Al comenzar un proyecto
generate	Genera variantes de un elemento existente	Cuando quieres comparar diferentes soluciones
craft	Alias antiguo de creación	No recomendado en la versión actual

Hay una diferencia importante entre shape e init:

• init registra qué es el producto, quién lo utiliza y qué restricciones tiene.
• shape define cómo debería funcionar una página o experiencia concreta antes de implementarla.

Por ejemplo:

/impeccable shape a dashboard for managing
customer subscriptions. Users need to identify
failed payments and retry them quickly.

El resultado esperado es un brief con objetivos, estructura, estados y decisiones pendientes. No se trata simplemente de pedir al agente que genere código.

Durante la inicialización también se registra la preferencia de construcción (buildPath): puedes elegir entre generar primero una composición visual completa y construir después el código para reproducirla, o desarrollar directamente en código siguiendo un contrato de dirección escrita.

La primera alternativa ofrece más control visual; la segunda suele ser más rápida y ligera.

Comandos para evaluar el diseño

Comando	Función	Cuándo utilizarlo
critique	Revisa la calidad visual y la usabilidad	Para identificar problemas de diseño
audit	Evalúa la calidad de la implementación	Antes de publicar o después de cambios importantes

critique realiza una revisión del diseño y presenta fortalezas, problemas y prioridades.

Ejemplo:

/impeccable critique the pricing page

Puede analizar cuestiones como:

• Si se entiende la propuesta principal.
• Si las acciones importantes destacan.
• Si la jerarquía visual es coherente.
• Si existen elementos innecesarios.
• Si el recorrido del usuario resulta claro.

La revisión genera observaciones, pero no modifica automáticamente la página. El desarrollador decide qué recomendaciones aplicar.

Por su parte, audit se centra en la calidad de la implementación.

/impeccable audit the checkout flow

Puede revisar accesibilidad, rendimiento, temas visuales, comportamiento responsive e integridad de la implementación. Los hallazgos se clasifican por severidad, de P0 a P3:

• P0: problemas que no deberían pasarse por alto antes de publicar.
• P1 y P2: incidencias de prioridad intermedia.
• P3: mejoras de menor prioridad que pueden esperar.

Es especialmente útil antes de publicar una aplicación o después de realizar cambios importantes.

Comandos para refinar la interfaz

Estos son algunos de los comandos que probablemente utilizarás con más frecuencia durante el desarrollo:

Comando	Qué hace	Ejemplo
polish	Refina una interfaz existente	polish the homepage
bolder	Hace más expresiva una composición	bolder the hero section
quieter	Reduce el ruido visual	quieter the dashboard
distill	Elimina elementos innecesarios	distill the pricing page
colorize	Introduce o mejora el uso del color	colorize the settings page
typeset	Mejora la tipografía y la jerarquía textual	typeset the article page
layout	Ajusta distribución y espaciado	layout the dashboard
animate	Mejora transiciones y movimiento	animate the navigation menu
delight	Añade detalles de personalidad	delight the onboarding flow
overdrive	Explora efectos visuales más ambiciosos	overdrive the hero section

Algunos ejemplos ayudan a entender cuándo utilizar cada uno.

Polish: mejorar una interfaz sin cambiar su identidad

/impeccable polish the homepage.

Improve typography, spacing, button states
and responsive behavior.

Preserve the existing brand colors and layout.

Es una buena opción cuando la página ya funciona, pero todavía parece inacabada. La instrucción también deja claro qué elementos deben conservarse.

Bolder: dar más personalidad

/impeccable bolder the hero section.

Create a stronger visual hierarchy,
make the headline more distinctive
and give the primary CTA more presence.

Keep the existing product identity.

Conviene utilizarlo cuando la interfaz es demasiado conservadora y el mensaje principal no consigue destacar.

Quieter: reducir el exceso visual

/impeccable quieter the analytics dashboard.

Reduce unnecessary decoration,
remove competing visual elements
and make important metrics easier to scan.

Resulta especialmente útil para dashboards con demasiadas tarjetas, colores y elementos decorativos.

Distill: simplificar

/impeccable distill the signup page.

Keep the essential information and actions.
Remove redundant sections and unnecessary visual containers.

No se trata de eliminar contenido indiscriminadamente, sino de facilitar que el usuario encuentre lo importante.

Typeset: mejorar la tipografía

/impeccable typeset the editorial homepage.

Create a distinctive heading hierarchy,
improve paragraph readability
and establish consistent typography scales.

Puede resultar interesante para blogs, revistas digitales y páginas de documentación, donde la legibilidad tiene un peso especial.

Comandos para simplificar y mejorar la experiencia

Comando	Función	Aplicación
adapt	Adapta una interfaz a otro dispositivo o contexto	Convertir un dashboard de escritorio en una experiencia móvil
clarify	Mejora la claridad del contenido y los textos	Formularios, errores y mensajes
harden	Refuerza estados y casos límite	Formularios, checkout y aplicaciones
onboard	Diseña experiencias de primera utilización	Registro y configuración inicial
optimize	Investiga y mejora el rendimiento	Páginas lentas y aplicaciones pesadas

Por ejemplo:

/impeccable harden the checkout flow.

Handle missing payment information,
network failures, validation errors
and successful payment confirmation.

Esta instrucción es más útil que pedir simplemente que la página tenga un aspecto más moderno. harden también puede ayudar a revisar situaciones que suelen quedar fuera de una primera implementación: textos largos que rompen la maquetación, estados vacíos, mensajes de error, internacionalización y direcciones de escritura de derecha a izquierda.

Comandos para trabajar con el sistema de diseño

Comando	Función
document	Registra el sistema visual existente en DESIGN.md
extract	Extrae patrones y componentes reutilizables del proyecto
init	Registra el contexto del producto

Hay otras dos funciones que merecen atención:

• live: permite seleccionar elementos directamente en el navegador y explorar modificaciones visuales.
• generate: permite generar diferentes variantes de un elemento identificado.

En Live Mode puedes seleccionar un componente, comparar alternativas y aceptar una modificación para incorporarla al código fuente. Esto hace que el feedback sea mucho más preciso que una descripción general como «la parte de arriba está vacía»: el agente recibe una referencia concreta del elemento seleccionado.

¿Qué pasó con el comando craft?

craft aparece en algunos tutoriales y referencias antiguas. En la versión 4.8.0 está marcado como un alias obsoleto para una petición genérica de creación.

La documentación actual recomienda utilizar el flujo general de Impeccable o shape cuando necesitas planificar una experiencia.

Por tanto, no conviene crear nuevos tutoriales que presenten craft como uno de los comandos principales de la versión actual.

El detector de Impeccable: reglas deterministas sin modelo de IA

El detector es una de las piezas más interesantes del proyecto. A diferencia de los comandos de diseño, no necesita que un modelo de lenguaje interprete una petición: utiliza reglas programadas para localizar determinados problemas visuales.

Cómo funciona el motor

El motor del detector está escrito en Rust y se distribuye como un binario autocontenido que se descarga e instala junto a la skill. No necesita Node.js en tiempo de ejecución, una llamada a un modelo de lenguaje ni una clave de API.

Técnicamente, analiza el árbol de sintaxis abstracta (AST) de los archivos fuente o el DOM de las páginas renderizadas.

Al no depender de un LLM, las comprobaciones pueden ejecutarse localmente y con rapidez, tanto desde la terminal como después de las ediciones del agente o dentro de un pipeline de integración continua.

Esto separa dos tareas que muchas herramientas de diseño con IA dejan en manos del mismo modelo:

• Generación: el modelo propone y modifica código mediante un proceso probabilístico.
• Validación: el detector comprueba patrones concretos mediante reglas deterministas.

La diferencia es importante. Una recomendación incluida en un prompt puede seguirse o ignorarse según cómo interprete el agente la instrucción. Una regla del detector, en cambio, se ejecuta de acuerdo con una condición programada.

Dos familias de reglas

El README de la versión 4.8.0 indica que el detector incluye 62 reglas deterministas. En versiones anteriores se mencionaban entre 59 y 61, por lo que la cifra debe entenderse como una referencia de esa versión, no como un número permanente.

Las reglas se dividen en dos grupos:

1. Reglas para detectar AI slop

Buscan patrones repetitivos que pueden delatar una interfaz generada sin suficiente criterio visual:

• Degradados morados previsibles.
• Tarjetas dentro de otras tarjetas.
• Texto gris sobre fondos de color.
• Uso excesivo de Inter.
• Bordes de pestaña lateral.
• Animaciones con easing de rebote.
• Brillos oscuros y otros efectos repetitivos.

2. Reglas generales de calidad de diseño

También detectan problemas que no tienen relación directa con la IA:

• Líneas de texto demasiado largas.
• Padding insuficiente.
• Objetivos táctiles demasiado pequeños.
• Saltos de nivel en los encabezados.
• Párrafos que terminan con una palabra aislada.

Este segundo grupo es especialmente interesante. El detector no se limita a señalar modas visuales: también puede advertir problemas de composición y legibilidad que afectan a cualquier proyecto frontend.

Cómo ejecutar el detector

Para analizar archivos de un proyecto:

npx impeccable detect src/

Para comprobar una página web en ejecución:

npx impeccable detect http://localhost:3000

Para revisar una vista móvil:

npx impeccable detect --viewport 390x844 http://localhost:3000

Cuando se analiza una URL, el detector utiliza una instalación disponible de Chrome, Chromium o Edge para examinar el DOM renderizado y el layout calculado. Por tanto, no se limita a inspeccionar el código fuente: también comprueba cómo presenta la página el navegador.

Desde la versión 4.7.0 puede analizar aplicaciones de escritorio en ejecución. Un proceso de Electron, NW.js, CEF o WebView2 abierto con un puerto de depuración puede comprobarse mediante:

npx impeccable detect --cdp 9222

Uso en integración continua

Los códigos de salida permiten incorporar el detector a scripts y procesos automatizados:

Código de salida	Significado
0	Sin hallazgos principales
2	Se han encontrado hallazgos
1	El objetivo no pudo analizarse

También dispone de opciones para integrarse con otras herramientas:

• --json: genera una salida procesable por otros programas.
• --github: convierte los hallazgos en anotaciones asociadas a las líneas correspondientes de un pull request.
• --list-rules: muestra el catálogo completo de reglas, con su categoría y descripción.

Antes de incorporarlo a un proyecto, resulta útil ejecutar --list-rules para comprobar qué patrones se consideran problemáticos y decidir si encajan con el sistema de diseño del equipo.

Excepciones y avisos

No todas las advertencias justifican un cambio. Una fuente poco habitual, por ejemplo, puede ser una decisión deliberada de marca.

En esos casos puedes registrar una excepción específica:

npx impeccable ignores add-value overused-font Inter --reason "Brand font"

También existen comentarios en línea para desactivar una regla en un archivo concreto.

Algunos hallazgos se muestran como avisos (advisory) en lugar de fallos. Una sombra dura desplazada cuatro píxeles o más, por ejemplo, puede ser una elección intencionada en un diseño neobrutalista. En ese caso, puede conservarse mediante un atributo de exención en el propio elemento.

Hay una advertencia que conviene tener presente: una ejecución limpia del detector es evidencia de que no se han encontrado determinados problemas, pero no demuestra que la interfaz sea visualmente buena o accesible. Sigue siendo necesario revisar la página en distintos tamaños de pantalla.

Requisitos para instalar Impeccable

Antes de instalar Impeccable necesitas una herramienta de programación con IA compatible y una carpeta de proyecto.

No hace falta crear una aplicación desde cero. También puedes utilizarlo en un proyecto frontend que ya esté en desarrollo.

Requisitos técnicos

Requisito	Necesario
Sistema operativo	Windows, macOS o Linux
Node.js	18.19.0 o posterior para instalar mediante npm
npm / npx	Incluido normalmente con Node.js
Terminal	Sí
Agente de programación	Sí, uno compatible
Proyecto	Existente o nuevo
Cuenta de GitHub	No es obligatoria para instalar mediante npm
API de IA	Depende del agente y del proveedor

El requisito mínimo de Node.js aparece en el package.json oficial.

Hay un matiz importante: la skill y el motor del detector funcionan mediante un binario autocontenido que no requiere Node.js ni otro runtime. Node.js solo es necesario para utilizar npx durante la instalación y las actualizaciones.

Puedes comprobar las versiones instaladas con:

node -v
npm -v

Si Node.js es anterior a 18.19.0, tendrás que actualizarlo para utilizar el instalador mediante npm.

¿Qué proyecto frontend necesitas?

Impeccable no exige un framework concreto. Puede trabajar con proyectos que utilicen:

• React.
• Next.js.
• Vue.
• Svelte.
• SvelteKit.
• Astro.
• HTML y CSS.
• Otros entornos web compatibles.

El detector reconoce archivos JSX, TSX, Vue, Svelte, Astro, HTML y hojas de estilo.

Para aprovechar todas las funciones, resulta conveniente disponer de una aplicación que pueda ejecutarse localmente y abrirse en un navegador.

Cómo instalar Impeccable paso a paso

La instalación mediante CLI es la opción recomendada para la mayoría de usuarios.

Paso 1. Abre la carpeta del proyecto

Supongamos que tienes una aplicación llamada saas-dashboard. Su estructura podría ser esta:

saas-dashboard/
├── package.json
├── src/
├── public/
├── components/
└── ...

Abre la carpeta en tu editor y utiliza la terminal integrada.

También puedes acceder desde una terminal externa:

cd saas-dashboard

Si quieres realizar una instalación local, ejecuta el instalador desde la raíz del proyecto.

Paso 2. Ejecuta el instalador

Escribe:

npx impeccable install

El instalador detecta el entorno y presenta las opciones disponibles para seleccionar la herramienta de programación.

El procedimiento habitual es:

1. Seleccionar el agente que utilizas.
2. Elegir si quieres instalar Impeccable en el proyecto actual o para todos tus proyectos.
3. Confirmar la instalación.
4. Permitir la descarga de los componentes necesarios.
5. Esperar a que termine el proceso.

En entornos no interactivos, como scripts o procesos de CI, puedes pasar las opciones directamente:

npx impeccable install --providers=claude,cursor,codex --scope=project

Hay dos ámbitos de instalación:

Modalidad	Ventaja	Cuándo elegirla
project	La instalación pertenece al proyecto	Equipos y proyectos concretos
user	Está disponible en distintos proyectos del usuario	Uso habitual en varios repositorios

Para equipos de desarrollo, la instalación local suele ser más conveniente porque facilita controlar qué versión utiliza cada proyecto.

Paso 3. Recarga el agente

Cuando termine la instalación, cierra y vuelve a abrir la herramienta de programación o inicia una sesión nueva, según el agente utilizado.

Esto permite que descubra la skill recién instalada.

Paso 4. Comprueba la instalación

Abre el chat del agente y escribe:

/impeccable

En Codex:

$impeccable

Si la instalación se ha realizado correctamente, el agente debería reconocer el comando y mostrar las opciones disponibles.

Si no aparece, comprueba que seleccionaste la herramienta correcta durante la instalación y que la carpeta del proyecto abierta coincide con la ubicación donde instalaste la skill.

Cómo configurar Impeccable por primera vez

La inicialización es una de las partes más importantes. Instalar la herramienta y empezar a pedir cambios visuales sin definir el producto suele dar resultados menos consistentes.

Paso 1. Ejecuta init

En el chat del agente:

/impeccable init

En Codex:

$impeccable init

Impeccable examina el proyecto, consulta la documentación existente y analiza la información que puede inferir del código. Después pregunta por los aspectos que todavía no conoce.

Por ejemplo:

• ¿Quién utiliza el producto?
• ¿Qué problema resuelve?
• ¿Qué tarea debe completar el usuario?
• ¿Qué restricciones tiene la interfaz?
• ¿Qué decisiones de marca deben conservarse?

No necesitas preparar previamente un documento de requisitos completo.

Paso 2. Revisa PRODUCT.md

La inicialización guarda la información acordada en PRODUCT.md, un archivo que recoge el contexto del producto.

Campo	Información
Audience	Público objetivo
Purpose	Objetivo del producto
Platform	Plataforma principal
Constraints	Restricciones
Terminology	Terminología específica
Brand commitments	Decisiones de marca confirmadas

Un ejemplo para una aplicación SaaS podría ser:

# Product Context

## Product
CloudMetrics

## Audience
Small and medium-sized businesses
that need to monitor website performance.

## Purpose
Help users understand traffic,
conversion rates and revenue trends.

## Primary tasks
- Monitor website traffic.
- Compare conversion rates.
- Identify performance problems.
- Export reports.

## Platform
Web application.
Desktop-first, fully responsive.

## Brand personality
Professional, analytical,
clear and trustworthy.

## Constraints
- Prioritize data readability.
- Avoid unnecessary visual decoration.
- Keep navigation predictable.
- Preserve existing authentication flows.

Es un ejemplo orientativo, no una plantilla obligatoria. Lo importante es que la información describa el producto real y sus necesidades.

Paso 3. Registra el sistema visual con document

Hay un detalle que conviene conocer: init no crea automáticamente DESIGN.md.

Si el proyecto ya tiene una identidad visual que quieres conservar, utiliza:

/impeccable document

Impeccable examina la implementación y registra las decisiones visuales existentes.

El archivo puede recoger:

• Colores de marca.
• Tipografías.
• Escalas de tamaños.
• Espaciado.
• Radios de bordes.
• Componentes.
• Reglas de uso.
• Criterios de consistencia.

También puede generar información estructurada complementaria en .impeccable/design.json.

Diferencias entre PRODUCT.md y DESIGN.md

Estos archivos cumplen funciones distintas y conviene mantenerlos separados.

Archivo	Responde a	Contenido
PRODUCT.md	¿Qué estamos construyendo y para quién?	Producto, usuarios, objetivos y restricciones
DESIGN.md	¿Cómo debe verse y comportarse visualmente?	Tipografía, colores, componentes y reglas
.impeccable/surfaces/	¿Qué necesita esta página concreta?	Objetivo y dirección de cada superficie
.impeccable/design.json	¿Qué datos estructurados necesita la herramienta?	Tokens y metadatos visuales

Un producto puede cambiar de público objetivo sin necesidad de modificar toda su identidad visual. Del mismo modo, una marca puede actualizar su tipografía sin cambiar el propósito del producto.

Separar ambas cosas facilita mantener el contexto sin mezclar decisiones de negocio y diseño.

Para los equipos también hay un detalle práctico: Impeccable guarda capturas, estado de sesión y cachés bajo .impeccable/. El README recomienda versionar config.json, design.json, los briefs de surfaces/ y los informes de critique/, mientras que el resto puede excluirse. El proyecto incluye un bloque de .gitignore para aplicar esta separación.

Tutorial práctico: crear y mejorar una interfaz web con Impeccable

Para ver cómo encajan las distintas funciones, utilizaremos un ejemplo ficticio: CloudMetrics, una aplicación SaaS que permite analizar visitas, conversiones e ingresos de una página web.

El objetivo es crear una landing page y mejorarla mediante los comandos de Impeccable.

Los siguientes ejemplos son instrucciones que puedes utilizar con un agente. No representan una ejecución real ni resultados de pruebas realizadas.

Paso 1. Prepara el proyecto

Puedes utilizar una aplicación React o Next.js existente. Si quieres empezar desde cero, crea un proyecto:

npx create-next-app@latest cloudmetrics
cd cloudmetrics

Abre el proyecto en Cursor, Claude Code o Codex e instala Impeccable:

npx impeccable install

Selecciona el agente y el ámbito de instalación.

Paso 2. Inicializa el producto

Ejecuta:

/impeccable init

Proporciona información como esta:

CloudMetrics is a SaaS analytics platform
for small online businesses.

Its main purpose is to help business owners
understand traffic, conversions and revenue.

The audience includes founders,
marketing managers and ecommerce operators.

The brand should feel precise,
professional and approachable.

Avoid generic AI-looking SaaS designs.
Prioritize clarity and data visualization.

Después revisa PRODUCT.md y corrige cualquier información que el agente haya interpretado mal.

Paso 3. Define la dirección visual

Si el proyecto es nuevo, puedes utilizar shape para definir primero la experiencia:

/impeccable shape a SaaS landing page
for CloudMetrics.

The page should explain the product,
show its main benefits,
present a product preview
and encourage visitors to start a free trial.

The visual direction should feel
like a professional analytics product,
not a generic AI startup template.

El agente puede preparar una propuesta con:

• Estructura de la página.
• Secciones necesarias.
• Jerarquía de contenidos.
• Dirección visual.
• Elementos de conversión.
• Restricciones.

Revisa el brief antes de continuar. Es más fácil corregir la dirección en esta fase que modificar una página completa después de implementarla.

Paso 4. Construye la interfaz

Cuando la propuesta esté aprobada, solicita la implementación:

/impeccable design a complete landing page
for CloudMetrics using the approved brief.

Include:

- Navigation.
- Hero section.
- Product dashboard preview.
- Main product benefits.
- Feature comparison.
- Pricing section.
- FAQ.
- Final call to action.

Use responsive layouts.

Create a distinctive visual identity.
Avoid excessive cards and generic gradients.

Implement the page using the existing
framework and project conventions.

El agente utilizará el código existente y las instrucciones de Impeccable para desarrollar la interfaz.

Conviene describir el objetivo comercial de la página, no limitarse a pedir un diseño bonito. Una landing page para captar registros necesita decisiones diferentes a las de una página destinada a explicar características técnicas.

Paso 5. Mejora la tipografía

Una vez creada la primera versión, ejecuta:

/impeccable typeset the CloudMetrics homepage.

Improve the visual hierarchy of headings,
body text and supporting information.

Use a distinctive but readable type system.
Keep the interface professional.

Comprueba que:

• El título principal destaca.
• Los subtítulos tienen una jerarquía clara.
• Los párrafos son legibles.
• Los tamaños se mantienen coherentes.
• La tipografía funciona en dispositivos móviles.

Paso 6. Refina el diseño

Puedes realizar varias pasadas, cada una centrada en un aspecto concreto.

Para destacar el mensaje principal:

/impeccable bolder the hero section.

Make the main headline more distinctive
and strengthen the visual hierarchy.

Keep the page focused on conversion.

Para reducir elementos innecesarios:

/impeccable distill the benefits section.

Remove redundant visual containers.
Make each benefit easier to understand.

Para mejorar el color:

/impeccable colorize the dashboard preview.

Use color to distinguish data categories
and important metrics.

Preserve readable contrast.

Para finalizar:

/impeccable polish the entire homepage.

Check spacing, typography, alignment,
responsive behavior and interaction states.

Preserve the approved visual direction.

Es preferible realizar cambios concretos y revisar cada resultado, en lugar de ejecutar muchos comandos seguidos sin comprobar qué ha cambiado.

Paso 7. Revisa la calidad

Utiliza dos comandos con objetivos diferentes.

Primero:

/impeccable critique the CloudMetrics homepage

Esto genera una revisión del diseño y de la experiencia de usuario.

Después:

/impeccable audit the CloudMetrics homepage

Esta segunda revisión se centra en la implementación, la accesibilidad, el rendimiento y el comportamiento responsive.

Paso 8. Ejecuta el detector

Con el proyecto en ejecución, abre otra terminal y escribe:

npx impeccable detect src/

También puedes analizar la página renderizada:

npx impeccable detect http://localhost:3000

Para comprobar el diseño móvil:

npx impeccable detect --viewport 390x844 http://localhost:3000

Revisa los avisos y corrige los problemas que realmente afecten a la interfaz.

Paso 9. Verifica manualmente

Antes de publicar, comprueba:

• Navegación en escritorio y móvil.
• Funcionamiento de los botones.
• Formularios.
• Estados de carga.
• Mensajes de error.
• Contraste.
• Legibilidad.
• Tiempo de carga.
• Comportamiento con textos largos.

Una página puede superar las comprobaciones del detector y seguir teniendo problemas de usabilidad. La revisión humana continúa siendo imprescindible.

Ejemplos de uso de Impeccable en diferentes proyectos

Impeccable no se limita a las landing pages. Su sistema de comandos puede adaptarse a distintos tipos de interfaces, aunque las prioridades cambian según el producto.

Landing pages

En una landing page, el objetivo principal es explicar el producto y conseguir que el visitante realice una acción.

Impeccable puede ayudar a mejorar:

• La jerarquía del hero.
• El mensaje principal.
• La posición de las llamadas a la acción (CTA).
• La presentación del producto.
• La estructura de beneficios.
• La comparación de planes.
• El diseño responsive.

Comandos recomendados:

/impeccable shape the landing page
/impeccable bolder the hero section
/impeccable typeset the page
/impeccable polish the CTA section
/impeccable critique the homepage

El desarrollador sigue siendo responsable de comprobar que las afirmaciones comerciales son correctas, los precios están actualizados y los enlaces funcionan.

Dashboards SaaS

Los dashboards tienen necesidades diferentes a las páginas comerciales. Aquí importan especialmente la legibilidad de los datos, la navegación y la rapidez con la que el usuario puede completar una tarea.

Impeccable puede ayudar a:

• Ordenar métricas.
• Agrupar información relacionada.
• Mejorar tablas.
• Diferenciar estados.
• Simplificar filtros.
• Adaptar el dashboard a móviles.

Comandos:

/impeccable layout the analytics dashboard
/impeccable distill the KPI cards
/impeccable typeset the data tables
/impeccable audit the dashboard

Una mejora visual no implica que los datos sean más precisos. La lógica de negocio, los cálculos y las consultas siguen dependiendo de la aplicación.

Tiendas online

En una tienda online, la interfaz debe ayudar al usuario a encontrar productos, comparar opciones y completar una compra.

Impeccable puede utilizarse para mejorar:

• Fichas de producto.
• Galerías de imágenes.
• Filtros.
• Navegación por categorías.
• Selectores de variantes.
• Carrito.
• Proceso de checkout.

Comandos recomendados:

/impeccable polish the product detail page
/impeccable clarify the product specifications
/impeccable harden the checkout flow
/impeccable adapt the product page for mobile

El desarrollador debe verificar por separado el inventario, los precios, los impuestos, los pagos, la seguridad y las condiciones de compra.

Aplicaciones web

También resulta útil en interfaces donde el usuario realiza tareas concretas, por ejemplo:

• Formularios.
• Paneles de configuración.
• Procesos de registro.
• Gestión de cuentas.
• Estados vacíos.
• Mensajes de error.
• Confirmaciones.

El comando harden puede ser especialmente útil:

/impeccable harden the account settings page.

Review validation, error handling,
loading states and recovery behavior.

La revisión no se limita a los elementos visibles en condiciones normales. También puede ayudar a contemplar situaciones menos frecuentes, como errores de validación, problemas de conexión y estados de recuperación.

Sitios web de contenido

En blogs, revistas digitales y sitios de guías, la prioridad es facilitar la lectura.

Impeccable puede ayudar a:

• Mejorar títulos y subtítulos.
• Crear índices de navegación.
• Ajustar la anchura de lectura.
• Diferenciar notas y advertencias.
• Mejorar tablas.
• Optimizar la lectura móvil.
• Organizar contenido extenso.

Comandos recomendados:

/impeccable typeset the article template
/impeccable layout the table of contents
/impeccable distill the sidebar
/impeccable adapt the article for mobile

Hay una limitación importante: Impeccable puede mejorar la presentación del contenido, pero no garantiza que un artículo tenga calidad editorial, precisión factual o cobertura SEO suficiente. Esas tareas necesitan un proceso editorial independiente.

Un caso real: cuando el detector recomienda algo que no conviene cambiar

Un desarrollador que mantiene Assurcast, una plataforma de noticias y empleo para auditores internos, documentó su experiencia con Impeccable.

Uno de los hallazgos más interesantes fue una advertencia de prioridad 1 sobre un «monocultivo de tarjetas» en la portada: diez tarjetas idénticas, sin suficiente jerarquía visual. El detector recomendaba eliminarlas y sustituirlas por separadores y una jerarquía tipográfica más marcada.

El desarrollador no estuvo de acuerdo. Su producto funciona como un muro de publicaciones, similar a Twitter, Hacker News o Substack, donde la uniformidad visual forma parte de la experiencia esperada. La recomendación aplicaba criterios propios de una portada editorial, como las de NYT o Bloomberg, a un producto basado en un feed social.

En lugar de aceptar el cambio, documentó el motivo para conservar la estructura y aplicó cuatro mejoras menores de escaneabilidad que no alteraban la uniformidad del feed.

La experiencia ilustra una limitación importante de cualquier sistema de reglas: Impeccable puede señalar problemas potenciales, pero no siempre conoce las decisiones de producto que justifican un patrón visual.

Funciona mejor como un colaborador con opiniones claras con el que puedes discutir, no como un corrector automático al que hay que obedecer.

Herramientas de programación compatibles con Impeccable

Impeccable está diseñado para trabajar con diferentes agentes de programación. La compatibilidad se adapta mediante instalaciones específicas, por lo que no todos utilizan necesariamente los mismos archivos de configuración o mecanismos de ejecución.

La documentación y los anuncios de la versión 4.8.0 incluyen los siguientes entornos:

Herramienta	Compatibilidad indicada	Método de instalación	Forma de ejecutar
Claude Code	Oficial	CLI o plugin de Claude	/impeccable
Cursor	Oficial	CLI	/impeccable
OpenAI Codex CLI	Oficial	CLI o skill	$impeccable
GitHub Copilot	Oficial	Skill integrada o instalación compatible	/impeccable
Gemini CLI	Oficial	CLI	/impeccable
OpenCode	Oficial	CLI	/impeccable
Devin	Oficial desde 4.8.0	CLI	Según su interfaz de skills
Replit Agent	Oficial desde 4.8.0	CLI	Según su interfaz de skills
Google Antigravity	Oficial	CLI	Según su interfaz de skills
Pi	Oficial	CLI	Según su interfaz de skills
Grok Build	Oficial	CLI	Según su interfaz
Kiro	Oficial	CLI	Según su interfaz

La disponibilidad de comandos, hooks y funciones auxiliares puede variar según el agente y su versión. Conviene consultar la documentación de la integración concreta antes de asumir que todas las funciones se comportan igual.

Impeccable con Claude Code

Claude Code ofrece dos posibilidades de instalación.

Opción 1: instalación mediante CLI

npx impeccable install

Selecciona Claude Code durante el proceso.

Opción 2: instalación como plugin

En el chat de Claude Code:

/plugin marketplace add pbakaus/impeccable

Después abre el gestor de plugins:

/plugin

Selecciona Discover, busca Impeccable e instálalo.

Esta modalidad resulta conveniente si prefieres gestionar las extensiones desde el propio entorno de Claude Code.

Impeccable con Cursor

Para Cursor, la opción recomendada es utilizar el instalador:

npx impeccable install

Selecciona Cursor y el ámbito de instalación.

Después de reiniciar o recargar el editor, ejecuta:

/impeccable init

Hay un detalle específico de Cursor: su hook de diseño se ejecuta después de cada escritura y comprueba lo que Cursor acaba de editar, en lugar de bloquear la escritura antes de aplicarla.

Si utilizas una instalación anterior, los comandos update y doctor --fix permiten migrar el hook existente al nuevo comportamiento.

Impeccable con Codex

Codex utiliza una sintaxis diferente a la de otros agentes.

Instala la skill mediante:

npx impeccable install

Selecciona Codex durante la instalación.

Después, en el agente, utiliza:

$impeccable init

También puedes consultar las skills disponibles mediante:

/skills

O escribir $ para buscar una skill instalada.

En Codex, los hooks requieren una autorización adicional. Instalar la skill no significa que todos los mecanismos automáticos estén activos. Antes de habilitarlos, conviene revisar la configuración de hooks.

Impeccable con GitHub Copilot

La documentación actual indica que Impeccable está integrado en la aplicación de GitHub Copilot.

Para utilizar esta modalidad:

1. Abre la configuración de Copilot.
2. Entra en Settings.
3. Busca Experimental.
4. Habilita Impeccable cuando esté disponible.
5. Abre el proyecto e inicia la configuración.

Esta integración no debe confundirse con una instalación genérica de una skill mediante npm: es una vía propia de la aplicación.

Impeccable con Gemini CLI y OpenCode

Ambos aparecen en la lista oficial de herramientas compatibles.

La forma más sencilla de instalarlos es:

npx impeccable install

Selecciona la herramienta correspondiente y sigue las instrucciones.

En Gemini CLI, si la skill no aparece después de modificar la instalación, puedes actualizar la lista con:

/skills reload

También puedes consultar las skills disponibles mediante:

/skills list

Cómo se comportan los hooks según el agente

El hook es el mecanismo que ejecuta el detector cuando el agente edita un archivo de interfaz. Su funcionamiento depende de la integración:

Agente	Cuándo aparecen los hallazgos
Claude Code, Copilot y Codex	Después de la edición, con una pasada más profunda al detenerse cuando está soportada
Cursor	Comprueba la edición recién realizada, una vez por edición
Grok Build	Solo al detenerse, no después de cada edición

Esto importa por dos motivos.

El primero es práctico: los hallazgos del detector pueden incorporarse al contexto del modelo para que el agente corrija problemas antes de considerar terminada la tarea.

El segundo tiene que ver con la seguridad. En Claude Code, los hooks instalados se ejecutan con independencia de la aprobación del modelo. Esto significa que una edición o un evento de parada puede descargar el motor del detector aunque la sesión haya denegado el comando del lanzador.

Este comportamiento merece atención en entornos con permisos restringidos.

Métodos alternativos de instalación

Además del instalador oficial, existen otras formas de distribuir Impeccable.

Instalación mediante skills.sh

Puedes utilizar el sistema de distribución de skills:

npx skills add pbakaus/impeccable

Esta opción instala la skill compartida.

Sin embargo, el propio proyecto recomienda utilizar su instalador para las integraciones adaptadas a cada agente.

Las diferencias principales son:

Método	Qué instala	Cuándo utilizarlo
npx impeccable install	Integración adaptada al agente	Opción recomendada
npx skills add pbakaus/impeccable	Skill compartida	Entornos compatibles con skills.sh
Plugin de Claude Code	Integración gestionada desde Claude	Usuarios de Claude Code
Copilot integrado	Integración incorporada	Usuarios de la aplicación Copilot
Git submodule + link	Fuente compartida y enlaces por proveedor	Equipos que quieren fijar una versión

Instalación mediante Git para equipos

En un equipo de desarrollo puede interesar mantener una versión compartida de Impeccable dentro del repositorio.

El procedimiento documentado es:

git submodule add https://github.com/pbakaus/impeccable vendor/impeccable

Después:

npx impeccable link --source=vendor/impeccable --providers=claude,cursor

En este ejemplo se crean enlaces para Claude Code y Cursor.

Para recuperar el submódulo en otro equipo:

git submodule update --init --recursive

Y para actualizar la versión compartida:

git submodule update --remote vendor/impeccable

Después hay que volver a ejecutar el comando link y revisar los cambios antes de incorporarlos al repositorio.

Este método resulta interesante para organizaciones que necesitan que todos los desarrolladores trabajan con la misma versión de las instrucciones de diseño.

Ventajas y desventajas de Impeccable

Impeccable aporta valor cuando el problema no es generar código, sino conseguir que ese código produzca una interfaz coherente y bien diseñada.

Aun así, sus capacidades tienen distintos grados de automatización y existen limitaciones que conviene conocer antes de incorporarlo a un flujo de trabajo profesional.

Ventajas

1. Reduce los diseños frontend genéricos

Su principal aportación es proporcionar instrucciones para evitar patrones visuales repetitivos.

No obliga al agente a utilizar una estética determinada. Permite definir una dirección visual de acuerdo con el producto y las decisiones de marca.

2. Introduce un vocabulario de diseño

En lugar de describir vagamente que una página debe ser más bonita, puedes utilizar instrucciones concretas:

• bolder para aumentar su expresividad.
• quieter para reducir el ruido visual.
• distill para simplificar.
• typeset para mejorar la tipografía.
• polish para refinar el conjunto.

Esto facilita la comunicación con el agente y permite repetir procedimientos en distintas páginas.

3. Mantiene el contexto del producto

PRODUCT.md y DESIGN.md ayudan a conservar decisiones entre sesiones.

Es especialmente útil cuando un proyecto tiene varias páginas o distintos desarrolladores trabajan con agentes diferentes.

4. Permite revisar antes de publicar

critique y audit tienen objetivos distintos y complementarios: uno se centra en la experiencia de diseño y el otro en la calidad de implementación.

5. Incorpora detección determinista sin coste de IA

El detector identifica problemas mediante reglas que se ejecutan como código, sin consumir tokens y de forma reproducible. Puede utilizarse desde la terminal, mediante hooks o en integración continua, con códigos de salida y anotaciones en pull requests.

6. No exige utilizar un único proveedor de IA

Su compatibilidad con distintos agentes evita que el flujo de trabajo quede completamente ligado a una sola herramienta.

Desventajas y limitaciones

1. Depende del agente de programación

Impeccable no realiza por sí solo toda la implementación. La calidad del resultado depende del modelo, del contexto y de las capacidades del agente.

Si el modelo interpreta mal una instrucción, también puede producir un diseño incorrecto.

2. No sustituye a un diseñador UI/UX

Puede ayudar a organizar información, mejorar la jerarquía y detectar problemas, pero no conoce automáticamente todas las necesidades reales de los usuarios.

Las decisiones importantes siguen necesitando revisión profesional.

3. Necesita contexto de calidad

Si PRODUCT.md contiene información vaga o equivocada, el agente puede tomar decisiones visuales poco apropiadas.

Lo mismo ocurre cuando DESIGN.md describe una identidad que ya no corresponde al proyecto.

4. Las reglas reflejan el criterio de diseño de su autor

Esta es una de las críticas más importantes al proyecto. Normas como evitar el easing con rebote o reducir el uso de Inter codifican las preferencias estéticas de Paul Bakaus.

Adoptar Impeccable significa utilizar ese criterio como punto de partida. Un equipo con un sistema de diseño propio debería revisar los antipatrones antes de incorporarlos y, en producción, considerar fijar una versión concreta mediante un commit o un fork para evitar cambios inesperados.

5. Evitar un cliché puede llevar a otro

Cuando la herramienta empezó a extenderse, algunas primeras salidas recibieron críticas en Hacker News por repetir un patrón diferente: fondos crema y titulares serif en cursiva de gran tamaño.

En otras palabras, se había sustituido un cliché por otro.

Bakaus respondió ampliando el detector para señalar también esos patrones. La propia skill frontend-design de Anthropic recoge otros clichés recientes entre sus antipatrones, como los fondos crema con acentos terracota o las combinaciones de casi negro y verde ácido.

La lección es aplicable a cualquier sistema de reglas: una lista de prohibiciones puede descartar soluciones demasiado repetidas, pero no elige por sí sola una dirección visual. Sin un brief propio, el agente puede terminar recurriendo al siguiente patrón menos marcado.

6. No existe una evaluación independiente controlada

Hasta la fecha de esta guía, las afirmaciones sobre mejoras se apoyan en comparaciones visuales antes/después publicadas por el propio proyecto y en experiencias individuales documentadas.

No hay un benchmark de terceros que permita medir de forma controlada cuánto mejora Impeccable la calidad de una interfaz.

Es una herramienta de criterio y proceso, no una promesa de resultados medibles.

7. Su utilidad depende de cómo se integre en el flujo de trabajo

El beneficio aparece cuando el desarrollador invoca comandos o cuando los hooks están activos.

Las tareas autónomas del agente, como trabajos en segundo plano o ejecuciones en CI, no se benefician automáticamente si el flujo de trabajo no llama a los comandos de diseño o no tiene habilitados los mecanismos correspondientes.

8. Consume contexto del agente

Las instrucciones y reglas se incorporan a la ventana de contexto del modelo. En proyectos pequeños puede convenir integrar solo lo necesario, ya que cargar todas las instrucciones reduce el espacio disponible para el resto del trabajo de código.

9. Las integraciones no son idénticas

Los agentes no implementan los mismos mecanismos de skills, comandos y hooks.

Una función disponible en Claude Code puede tener un procedimiento distinto en Codex o Cursor.

10. Tiene una curva de aprendizaje

Aunque puedes utilizar lenguaje natural, entender cuándo emplear critique, audit, shape, document o polish mejora considerablemente los resultados.

Valoración general

Criterio	Valoración editorial
Facilidad de instalación	Alta
Utilidad para frontend	Alta
Personalización	Alta
Coherencia visual	Alta, si existe buen contexto
Detección automática	Útil para problemas concretos
Sustitución de diseñador	No
Automatización completa	Parcial
Utilidad en proyectos existentes	Alta
Utilidad para backend puro	Limitada

Impeccable frente a otras herramientas de diseño con IA

Impeccable no compite directamente con todas las herramientas utilizadas para crear interfaces. Algunas proporcionan instrucciones a un agente, otras generan código y otras ofrecen componentes listos para incorporar a un proyecto.

Conviene distinguir qué problema resuelve cada una.

Impeccable frente a Anthropic frontend-design

La skill frontend-design de Anthropic fue una referencia importante en el desarrollo de este tipo de herramientas, e Impeccable nació de ese enfoque.

Impeccable lo amplía con:

• Un conjunto mayor de comandos especializados.
• Contexto persistente del producto.
• Registro del sistema visual.
• Revisión de diseño y calidad técnica.
• Detector determinista de antipatrones.
• Iteración visual mediante el navegador.

Hay un detalle importante: en la distribución actual de Impeccable, frontend-design aparece como una denominación antigua que remite a impeccable.

No conviene instalar ambas esperando que sean dos herramientas independientes y complementarias.

Impeccable frente a shadcn/ui

shadcn/ui proporciona componentes reutilizables que los desarrolladores pueden incorporar y personalizar.

Impeccable, en cambio, aporta instrucciones y herramientas para que un agente tome mejores decisiones de diseño.

Pueden utilizarse juntos:

• shadcn/ui proporciona los componentes.
• Impeccable ayuda a decidir cómo organizar, adaptar y presentar esos componentes.

Para un proyecto React, esta combinación puede ser una base razonable: componentes reutilizables por un lado y criterios de diseño y revisión por otro.

Impeccable frente a unslop

En la categoría de skills destinadas a combatir el diseño genérico generado por IA ha aparecido un competidor directo: unslop, de la diseñadora Damir Sokolovsky.

Publicado a finales de octubre de 2026, acumuló casi dos mil estrellas en GitHub en pocos días.

Su enfoque es más específico: toma una pantalla ya construida con aspecto de IA, la revisa mediante una lista de señales de slop y la reconstruye en nueve pasadas ordenadas:

1. Espaciado.
2. Color.
3. Iconos.
4. Textos.
5. Tipografía.
6. Layout.
7. Detalles.
8. Elementos visuales.
9. Movimiento.

El orden tiene una lógica concreta. El espaciado se revisa primero porque cambia la percepción del ritmo visual. Los textos se trabajan antes que la tipografía porque la longitud de un titular condiciona su tamaño y su posición.

Impeccable tiene un alcance más amplio: incluye comandos para distintas fases del desarrollo, contexto persistente y un detector determinista. unslop está más especializado en reparar interfaces que ya se han generado con un aspecto demasiado genérico.

No son herramientas necesariamente excluyentes.

Otras herramientas del ecosistema

Si el problema va más allá del diseño visual, estas herramientas también pueden complementar el trabajo:

• Figma MCP: permite al agente consultar tokens y especificaciones reales de diseño en lugar de inventarlos.
• shadcn/ui MCP: facilita el acceso a componentes consistentes.
• Playwright MCP: permite que el agente consulte capturas de lo que ha construido y revise el resultado en el navegador.
• Refero: ofrece referencias de interfaces de productos reales para evitar diseñar sin ejemplos.
• Claude Design (claude.ai/design): ofrece funciones de exploración visual dentro del entorno de Anthropic, para quienes prefieren un flujo alojado sin instalar herramientas en el repositorio.

Impeccable ocupa un lugar concreto dentro de este ecosistema: aporta criterios de diseño y mecanismos de verificación al agente que ya utilizas.

Tabla comparativa

Criterio	Impeccable	Anthropic frontend-design	unslop	shadcn/ui
Enfoque principal	Criterios y herramientas de diseño para agentes	Instrucciones de diseño frontend	Reparación de UI con slop	Componentes reutilizables
Integración con agentes	Amplia, con más de una docena de entornos	Orientada a agentes compatibles	Claude Code	Mediante código
Personalización	Alta	Depende del agente	Media	Alta
Revisión de diseño	critique	Depende de las instrucciones	Auditoría inicial	No es su función principal
Detección automática	Sí, determinista	No como función central	Auditoría por pasada	No
CLI	Sí	No equivalente	No	CLI propia
Coste de la herramienta	Gratuito	Skill gratuita cuando se distribuye públicamente	Gratuito, CC BY 4.0	Gratuito
Caso ideal	Mejorar interfaces con IA	Guiar la generación frontend	Reparar una pantalla ya construida	Construir interfaces con componentes

La elección no tiene por qué ser excluyente. Para un proyecto React, por ejemplo, puedes utilizar shadcn/ui como base de componentes e Impeccable como capa de diseño y revisión.

Problemas frecuentes al instalar y utilizar Impeccable

Algunos problemas de instalación se producen porque la skill se ha instalado correctamente, pero el agente todavía no la ha recargado o está buscando en una ubicación diferente.

Impeccable no aparece en el agente

Comprueba estos puntos:

1. Instalaste Impeccable para el agente correcto.
2. Elegiste el ámbito de instalación adecuado.
3. El proyecto abierto es el mismo donde realizaste la instalación.
4. Recargaste el editor o abriste una nueva sesión.

Puedes repetir la instalación:

npx impeccable install

No utilices --force automáticamente. Esta opción está pensada para reemplazar una instalación existente.

El comando /impeccable no funciona

Comprueba si la skill aparece en el sistema de descubrimiento del agente.

En Codex:

/skills

En Gemini CLI:

/skills list

En Claude Code, revisa el gestor de plugins y las skills instaladas.

Si el problema continúa, consulta las instrucciones específicas de instalación de tu herramienta.

Codex no reconoce $impeccable

Verifica que la instalación se haya realizado para Codex y que exista la carpeta correspondiente.

Una instalación local puede tener esta estructura:

your-project/
├── .agents/
│   └── skills/
│       └── impeccable/
│           └── SKILL.md
├── package.json
└── src/

Recuerda que Codex utiliza $impeccable, no necesariamente /impeccable.

También conviene comprobar la configuración de skills y la sesión actual.

La instalación se ha realizado en la carpeta equivocada

Si quieres una instalación local, el instalador debe ejecutarse desde la raíz del proyecto.

Comprueba la ubicación actual:

pwd

En Windows puedes utilizar:

Get-Location

Si Impeccable se instaló en otro proyecto, repite el proceso desde la carpeta correcta.

El agente no encuentra PRODUCT.md

Comprueba que el archivo esté en la ubicación esperada y que no se haya creado dentro de una carpeta adicional.

La estructura habitual es:

your-project/
├── PRODUCT.md
├── DESIGN.md
├── package.json
└── src/

Si no existe, ejecuta:

/impeccable init

El diseño no mejora después de utilizar Impeccable

Puede haber varias causas:

• La petición es demasiado genérica.
• El producto no está bien definido.
• No se ha establecido una dirección visual.
• El agente no entiende qué debe conservar.
• Se están modificando demasiadas partes a la vez.

En lugar de pedir:

/impeccable make it better

Prueba con una instrucción más concreta:

/impeccable polish the pricing section.

Improve plan comparison and visual hierarchy.
Keep the current brand identity.
Make the recommended plan easier to identify.

Una modificación concreta es mucho más fácil de evaluar y corregir.

El detector muestra demasiadas advertencias

No todas las advertencias justifican modificar el código. Una fuente poco habitual, por ejemplo, puede ser una decisión deliberada de marca.

Puedes registrar una excepción:

npx impeccable ignores add-value overused-font Inter --reason "Brand font"

También puedes revisar la configuración del detector y los archivos de excepciones.

No es recomendable desactivar todas las reglas únicamente para conseguir un informe sin advertencias.

Problemas de permisos o hooks

Algunas herramientas necesitan autorización para ejecutar hooks.

En Codex, revisa:

/hooks

También puedes utilizar:

/impeccable doctor

Este comando ayuda a comprobar problemas de configuración, rutas de scripts y diferencias entre el estado de instalación y los hooks habilitados.

Si necesitas desactivar todos los hooks de una sesión, puedes pasar esta configuración al agente:

--settings '{"disableAllHooks": true}'

Cómo actualizar Impeccable

Si utilizaste el instalador oficial, puedes comprobar el estado de la instalación mediante:

npx impeccable check

Para actualizar:

npx impeccable update

También puedes especificar el ámbito:

npx impeccable update --project

O:

npx impeccable update --user

Si instalaste Impeccable mediante el plugin de Claude Code, actualízalo desde su gestor de plugins.

Si utilizaste skills.sh:

npx skills update impeccable

Después de actualizar, recarga el agente.

La actualización de Impeccable no debería reemplazar los archivos de contexto propios del proyecto, como PRODUCT.md y DESIGN.md.

Si no hay conexión a la red, las skills instaladas permanecen tal como están.

Seguridad, privacidad y actualizaciones

Aunque Impeccable es un proyecto de código abierto, conviene revisar qué permisos utiliza y qué cambios introduce en el entorno de desarrollo.

La licencia Apache 2.0 permite utilizar, modificar y distribuir el software bajo sus condiciones. Esto no significa que cualquier integración o servicio externo utilizado junto con Impeccable tenga automáticamente las mismas condiciones.

¿Qué modifica durante la instalación?

Dependiendo del agente y del ámbito de instalación, puede crear o modificar:

• Directorios de skills.
• Archivos de configuración del agente.
• Configuración de hooks.
• Archivos de contexto del proyecto.
• Configuración auxiliar bajo .impeccable/.

En Claude Code, por ejemplo, los hooks pueden instalarse en la configuración del usuario, en lugar de escribir rutas personales dentro de la configuración compartida del repositorio.

En Codex, la configuración de hooks debe revisarse y autorizarse expresamente.

Un punto de seguridad que conviene conocer

Los hooks pueden ejecutarse automáticamente después de determinadas operaciones del agente.

El README documenta una particularidad de Claude Code: los hooks instalados se ejecutan con independencia de la aprobación del modelo. Esto significa que la primera edición o el evento de parada puede descargar y guardar en caché el motor del detector aunque la sesión haya denegado el comando del lanzador.

No tiene por qué representar un problema: el motor es un binario de versión fija que se guarda en ~/.impeccable/bin/. Sin embargo, es un comportamiento que los equipos deberían conocer antes de habilitar hooks en entornos restringidos.

Antes de aceptar una instalación, comprueba qué scripts se ejecutan y qué archivos inspeccionan.

Live Mode también merece atención: interactúa con la aplicación local y modifica el código fuente cuando aceptas una variante. No debe utilizarse directamente sobre un sitio en producción. Para páginas publicadas existen el detector sobre URL y la extensión de navegador.

Revisa los cambios antes de incorporarlos a Git

Después de instalar o actualizar, utiliza:

git status

Y:

git diff

Así puedes identificar los archivos que se han creado o modificado antes de incorporarlos al repositorio.

Telemetría y privacidad

Las notas de versión de Impeccable 4.6.0 documentan un mecanismo de telemetría relacionado con determinadas elecciones realizadas durante el uso de la herramienta. Registra qué direcciones visuales se mostraron y cuál se eligió, con el objetivo de mejorar el catálogo de la herramienta.

Según la documentación del proyecto, esta telemetría no envía el nombre del proyecto, los archivos, el código ni PRODUCT.md.

Puedes desactivarla mediante:

impeccable telemetry off

También existen estas alternativas:

• Utilizar la variable de entorno DO_NOT_TRACK=1.
• Configurar "telemetry": false en .impeccable/config.json para todo el proyecto.

No hay que confundir esta telemetría con los datos que el proveedor de IA puede recibir al procesar tus solicitudes. La privacidad de las conversaciones y los archivos también depende de Claude, OpenAI, Google u otro proveedor que utilices.

En proyectos empresariales, conviene revisar las políticas de tratamiento de datos de ambas partes antes de introducir información confidencial.

¿Cómo desinstalar Impeccable?

El procedimiento depende del método de instalación:

• Si utilizaste un plugin, desinstálalo desde el gestor de plugins.
• Si utilizaste skills.sh, elimina la skill desde su ubicación de instalación.
• Si utilizaste el instalador oficial, identifica los archivos de skill y configuración que pertenecen a Impeccable antes de eliminarlos.
• Si utilizaste un Git submodule, retira el submódulo y sus referencias siguiendo el procedimiento habitual de Git.

No elimines indiscriminadamente .impeccable/, PRODUCT.md o DESIGN.md. Pueden contener información propia del proyecto que quieras conservar.

Preguntas frecuentes sobre Impeccable

¿Qué es Impeccable y para qué sirve?

Impeccable es una herramienta de código abierto que proporciona comandos y conocimientos de diseño a los agentes de programación con IA. Sirve para crear, revisar y mejorar interfaces frontend, especialmente en aspectos como tipografía, colores, composición, accesibilidad y experiencia de usuario.

¿Cómo se instala Impeccable?

Abre la terminal en la carpeta del proyecto y ejecuta:

npx impeccable install

Selecciona tu agente de programación, elige una instalación local o global y recarga la herramienta. Después ejecuta /impeccable init o $impeccable init en Codex para registrar el contexto del producto.

¿Impeccable es gratuito? ¿Qué cuesta realmente?

Sí. Impeccable utiliza la licencia Apache 2.0 y sus skills, CLI y motor de detección son gratuitos.

El detector no consume tokens porque no llama a ningún modelo de IA. Sin embargo, el uso de Claude Code, Codex, Cursor u otros agentes puede tener costes independientes, tanto por suscripción como por consumo de API. Las instrucciones también ocupan espacio en la ventana de contexto del modelo.

¿Necesito Claude Code para utilizar Impeccable?

No. Impeccable es compatible con Claude Code, Cursor, Codex, Gemini CLI, OpenCode, GitHub Copilot, Devin, Replit Agent y otros agentes.

Puedes seleccionar la herramienta que utilizas durante la instalación.

¿Por qué tantas páginas hechas con IA se parecen entre sí?

Los modelos de programación han aprendido de muchos ejemplos que comparten patrones visuales: plantillas SaaS, fuentes como Inter, degradados morados y tarjetas redondeadas.

Cuando no reciben instrucciones concretas, tienden a generar soluciones frecuentes dentro de sus datos de entrenamiento. El resultado puede ser una interfaz funcional, pero demasiado parecida a otras páginas.

Impeccable intenta reducir ese problema mediante contexto del producto, antipatrones explícitos y un detector basado en reglas.

¿Qué hace exactamente el detector y cuántas reglas tiene?

El detector analiza código fuente o páginas renderizadas mediante reglas deterministas ejecutadas por un motor en Rust. No necesita un LLM ni una clave de API.

El README de la versión 4.8.0 indica 62 reglas, repartidas entre patrones de diseño genérico —como degradados previsibles y tarjetas anidadas— y problemas generales de calidad, como líneas demasiado largas, objetivos táctiles pequeños y saltos de nivel en los encabezados.

El número puede cambiar entre versiones. Para consultar el catálogo disponible en tu instalación, utiliza:

npx impeccable detect --list-rules

¿Se puede utilizar Impeccable en un equipo o en integración continua?

Sí. El detector puede ejecutarse por separado del modelo, ofrece códigos de salida, salida JSON y anotaciones directas en pull requests de GitHub.

Para equipos también existe la instalación mediante Git submodule, que permite mantener una versión compartida para todos los desarrolladores.

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

Impeccable partió de esa skill y amplió su enfoque con más comandos, contexto persistente del producto, registro del sistema visual, detector determinista y modo Live en el navegador.

En la distribución actual, frontend-design aparece como un nombre antiguo que remite a Impeccable. Por tanto, no tiene sentido instalar ambas esperando que funcionen como herramientas independientes.

¿Puede mejorar una página web que ya existe?

Sí. Es uno de sus usos más interesantes.

Puedes solicitar una revisión con critique, realizar mejoras con polish y comprobar problemas técnicos mediante audit y el detector.

Para interfaces ya construidas que tienen demasiado aspecto de contenido generado por IA, también existen herramientas especializadas en reparación, como unslop.

¿Impeccable genera código o solo analiza el diseño?

Hace ambas cosas a través del agente.

Sus comandos de diseño pueden guiar al agente para modificar componentes, estilos y comportamientos. Los comandos de evaluación, como critique y audit, generan informes sin modificar por sí mismos el código.

¿Es seguro? ¿Qué hace con mis datos?

El proyecto es de código abierto y documenta qué información envía su telemetría: las direcciones visuales mostradas y seleccionadas. Según esa documentación, no envía nombres de proyectos, archivos, código ni PRODUCT.md.

Hay dos puntos que conviene revisar: los hooks de Claude Code pueden ejecutarse aunque el modelo deniegue el comando del lanzador, y Live Mode modifica el código fuente cuando se acepta una variante. Por eso no debe utilizarse directamente sobre sitios en producción.

En entornos profesionales, conviene revisar qué se instala, fijar una versión y comprobar los cambios con Git antes de incorporarlos al repositorio.

¿Merece la pena utilizar Impeccable en proyectos profesionales?

Sí, especialmente en productos SaaS, dashboards, tiendas online y aplicaciones web donde la coherencia visual es importante.

Permite estandarizar instrucciones de diseño y automatizar determinadas comprobaciones. Sin embargo, sus reglas reflejan el criterio estético de su autor, todavía no existen evaluaciones independientes controladas y la herramienta no sustituye las pruebas de accesibilidad, la investigación con usuarios ni la revisión de un diseñador.

Conclusión: ¿para quién merece la pena Impeccable?

Impeccable aborda un problema concreto del desarrollo asistido por inteligencia artificial: generar una interfaz funcional es relativamente sencillo, pero conseguir que tenga una identidad visual coherente y una experiencia de usuario bien pensada requiere bastante más trabajo.

Su principal aportación no es generar más código, sino mejorar la forma en que el agente toma decisiones de diseño.

PRODUCT.md y DESIGN.md aportan contexto; los comandos permiten trabajar sobre aspectos específicos de la interfaz; y el detector añade una capa de comprobaciones deterministas que puede utilizarse incluso sin iniciar una conversación con un modelo, tanto desde la terminal como en integración continua.

También es importante conocer sus límites. Una ejecución limpia del detector es evidencia, no prueba de calidad. Las reglas no eligen una dirección visual, sino que descartan determinados patrones. El resultado final sigue dependiendo de las capacidades del agente y del contexto que recibe.

A esto se suman las críticas que merece la pena tener presentes: el vocabulario de comandos no sustituye el criterio de diseño, las reglas reflejan las preferencias de su autor y todavía no existe una evaluación controlada de terceros que demuestre una mejora cuantificable.

Mi recomendación es incorporarlo a los proyectos frontend que desarrolles habitualmente con Claude Code, Cursor o Codex, sobre todo si trabajas con varias páginas y necesitas mantener una identidad visual común.

Si prefieres comprobar su utilidad antes de integrar todas sus funciones, empieza por el detector. Es la pieza con menos dependencias de un modelo de IA y permite comprobar qué problemas identifica en tu proyecto.

Para empezar no necesitas aprender todos los comandos. Basta con seguir este orden:

1. Instalar Impeccable con npx impeccable install.
2. Ejecutar /impeccable init.
3. Revisar PRODUCT.md.
4. Registrar el sistema visual con /impeccable document cuando corresponda.
5. Mejorar una página concreta mediante polish, typeset o layout.
6. Revisar el resultado con critique y audit.
7. Ejecutar el detector antes de publicar.

No esperes que Impeccable convierta automáticamente cualquier aplicación en un producto con diseño profesional. El resultado seguirá dependiendo de la calidad del agente, las decisiones del proyecto y la revisión humana.

Pero como complemento para desarrollar interfaces web con inteligencia artificial, es una herramienta práctica y suficientemente flexible como para formar parte de un flujo de trabajo frontend profesional.