Cómo lograr diseños únicos con IA con las skills de Impeccable

Le pedí a Claude Code que me creara una landing page para Web Reactiva. Me dio una. Funcionaba. Compilaba. Tenía sus secciones, sus botones, su hero enorme.

Y era horrenda.

Gradientes morado-azul sacados de una plantilla de 2019, texto con efecto degradado, cards sobre cards, la fuente Inter por defecto y esa estética que ya reconoces a kilómetros: “esto lo ha hecho una IA”. Ojo, que eso es una cosa y otra muy distinta es la marca de agua que Claude teje dentro del texto que genera: una se arregla con criterio de diseño, la otra no la quita ningún script.

Pero con un solo plugin y unos cuantos comandos, la cosa cambió bastante. Te cuento cómo.

🔄 Actualización (julio de 2026): Impeccable ha cambiado mucho desde que publiqué este artículo. Ya no son 17 comandos sueltos: ahora son 23 comandos bajo un único namespace /impeccable, hay un instalador (npx impeccable install), un detector determinista de 60 reglas que funciona sin IA ni API key, un modo live para iterar variantes en el navegador y una versión 4 del skill que reparte direcciones de diseño con dados para que dos proyectos no salgan iguales. He reescrito la instalación, el mapa de comandos y he añadido las partes nuevas. El caso real de las tres landings sigue tal cual, con la equivalencia de comandos antiguos y nuevos, y he añadido una cuarta versión hecha con la versión 4: el dado eligió la dirección que yo había puesto la última de siete, y el detector encontró 13 anti-patrones en mi propio trabajo.

En este artículo vas a ver:

1. Qué son las skills de Impeccable y qué problemas resuelven
2. Cómo se instala hoy: npx impeccable install, plugin, submódulo o copia manual
3. Los 23 comandos organizados por categorías (y qué pasó con los 17 antiguos)
4. El detector: 60 reglas deterministas que cazan AI slop sin gastar un token
5. El modo live y el direction-by-dice de la versión 4
6. Mi caso real: de una landing genérica a un diseño con personalidad en tres prompts
7. El experimento brutalista: cómo dar la vuelta al diseño por completo
8. El cuarto diseño: qué sale cuando dejo que el dado elija la dirección
9. Los 13 anti-patrones que el detector encontró en mi propio trabajo
10. Cuánto cuesta todo esto en tokens
11. Combinaciones de comandos que funcionan y errores que puedes evitar
12. Lo que Impeccable no hace (y está bien así)

Qué es Impeccable y por qué debería importarte ¶

No es culpa de Claude Code, ni de Cursor, ni de Gemini CLI. Es culpa de que las herramientas de IA para programar saben mucho de código pero muy poco de diseño. Y lo peor: nosotros tampoco sabemos pedirles algo mejor porque nos falta el vocabulario.

¿Cómo le pides a un agente de IA que mejore el “ritmo vertical” si nunca has usado esas palabras? ¿Cómo le dices que los bordes redondeados con sombra translúcida ya huelen a código generado?

Ahí es donde entra Impeccable.

Impeccable es un conjunto de skills de diseño creado por Paul Bakaus que se instala en tu herramienta de IA para programar favorita. No es un framework CSS. No es una librería de componentes. Es algo más sutil y, para mi gusto, más potente: es vocabulario de diseño empaquetado en comandos.

La idea de fondo es brillante. Los agentes de IA ya saben crear interfaces. El problema es que crean interfaces mediocres porque nadie les ha enseñado a distinguir lo bueno de lo genérico. Impeccable les da ese criterio a través de un skill principal con conocimiento profundo sobre tipografía, color, layout, movimiento y anti-patrones, junto con 23 comandos que cubren desde el diagnóstico hasta el pulido final.

Piénsalo así: si Claude Code es un carpintero muy rápido, Impeccable es el ojo del arquitecto que le dice “esa puerta está descentrada y ese marco es demasiado grueso”.

La propuesta ha calado. El repositorio pasa de las 50.000 estrellas en GitHub, se publica con licencia Apache 2.0 y el propio autor reconoce que el punto de partida fue la skill frontend-design de Anthropic. Si te interesa ese origen, lo desmenucé en cómo crear diseño con la skill frontend-design.

🎯 Impeccable no genera diseño por ti. Le da a tu agente de IA el lenguaje y los criterios para que el diseño que genera deje de parecer una plantilla gratuita de Bootstrap.

Cómo se instala Impeccable ¶

Aquí está el cambio más visible respecto a la primera versión del proyecto. Antes tocaba descargar archivos y colocarlos a mano en la carpeta de cada herramienta. Ahora hay un instalador que detecta qué agentes tienes en el proyecto y lo resuelve por ti.

La forma corta (y la recomendada) ¶

Desde la raíz de tu proyecto:

# Detecta tus harnesses, instala el skill, los comandos y el hook
npx impeccable install

# Para actualizar cuando salga una versión nueva
npx impeccable update

El instalador te enseña las carpetas de agentes que ha encontrado, te deja elegir cuáles quieres, y después pregunta si prefieres una instalación local del proyecto o global para todo tu equipo de trabajo.

Una vez instalado, el primer comando que debes ejecutar dentro de tu agente es /impeccable init. Ya llegamos a él.

Como plugin de Claude Code ¶

Si eres de Claude Code y prefieres el marketplace de plugins, sigue funcionando:

# Instalar desde el marketplace de plugins
/plugin marketplace add pbakaus/impeccable

# Abrir el menú de plugins para completar la instalación
/plugin menu

Grok Build tiene su propio equivalente con grok plugin install pbakaus/impeccable#plugin --trust. Si todavía no conoces el sistema de plugins, en los 15 plugins más populares de Claude Code encontrarás cómo funciona el marketplace.

Como submódulo de git ¶

Esta opción tiene sentido en equipos donde quieres fijar la versión exacta de Impeccable que usa todo el mundo y que quede registrada en el repositorio:

git submodule add https://github.com/pbakaus/impeccable .impeccable
npx impeccable link --source=.impeccable --providers=claude,cursor

También puedes descargar el ZIP de tu herramienta desde impeccable.style o copiar a mano los archivos del directorio dist/ correspondiente. Es la vía lenta, pero está ahí si tu entorno no te deja ejecutar npx.

En qué herramientas funciona ¶

Cuando escribí este artículo por primera vez, Impeccable soportaba cuatro herramientas. Hoy son trece:

Si trabajas con OpenCode o con cualquiera de los agentes de la última fila, tendrás los 23 comandos igual: lo que te pierdes es el hook automático, no el vocabulario.

El primer paso después de instalar ¶

Antes de lanzarte a usar los comandos, ejecuta /impeccable init. Es el sustituto del antiguo /teach-impeccable y hace bastante más que él.

init recopila el contexto de diseño de tu proyecto y lo escribe en dos archivos: un PRODUCT.md obligatorio y un DESIGN.md opcional. Ahí quedan la audiencia, el posicionamiento de marca, la voz, las anti-referencias (a qué NO quieres parecerte), colores, tipografía y componentes.

El matiz que más me gusta es que distingue entre superficies de marca (una landing, un portfolio, una web de producto) y superficies de producto (el panel, la app, la herramienta interna). No es lo mismo: en una landing puedes permitirte una tipografía enorme y un bloque rojo sangrante; en un dashboard que alguien va a mirar ocho horas al día, eso es una tortura.

Si tu proyecto ya está construido y no quieres responder a un cuestionario, tienes /impeccable document, que genera el DESIGN.md leyendo el código que ya tienes.

🔧 Ejecuta /impeccable init una sola vez por proyecto, pero hazlo bien. Todos los demás comandos leen esos archivos. Un init vago produce sugerencias genéricas; un init con anti-referencias concretas cambia el resultado por completo.

Los 23 comandos: un mapa para no perderte ¶

Aquí es donde Impeccable se pone interesante de verdad. No son 23 comandos sueltos lanzados al azar. Están organizados en categorías que siguen un flujo lógico de trabajo, desde el diagnóstico hasta el refinamiento.

Lo primero: todo pasa ahora por un único comando. La sintaxis es /impeccable <comando> <objetivo>, y el objetivo es texto libre.

/impeccable audit the header
/impeccable polish the checkout form
/impeccable critique la página de precios

Esto resuelve de raíz el problema que tenía la versión antigua con los prefijos /i- para evitar colisiones con otros comandos que tuvieras instalados. Ahora solo ocupa un nombre. Y si algún comando lo usas a diario y te cansa escribirlo entero, /impeccable pin audit te crea un atajo /audit independiente.

Contexto y sistema ¶

• /impeccable init — Configuración inicial. Recoge el contexto de diseño y escribe PRODUCT.md y DESIGN.md.
• /impeccable document — Genera el DESIGN.md a partir del código que ya existe en el proyecto.
• /impeccable extract — Extrae componentes reutilizables y tokens de diseño hacia tu sistema.

Planificación y construcción ¶

• /impeccable shape — Planifica la UX/UI antes de escribir una línea de código.
• /impeccable craft — El flujo completo de dar forma y construir con iteración visual. Ojo con este, que tiene truco y te lo cuento más abajo.

Diagnóstico ¶

• /impeccable audit — Auditoría técnica completa: accesibilidad, rendimiento, temas, diseño responsive. Te genera un informe con niveles de severidad.
• /impeccable critique — Evaluación de diseño desde la perspectiva UX: jerarquía visual, arquitectura de la información, resonancia emocional. Menos técnico, más “ojo de diseñador”.

Intensidad ¶

• /impeccable bolder — Amplifica diseños tímidos o aburridos. Más impacto visual sin sacrificar usabilidad.
• /impeccable quieter — Lo contrario: baja la intensidad de diseños demasiado agresivos.
• /impeccable overdrive — La marcha larga. Efectos técnicamente extraordinarios para cuando quieres que la página se recuerde.
• /impeccable distill — Desnuda el diseño hasta su esencia. Es el antiguo simplify.

Los oficios del diseño ¶

Esta categoría es nueva y para mí es la mejor noticia de la actualización. Antes, si tu problema era la tipografía, tenías que colar la petición dentro de un /bolder y cruzar los dedos. Ahora hay comandos con nombre y apellidos:

• /impeccable typeset — Elección de fuentes, jerarquía y tamaños.
• /impeccable layout — Disposición, espaciado y ritmo visual.
• /impeccable colorize — Inyecta color estratégico en interfaces demasiado monocromáticas.
• /impeccable animate — Añade movimiento con propósito.

Calidad y robustez ¶

• /impeccable polish — El último repaso antes de publicar. Alineación con el sistema de diseño y listo para producción.
• /impeccable harden — Hace la interfaz resistente: manejo de errores, internacionalización, overflow de texto, casos límite.
• /impeccable optimize — Mejoras de rendimiento: carga, renderizado, animaciones, imágenes, tamaño del bundle.
• /impeccable adapt — Adapta el diseño a distintos tamaños de pantalla, dispositivos y contextos.
• /impeccable clarify — Mejora el copy de la interfaz: mensajes de error, etiquetas, instrucciones.

Experiencia ¶

• /impeccable onboard — Diseña o mejora flujos de primera vez, estados vacíos y rutas de activación.
• /impeccable delight — Momentos de alegría y personalidad que hacen la interfaz memorable.
• /impeccable live — El modo de variantes visuales en el navegador. Tiene sección propia más abajo.

Lo más inteligente del sistema sigue intacto: los comandos se conectan entre sí. Después de un audit, Impeccable te sugiere pasar a harden, optimize, adapt o clarify según los problemas detectados. Después de un critique, las rutas naturales son polish, distill, bolder o quieter. No es un menú plano, es un grafo de decisiones.

Qué ha pasado con los 17 comandos antiguos ¶

Si vienes de la versión que describí en febrero, esta tabla te ahorra el desconcierto:

Los siete nuevos son shape, craft, document, typeset, layout, overdrive y live. La sensación al usarlos es que el proyecto ha dejado de ser una caja de herramientas para convertirse en un taller con las herramientas colgadas en la pared y cada una en su sitio.

🔧 No necesitas memorizar los 23 comandos. Empieza siempre por /impeccable critique o /impeccable audit y deja que el propio resultado te guíe hacia el siguiente paso.

El detector: 60 reglas que no gastan ni un token ¶

Esta es la parte que no existía en febrero y la que más cambia la economía del asunto.

Impeccable trae ahora un detector determinista con 60 reglas que se ejecuta sin modelo, sin API key y sin conexión con ningún proveedor. Son reglas de código puro que buscan patrones concretos en tus archivos. No hay inferencia, no hay coste por token, no hay latencia de red.

# Escanear un directorio entero
npx impeccable detect src/

# Un archivo HTML suelto
npx impeccable detect index.html

# Una URL en producción (levanta un navegador headless)
npx impeccable detect https://webreactiva.com

# Salida JSON para meterlo en tu CI
npx impeccable detect --json .

# Ver y gestionar las excepciones
npx impeccable ignores list

¿Qué caza exactamente? Una mezcla de anti-patrones de IA y problemas de calidad de diseño de toda la vida:

• Fuentes sobreutilizadas: Arial, Inter, las por defecto del sistema
• Gradientes morados, el tic más reconocible del diseño generado
• Grises puros sin matiz de color y negros absolutos
• Texto gris sobre fondos de color
• Anidamiento excesivo de cards, cards dentro de cards dentro de cards
• Easing con rebote o elástico donde no pinta nada
• Longitud de línea excesiva, padding apretado, áreas táctiles pequeñas
• Texto funcional por debajo de 11px
• Fondos con retícula de líneas, un patrón que Codex genera sin que nadie se lo pida

Encima de las reglas deterministas hay una capa de comprobaciones que sí requieren modelo, para lo que no se puede reducir a una expresión regular. Pero el suelo es gratis.

El hook: el detector se dispara solo ¶

Al instalar, Impeccable coloca un hook nativo en los harnesses que lo soportan. Cada vez que el agente edita un archivo de interfaz, el detector se ejecuta y le devuelve los hallazgos al propio agente dentro de su flujo, sin que tú hagas nada.

Esto es más importante de lo que parece. La diferencia entre “revisar el diseño al final” y “que el agente se corrija a sí mismo mientras escribe” es la misma que hay entre un linter que ejecutas antes del commit y un linter que te subraya en rojo mientras escribes.

Cada plataforma guarda el hook en su sitio: .claude/settings.local.json en Claude Code, .cursor/hooks.json en Cursor, .github/hooks/impeccable.json en Copilot y .codex/hooks.json en Codex, que además exige que lo apruebes a mano con /hooks tras la instalación.

💡 El detector es la razón para instalar Impeccable aunque no pienses usar ni uno de los 23 comandos. Sesenta reglas gratis contra el AI slop, ejecutables en tu CI con --json, es un trato difícil de rechazar.

Qué añadir al .gitignore ¶

El proyecto genera archivos efímeros que no quieres versionar y artefactos compartidos que sí. La documentación oficial recomienda este bloque:

# impeccable-ignore-start
.impeccable/config.local.json
.impeccable/hook.cache.json
.impeccable/*.png
.impeccable/live/server.json
.impeccable/live/sessions/
.impeccable/live/previews/
.impeccable/live/cache/
.impeccable/live/*.png
# impeccable-ignore-end

Lo que sí conviene mantener bajo control de versiones: .impeccable/config.json, .impeccable/design.json y los informes de critique/. Son las decisiones de diseño de tu equipo, no basura temporal.

El modo live: variantes en el navegador ¶

/impeccable live abre un modo de iteración visual donde trabajas sobre elementos concretos en el navegador en lugar de pedir cambios a ciegas y esperar a ver qué sale.

Es la respuesta al bucle más frustrante del diseño con IA: pides un cambio, el agente edita cinco archivos, recargas, no era eso, vuelves a pedir. Con live la iteración ocurre donde puedes ver el resultado.

Te aviso de una cosa con honestidad: es la parte peor documentada del proyecto. El README lo describe en una línea y los detalles de funcionamiento hay que sacarlos de la propia herramienta y de los archivos que deja en .impeccable/live/. Mirando esa estructura se adivina bastante: hay sesiones, previews, anotaciones, caché y un sistema de ediciones manuales pendientes que se aplican en transacción. Lo que sugiere que puedes tocar tú directamente en el navegador y que esos cambios vuelven al código.

Si esperabas un Figma dentro de la terminal, no es eso. Es un bucle de variantes con vista previa. Pero para ajustar un hero o comparar tres tratamientos tipográficos, se agradece.

Direction-by-dice: la versión 4 tira los dados ¶

Y llegamos al cambio más filosófico, el de la versión 4 del skill, publicada este mismo mes de julio de 2026.

El problema que ataca es antiguo y lo hemos sufrido todos: le pides lo mismo a un modelo y te da lo mismo. No porque sea incapaz de otra cosa, sino porque siempre gravita hacia el centro de su distribución. Es el motivo de que las landings generadas con IA se parezcan entre sí incluso cuando los proyectos no tienen nada que ver.

La solución de Impeccable 4 es tan simple que da rabia no haberla pensado: quitarle al modelo la decisión de qué dirección estética tomar. Una semilla externa determina qué dirección de las que el skill tiene documentadas se toma en serio, y reparte seis “mundos challenger” a su lado, sacados de un catálogo de 188 mundos de diseño revisados a mano.

Tú ves esa tirada en una interfaz de navegador, con la dirección líder y sus alternativas, y puedes volver a tirar los dados tantas veces como quieras. El agente, en cambio, solo puede re-tirar si justifica por qué. Y si tú fijas una dirección, esa manda por encima de todo.

Hay dos cambios más que vienen en el mismo paquete:

Detección automática del tipo de trabajo. Impeccable averigua por su cuenta si le estás pidiendo empezar de cero, añadir una sección a algo existente, rediseñar o retocar un detalle. Cada escenario recibe una libertad creativa distinta: en un lienzo en blanco puede volar; en un retoque sobre una interfaz viva, no.

Esto tiene una consecuencia práctica que conviene saber: /impeccable craft queda deprecado. La razón, en palabras del propio autor, es que describir la superficie hace ya lo mismo. Si le dices “haz la página de precios”, Impeccable deduce el tipo de trabajo sin que tengas que anunciarlo.

Mockups antes de construir. Antes de tocar código, el skill puede renderizar el diseño como tableros de sistema y mockups de superficie. Para eso necesita generación de imágenes vía GPT-image-2, lo que implica configurar OPENAI_API_KEY. El skill te avisa del coste antes de renderizar, cosa que se agradece.

Que un proyecto de diseño para agentes te pida una clave de OpenAI para las imágenes mientras corres el resto en Claude Code tiene su punto irónico, pero es opcional: si no la configuras, sigues teniendo el flujo completo sin las previsualizaciones.

🎲 El direction-by-dice es la idea más interesante que he visto este año en herramientas de diseño con IA. No mejora al modelo: le quita una decisión que hacía mal. Con lo que ha costado que aceptemos que a veces el azar decide mejor que el criterio.

Si el problema que te preocupa es el slop estructural, esa forma de página que se repite proyecto tras proyecto, la comparación obligada es con Hallmark, que lo ataca con su verbo study y una memoria de proyecto. Y si quieres fijar el carácter del diseño antes incluso de generar, la colección Taste Skill encaja como capa previa: sus diales de varianza, movimiento y densidad ponen el marco y luego Impeccable alinea los remates.

Mi caso real: tres prompts, tres diseños ¶

Ahora viene la parte jugosa. Te cuento cómo usé Impeccable para transformar la landing de Web Reactiva paso a paso. Porque una cosa es leer la documentación y otra muy distinta es ver cómo funciona con un proyecto real.

Todo el proceso fueron tres prompts. Tres. Y cada uno produjo un resultado visualmente distinto.

Un apunte antes de empezar: este experimento lo hice con la versión de los 17 comandos. Los nombres que verás son los de entonces, y en cada paso te indico el equivalente actual para que puedas reproducirlo tal cual.

Prompt 1: “Crea una landing page para Web Reactiva” ¶

Sin Impeccable. Sin skills de diseño — ni siquiera la skill frontend-design que viene con Claude Code. Solo Astro y Tailwind v4. El prompt fue así de sencillo.

El resultado técnico era correcto. Astro compilaba, Tailwind hacía su trabajo, las secciones tenían sentido. Pero el diseño gritaba “IA” por todos lados.

Fíjate en la captura. Todo centrado, el título con degradado del naranja al morado en “humanos inquietos”, un badge de “Programa con IA” con borde redondeado, botones tipo píldora, fondo oscuro con un sutil grid de fondo. El texto descriptivo en gris claro, flotando en el centro sin anclaje visual.

Los anti-patrones que detecté a simple vista:

• Gradientes morado-naranja en el texto, el truco favorito de la IA cuando no sabe qué hacer
• Todo centrado, sin jerarquía de lectura clara
• Badge decorativo que no aporta información útil
• Botones redondeados con borde dorado, estética de template premium
• Fondo oscuro genérico con grid que recuerda a miles de landings de SaaS
• Animaciones de fade-up en cada sección

Todo esto tiene nombre en el mundo del diseño generativo: AI slop. Es el equivalente visual del texto que empieza con “¡Por supuesto! Aquí tienes…”.

Lo divertido del asunto es que hoy no habría hecho falta que yo los detectara a ojo. Los seis anti-patrones de esa lista están cubiertos por las reglas del detector: el gradiente morado, el grid de fondo, la fuente por defecto, las cards anidadas. Un npx impeccable detect los habría escupido en dos segundos y sin coste.

Si te dedicas al desarrollo web y has usado cualquier herramienta de IA para crear una interfaz en los últimos meses, sabes de qué hablo. Hay un “look” que delata al instante que el diseño lo ha generado una máquina. Le pides una landing y te devuelve la landing promedio de todo lo que ha visto en su entrenamiento. El resultado es correcto, funcional y del todo olvidable.

Ese era mi punto de partida.

Prompt 2: “Hazte un plan para lanzar las skills de Impeccable para mejorar el diseño actual” ¶

Así de simple. Instalé Impeccable en Claude Code y le pedí que se hiciera un plan. No le dije qué comandos usar ni en qué orden. El agente, con las skills cargadas, elaboró una estrategia de 4 fases y 6 comandos:

1. Diagnóstico con critique — Evaluación UX del diseño actual, detección de AI slop, feedback de dirección de arte
2. Mejora visual con bolder y colorize — Tipografía más dramática, paleta de color intencionada
3. Experiencia con animate y adapt — Micro-interacciones con propósito, responsive verificado
4. Pulido con polish — Pase final de alineación, spacing y consistencia

Fíjate: yo no elegí los comandos. Impeccable le dio a Claude Code el vocabulario necesario para que él mismo diagnosticara los problemas y trazara un plan de mejora. Eso es lo potente del enfoque.

El cambio es notable. Mira la segunda captura. El texto ya no está centrado sino alineado a la izquierda, con una jerarquía de lectura natural. La tipografía ha cambiado a Instrument Serif para los títulos, con mucho más tamaño y presencia. “Humanos inquietos” ahora aparece en itálica con un amarillo cálido, el color de marca de Web Reactiva, no un degradado aleatorio.

Ha desaparecido el badge decorativo. El subtítulo también va alineado a la izquierda con un ancho controlado, no expandido por toda la pantalla. El botón principal mantiene el amarillo pero con forma más intencionada, y el enlace secundario “Ver contenidos” pasa a ser un simple texto subrayado en lugar de otro botón.

El fondo sigue siendo oscuro, pero limpio. Sin grids, sin gradientes. Solo espacio. El resultado tiene opinión, tiene personalidad. Ya no es “una landing más”.

Los seis comandos de este plan existen hoy con el mismo nombre. Solo tendrías que anteponerles el namespace: /impeccable critique, /impeccable bolder y así con el resto. Y si repitieras el experimento ahora, el cambio tipográfico saldría mejor pasando por /impeccable typeset, que en febrero no existía.

Prompt 3: “Hazte un plan para adaptar el diseño actual y cambiarlo por completo para que sea brutalista” ¶

Aquí es donde me lo pasé bien de verdad.

Quería probar algo radical: convertir la landing en brutalista. Blanco puro, negro puro, rojo de acento, tipografía monoespaciada, cero bordes redondeados, cero animaciones suaves. Lo contrario de lo que teníamos.

¿Por qué? Porque es la mejor forma de demostrar que Impeccable no empuja hacia un estilo concreto. Es una herramienta de criterio, no de gustos.

El agente, otra vez por su cuenta, elaboró un plan de 7 pasos usando 7 comandos distintos:

1. critique para evaluar qué elementos chocarían con la estética brutalista
2. simplify (hoy distill) para eliminar toda complejidad decorativa: bordes redondeados, sombras, fondos translúcidos, transiciones suaves
3. colorize para aplicar la paleta brutalista: #ffffff, #000000, #ff0000. Solo tres colores
4. bolder para amplificar la agresividad visual: tipografía masiva hasta 8rem, todo en mayúsculas, bordes de 4px
5. animate pero al revés: para eliminar toda animación. Quitar keyframes, IntersectionObserver, scroll-smooth
6. harden para verificar que nada se rompiera: tipografía responsive con clamp(), contraste WCAG
7. polish como revisión final de consistencia

El resultado habla solo. Mira la tercera captura. Fondo blanco puro. Tipografía monoespaciada (Courier New) en mayúsculas. El título ocupa casi toda la pantalla. “HUMANOS” aparece sobre un bloque rojo sólido. El menú de navegación en mayúsculas con un botón “SUSCRIBIRSE” rectangular con borde rojo. Línea horizontal fina separando la cabecera del contenido.

Los botones que antes eran píldoras redondeadas con gradiente ahora son rectángulos con borde de 4 píxeles. Las cards que flotaban sobre fondos translúcidos ahora están encajadas en cajas con bordes negros gruesos. Cero animaciones. Cero transiciones. Todo aparece al instante.

Y lo más notable: el proceso fue fluido porque Impeccable entendía qué significaba cada cambio en el contexto del diseño general. No aplicaba reglas a ciegas. Cuando harden verificó la accesibilidad, confirmó que negro sobre blanco cumple el contraste WCAG sin esfuerzo. Cuando simplify eliminó las animaciones, también eliminó el JavaScript del IntersectionObserver que ya no tenía sentido. Cada comando tenía en cuenta lo que los anteriores habían hecho.

Aquí hay un detalle que la versión actual habría cambiado, y no a mi favor: el detector marca los negros y grises puros sin matiz como anti-patrón. En un diseño brutalista el #000000 es la intención, no el descuido. Para eso está npx impeccable ignores, que te deja registrar excepciones por regla y por archivo. Conviene saberlo antes de pelearte con un aviso que en tu caso no aplica.

💡 Usar Impeccable para hacer un diseño brutalista me enseñó más sobre diseño que cualquier tutorial. Cuando le quitas todo lo decorativo a una interfaz, solo queda la estructura. Y eso es lo que distingue un buen diseño de uno bonito.

El cuarto intento: cinco meses después, dejo que decida el dado ¶

No me quedé con las ganas. Con la versión 4.0.2 del skill ya instalada, repetí el experimento desde cero para ver qué hace el direction-by-dice con el mismo encargo.

El flujo obliga a un orden. Primero init, que escribe el PRODUCT.md: quién es la audiencia, qué demuestra el sitio, qué evidencia real hay (300 episodios, la newsletter desde 2018) y qué no se puede inventar. Si intentas saltártelo, el script te para en seco con un mensaje que me hizo gracia: “los dados se quedan en el cubilete hasta que exista la verdad del producto”.

Después toca el trabajo que yo esperaba que hiciera la máquina y resulta que es mío: listar siete mundos visuales del universo del oyente, ordenados por resonancia. Y antes de eso, apartar lo que el skill llama el rut: la página que esta categoría siempre envía (hero centrado, degradado en una palabra, dos botones píldora) y su opuesto previsible (papel crema, serif de alto contraste, acento terracota). Ninguna de las dos puede ocupar una cara del dado.

Mi lista, en mi orden:

Y entonces tiras:

node .agents/skills/impeccable/scripts/concept-seed.mjs \
  --scope direction --mode persuade --candidate-count 7

DIRECTION CONCEPT SEED (key: d8a696bb; mode: persuade)
ASSIGNED INDEX: 7

La séptima. La última de mi lista. El fichero de biblioteca, justo la que había dejado en el fondo del cajón por parecerme la más apagada.

El script no se disculpa: “tu dirección mejor clasificada es la que enviaría cualquier ejecución, así que el script decide cuál se construye”. Y añade una línea que deja claro dónde está el límite: puedes re-tirar tú cuando quieras, pero el agente solo puede hacerlo con motivos factuales por escrito. El gusto nunca es motivo.

🎲 Aquí está la trampa que el direction-by-dice desmonta. Mi número 1 era la mesa de emisión de radio: la asociación literal de “esto es un podcast”. Exactamente el tipo de decisión obvia que toma cualquier modelo. El dado me obligó a construir la que yo mismo había descartado.

Un aviso importante sobre la tirada. Salió degradada, y me parece el hallazgo más útil de toda esta prueba: los 188 mundos de diseño no vienen dentro del skill. Viven en la API de impeccable.style, y el propio código lo dice sin rodeos: “el catálogo completo no se distribuye con el skill”. Si esa API no responde, sigues teniendo la asignación (que es la mitad valiosa del mecanismo) pero te quedas sin challengers y sin los tableros de referencia de calidad. El script te obliga a contárselo al usuario tal cual, cosa que le honra. Tenlo en cuenta si trabajas en un entorno con la red capada.

Con la dirección asignada, el skill exige escribir un contrato de cinco bloques dentro del propio HTML antes de tocar una línea de estilos: tesis, mundo propio, historia, primer viewport y forma. No es documentación de adorno: es el texto contra el que se audita el resultado al final.

El mundo quedó así: mueble de roble oscuro, fichas de cartulina manila con su regla roja impresa, tinta de tampón bermellón, latón en portaetiquetas y tiradores. Tipografía Archivo Black para las etiquetas de cajón y Courier Prime para las fichas mecanografiadas. Y contenido real: cuatro artículos que existen, con sus fechas.

Nada de lo que hay en esa captura estaba en mi cabeza cuando escribí el prompt. Ni el mueble, ni las fichas, ni el sello. Y es, con diferencia, la versión que mejor explica qué es Web Reactiva: un archivo ordenado de cosas que alguien ha catalogado con criterio.

Lo que dijo el detector ¶

Aquí viene la parte que me bajó los humos. Lancé npx impeccable detect sobre mi propia obra y me devolvió 13 anti-patrones.

Entre ellos, uno que duele:

[side-tab] border-left: 5px
  → Thick colored border on one side of a card — the most
    recognizable tell of AI-generated UIs.

Es decir: había puesto la pestaña de color a la izquierda de las tarjetas, el tic más reconocible de las interfaces generadas con IA, en el mismo proyecto donde estaba escribiendo sobre cómo evitarlo. Y el craft-floor del skill lo prohíbe de forma explícita. Lo leí, lo entendí y lo hice igual.

El resto del informe era igual de concreto: mi rojo de tampón daba 2,9:1 de contraste sobre el roble (necesitaba 4,5:1), había un salto de h1 a h3 sin h2, y el riel superior tenía los hijos pegados al borde. Todo cierto, todo verificable, todo corregido en diez minutos.

Con un matiz que ya anticipé más arriba y que se cumplió al pie de la letra: el detector marcaba también la regla roja superior de las fichas y el rayado azul del interior. Pero es que una ficha de catálogo se imprime exactamente así. Ahí la regla no aplica, y para eso está la puerta de atrás, que obliga a escribir el motivo:

npx impeccable ignores add-rule side-tab \
  --reason "La regla roja superior es la cabecera impresa de una
            ficha de catálogo: material del mundo elegido"

Después de eso, el detector sale limpio. Cero hallazgos.

Lo que el detector no vio ¶

Y aquí está el límite honesto de las sesenta reglas. Con el informe en verde, hice la ronda de inspección que el skill exige, escritorio y móvil a la vez, y aparecieron dos defectos que ninguna regla determinista podía cazar:

1. El subrayado tachaba el titular. Al partirse “humanos inquietos” en dos líneas en móvil, el border-bottom dibujaba una raya sobre el texto de la línea siguiente. Se arregla con text-decoration en lugar de un borde, pero eso no lo ve un linter: lo ves tú mirando la pantalla.
2. En móvil desaparecía el botón de suscripción. Mi media query escondía la navegación entera, y con ella la única acción de la cabecera.

Ninguno de los dos es un anti-patrón. Los dos son errores. Y esa es la frase que resume para qué sirve cada herramienta: el detector te dice si has caído en un tópico, no si tu página funciona.

Dos avisos de contexto para que reproduzcas esto sin sorpresas: lo construí como página estática con CSS a mano, no con Astro como en los tres intentos anteriores; y me salté los mockups previos porque necesitan OPENAI_API_KEY y no quise sumar esa factura a la prueba.

¿Cuánto cuesta todo esto en tokens? ¶

La pregunta del millón. O más bien, la pregunta de los 16 dólares.

Porque sí, transformar una landing con IA no es gratis. Los skills de Impeccable añaden contexto a cada llamada y eso se traduce en tokens. Muchos tokens. He usado Claude Code con el modelo Claude Opus 4.6 para todo el proceso. El coste por token de cada modelo lo puedes consultar en models.dev, así que los números que te doy son de ese entorno. Con otro agente o modelo el consumo puede variar, pero sirven para hacerte una idea real.

Aquí van los datos de las tres sesiones que componen el experimento:

Total: 10.6 millones de tokens, $15.86.

Vamos a desgranarlo un poco.

La creación inicial de la landing, sin skills de diseño, costó poco más de un dólar. 887K tokens. Rápido y barato. También era el resultado más genérico, así que el precio tiene sentido.

La primera iteración con Impeccable, donde se aplicaron los 6 comandos del pipeline completo, consumió 5.3 millones de tokens y casi 6 dólares. Aquí es donde las skills empiezan a pesar: cada comando carga instrucciones detalladas sobre tipografía, color, layout y anti-patrones.

La iteración brutalista es la más reveladora. Con 4.4 millones de tokens y casi 9 dólares, fue la sesión más cara. ¿Por qué? Porque la transformación brutalista tocaba todo. Cada sección de la landing necesitaba cambios profundos: eliminar bordes redondeados, quitar animaciones, reemplazar tipografías, invertir la paleta de colores. Más cambios, más tokens.

Estos números tienen ahora un matiz importante. La parte de detección ya no cuesta nada. Las 60 reglas deterministas se ejecutan en local sin modelo, así que todo el trabajo de “encuentra qué está mal aquí” salió del presupuesto de tokens. Lo que sigues pagando es lo que solo un modelo puede hacer: decidir qué hacer con esos hallazgos y escribir el código. Si tu objetivo es auditar y no rediseñar, hoy puedes hacerlo por cero euros.

Si quieres apretar más esa factura, en cómo ahorrar tokens en Claude Code tienes 25 técnicas que aplican igual de bien cuando trabajas con skills pesadas como esta.

¿Merece la pena? Depende de cómo lo mires. Si contrataras a un diseñador freelance para hacer tres versiones de una landing, no te bajarías de varios cientos de euros. Casi 16 dólares por tres diseños distintos, con plan de mejora incluido y ejecución automática, es una ganga. Eso sí, el resultado necesita supervisión y ajustes manuales. No esperes que salga perfecto a la primera.

💸 El coste real de Impeccable no está en los tokens, sino en el tiempo que te ahorras iterando. Tres versiones de una landing en menos de dos horas y por menos de 16 dólares con Claude Opus 4.6. Eso es difícil de batir.

Lo que Impeccable no hace (y está bien así) ¶

Impeccable no es una varita mágica. No va a convertir a alguien sin criterio en un diseñador senior. No va a sustituir a un equipo de UX en un proyecto complejo. Y no va a resolver problemas de producto que se disfrazan de problemas de diseño.

Lo que sí hace es subir el suelo. El peor resultado posible al usar Impeccable es mejor que el peor resultado sin él. Y para los que trabajamos generando interfaces con IA a diario, eso marca una diferencia enorme.

La limitación práctica que señalé en febrero se ha suavizado bastante. Entonces escribí que Impeccable funcionaba mejor cuando ya tenías algo construido, porque era un sistema de revisión y no un generador. Con shape para planificar antes de escribir código y el direction-by-dice repartiendo direcciones estéticas desde el minuto cero, esa frontera se ha movido. Ya puedes arrancar con él desde el lienzo en blanco.

Lo que no ha cambiado: los resultados dependen mucho de la capacidad del modelo de IA que tengas por debajo. Claude Code con Opus produce resultados distintos a un agente con un modelo más ligero. El skill es el mismo, pero la inteligencia que lo interpreta varía. Los modelos más capaces aprovechan mejor las instrucciones porque entienden los matices del vocabulario de diseño.

Y hay una tensión nueva que conviene nombrar. Sesenta reglas deterministas son sesenta opiniones sobre qué está bien y qué está mal. Muy buenas opiniones, pero opiniones. Si tu sistema de diseño usa negros puros a propósito, o si tu marca vive de un gradiente, vas a discutir con el detector. La herramienta te da ignores para eso, pero el trabajo de decidir cuándo la regla no aplica sigue siendo tuyo. Que es, al final, lo que significa tener criterio.

Cómo incorporar Impeccable a tu flujo de trabajo ¶

Si has llegado hasta aquí y quieres empezar a usar Impeccable, este es el flujo que a mí me funciona:

1. Instala con npx impeccable install desde la raíz del proyecto y deja que coloque también el hook
2. Ejecuta /impeccable init la primera vez para darle contexto sobre tu producto, tu marca y tus anti-referencias
3. Genera la interfaz describiendo la superficie que quieres, sin anunciar el tipo de trabajo
4. Arranca con /impeccable critique para tener un diagnóstico claro de dónde estás
5. Sigue las sugerencias del diagnóstico hacia los comandos que correspondan
6. Termina siempre con /impeccable polish como pase final de calidad

Este flujo ya te va a dar resultados muy superiores a lo que obtienes sin skills de diseño. Pero la verdadera potencia aparece cuando empiezas a combinar comandos con intención.

Combinaciones que funcionan bien ¶

No todos los caminos tienen el mismo sentido. Después de varias pruebas, estas son las combinaciones que mejores resultados me han dado, con los nombres actuales:

• critique → bolder → polish — Para cuando tienes algo funcional pero aburrido. El camino más corto hacia un diseño con personalidad.
• audit → harden → optimize — Para cuando la interfaz ya tiene buen aspecto pero necesita ser robusta y rápida. El camino técnico.
• distill → colorize → animate — Para rediseños donde quieres empezar de cero con un enfoque fresco. Primero limpias, luego pintas, luego das vida.
• critique → distill → bolder → polish — La secuencia completa que usé para el experimento brutalista. Funciona para cualquier cambio radical de estilo.
• typeset → layout → polish — La combinación nueva y la que más uso ahora. Casi todos los diseños genéricos lo son por tipografía y espaciado, no por color.

Errores que cometí y que puedes evitar ¶

El primer error fue ejecutar bolder sin haber hecho critique antes. Sin diagnóstico, estás amplificando a ciegas. Puede que amplifiques los problemas en lugar de las virtudes.

El segundo fue usar animate demasiado pronto. Las animaciones son la capa final, no la intermedia. Si añades movimiento antes de tener el layout, la tipografía y el color resueltos, terminas ajustando animaciones que luego cambiarán.

El tercero fue no guardar el resultado de cada paso. Impeccable trabaja sobre el código de forma directa, así que un git commit después de cada comando te permite volver atrás si algo no te convence. Créeme, lo vas a agradecer.

Y uno que solo aplica a la versión nueva: no te saltes init porque tengas prisa. Sin PRODUCT.md ni DESIGN.md, los 23 comandos trabajan con el contexto que puedan deducir del código, y ahí es donde vuelven las sugerencias de manual.

Un consejo extra: guarda los resultados de audit y critique como referencia. Son documentos valiosos que te dicen no solo qué cambiar, sino por qué. Con el tiempo, internalizas ese vocabulario y empiezas a pedirle a la IA mejores diseños desde el primer prompt.

Preguntas frecuentes sobre Impeccable ¶

¿Qué es Impeccable? ¶

Impeccable es un sistema de skills de diseño para agentes de IA creado por Paul Bakaus. Incluye un skill principal con conocimiento de tipografía, color, layout y movimiento, 23 comandos, un modo de iteración en el navegador y un detector con 60 reglas deterministas contra el AI slop. Se publica con licencia Apache 2.0.

¿Cómo se instala Impeccable? ¶

Desde la raíz de tu proyecto, ejecuta npx impeccable install y sigue el asistente. En Claude Code también puedes instalarlo como plugin con /plugin marketplace add pbakaus/impeccable. Después, ejecuta /impeccable init dentro de tu agente para generar el contexto de diseño del proyecto.

¿Cuántos comandos tiene Impeccable? ¶

Son 23 comandos, todos bajo la sintaxis /impeccable <comando> <objetivo>. Cubren contexto (init, document, extract), planificación (shape), diagnóstico (audit, critique), intensidad (bolder, quieter, distill, overdrive), oficios (typeset, layout, colorize, animate), calidad (polish, harden, optimize, adapt, clarify) y experiencia (onboard, delight, live).

¿Con qué herramientas funciona Impeccable? ¶

Con trece: Claude Code, Cursor, GitHub Copilot, Gemini CLI, Codex CLI, Grok Build, OpenCode, Pi, Kiro, Trae, Rovo Dev, Qoder y Mistral Vibe. El hook automático que ejecuta el detector al editar archivos solo está en Claude Code, Cursor, Copilot, Codex y Grok Build.

¿Impeccable es gratis? ¶

El proyecto es gratuito y de código abierto con licencia Apache 2.0. Lo que cuesta son los tokens que consume tu agente al ejecutar los comandos. El detector, en cambio, se ejecuta en local sin modelo ni API key, así que auditar no tiene coste.

¿Qué es el detector de Impeccable? ¶

Es una herramienta de línea de comandos con 60 reglas deterministas que busca anti-patrones de diseño sin usar IA. Se ejecuta con npx impeccable detect src/ sobre directorios, archivos o URLs, admite salida JSON para integrarlo en tu CI y detecta cosas como gradientes morados, fuentes por defecto, cards anidadas o texto por debajo de 11px.

¿Qué pasó con el comando /teach-impeccable? ¶

Se llama /impeccable init desde la reorganización de comandos. Además de recoger el contexto de diseño, ahora escribe un PRODUCT.md y ofrece generar un DESIGN.md con audiencia, voz, anti-referencias, colores, tipografía y componentes.

¿Sigue existiendo el comando /impeccable craft? ¶

Está deprecado desde la versión 4 del skill. Ya no hace falta porque Impeccable detecta por su cuenta el tipo de trabajo (lienzo en blanco, sección nueva, rediseño o retoque) a partir de la superficie que describas. Basta con decirle qué quieres construir.

¿Qué es el direction-by-dice de Impeccable 4? ¶

Es el mecanismo que impide que el modelo elija siempre la misma dirección estética. Una semilla externa decide qué dirección se toma en serio y reparte seis mundos alternativos junto a ella, escogidos de un catálogo de 188 mundos de diseño revisados. Tú puedes volver a tirar cuando quieras; el agente solo con justificación.

¿Los 188 mundos de diseño vienen incluidos en Impeccable? ¶

No. El catálogo completo no se distribuye con el skill: vive en la API de impeccable.style y se consulta al tirar los dados. Si esa API no está disponible, la tirada sale degradada: mantienes la asignación de cuál de tus direcciones se construye, pero te quedas sin los mundos challenger y sin los tableros de referencia de calidad. El propio script te obliga a avisar de que la tirada fue degradada.

¿El detector de Impeccable encuentra todos los problemas de diseño? ¶

No, y no lo pretende. Detecta anti-patrones concretos con reglas deterministas: gradientes morados, pestañas de color en las tarjetas, contraste insuficiente, saltos en la jerarquía de encabezados. Lo que no ve es si tu página funciona. En mi última prueba pasé el detector en verde y luego encontré a ojo un subrayado que tachaba el titular en móvil y un botón de suscripción que desaparecía en pantalla pequeña. Ninguno de los dos es un anti-patrón; los dos son errores.

¿Impeccable sirve para diseñar desde cero? ¶

Sí, desde la versión 4. Antes funcionaba mejor sobre algo ya construido, porque era un sistema de revisión. Con /impeccable shape para planificar la UX antes de escribir código y el reparto de direcciones estéticas desde el inicio, ahora también cubre el lienzo en blanco.

El fondo del asunto ¶

El verdadero valor de Impeccable no está en los 23 comandos. Está en la idea que hay detrás: el diseño necesita vocabulario y la mayoría de developers no lo tenemos.

Cuando le pides a un agente de IA “haz que quede bonito”, el resultado es genérico porque la instrucción es genérica. Cuando le dices “audita la accesibilidad, alinea con el sistema de diseño, amplifica el impacto visual y pule los detalles finales”, el resultado tiene criterio porque la instrucción tiene criterio.

Y lo que ha añadido esta versión es la otra mitad del problema. El vocabulario te sirve para pedir mejor, pero no te protege de que el modelo tire siempre por el mismo camino. Para eso están los dados de la versión 4 y las sesenta reglas del detector: una fuerza que empuja hacia la variedad y otra que pone un suelo de calidad. Vocabulario, azar y verificación.

Impeccable no te enseña a diseñar. Te da las palabras para que tu agente de IA diseñe mejor. Y eso, a la larga, te enseña más que cualquier curso de diseño, porque aprendes haciendo y viendo cómo cada comando transforma el resultado.

Pero de los cuatro diseños que llevo hechos con esto, el que más me ha enseñado es el último. Y no por los comandos.

Me enseñó porque el dado me quitó mi primera opción y me obligó a construir la séptima. Yo había puesto la mesa de emisión de radio arriba del todo por la razón más pobre que existe: es lo que asocia cualquiera con un podcast. Es justo la respuesta que da un modelo cuando le preguntas. Y el fichero de biblioteca, que había dejado el último por soso, resultó explicar el proyecto mejor que ninguna de las otras seis.

Ahí está lo incómodo del asunto. Llevamos dos años quejándonos de que la IA produce diseños genéricos, y este experimento sugiere algo bastante peor: el ranking genérico también era mío. Yo ordené esa lista. El modelo no tuvo nada que ver.

Durante años los developers hemos mirado el diseño como un territorio ajeno, algo que “hacen otros”. Herramientas como Impeccable no borran esa frontera, pero la hacen más transitable. No necesitas un máster en diseño para pedir un bolder y entender por qué tu landing mejora al cambiar la tipografía y ampliar el espacio en blanco.

En un mundo donde cada vez más interfaces nacen de un prompt, tener las palabras correctas es tener la ventaja. Y de vez en cuando, tener el criterio de dejar que decida el dado.

Impeccable es gratuito y está disponible en impeccable.style y en github.com/pbakaus/impeccable. Funciona con trece agentes de IA distintos y se instala con un npx impeccable install. La chuleta de comandos está en la propia web y te recomiendo tenerla abierta las primeras veces que lo uses.

🧨 Última oportunidad para recibir la dinamita que mereces sobre programación con IA el próximo domingo: Suscríbete gratis a Web Reactiva en https://webreactiva.com/newsletter