Impeccable: la skill que mejora los diseños frontend creados con IA
Las herramientas de inteligencia artificial ya pueden crear landing pages, dashboards y aplicaciones completas en pocos minutos. El problema es que muchas de estas interfaces terminan pareciéndose demasiado entre sí.
Degradados morados, tarjetas dentro de otras tarjetas, bordes excesivamente redondeados, tipografías genéricas y secciones que parecen copiadas del mismo template SaaS.
Impeccable intenta solucionar este problema agregando criterios de diseño a agentes de programación como Claude Code, Cursor, Codex CLI, Gemini CLI y GitHub Copilot.
No es un nuevo framework de CSS ni una biblioteca de componentes. Es una skill de diseño frontend para agentes de IA que analiza, critica y mejora las interfaces que estos generan.
¿Qué es Impeccable?
Impeccable es un proyecto open source creado por Paul Bakaus que proporciona instrucciones, referencias de diseño, comandos especializados y reglas automáticas para mejorar interfaces frontend creadas con agentes de programación.
El proyecto reúne una skill principal con 23 comandos relacionados con diseño, experiencia de usuario, accesibilidad, responsive design, animaciones y calidad de implementación.
Su objetivo es darle al agente un vocabulario de diseño más específico. En lugar de utilizar una instrucción ambigua como:
Haz que esta landing page se vea mejor.
Podemos ejecutar algo más concreto:
/impeccable critique the landing page
O solicitar una mejora puntual:
/impeccable polish the pricing section
De esta forma, el agente no solamente intenta hacer que la interfaz se vea “más bonita”, sino que revisa aspectos como:
- Jerarquía visual.
- Tipografía.
- Espaciado.
- Contraste.
- Estados de interacción.
- Diseño responsive.
- Claridad del contenido.
- Consistencia entre componentes.
- Accesibilidad.
- Rendimiento visual.
El problema de las interfaces generadas con IA
Los modelos de IA han sido entrenados utilizando grandes cantidades de sitios web, templates, dashboards y aplicaciones SaaS.
Esto les permite crear interfaces funcionales rápidamente, pero también provoca que repitan constantemente algunos patrones.
Entre los más comunes se encuentran:
- Uso de la fuente Inter en prácticamente todo.
- Degradados morados y azules.
- Tarjetas anidadas dentro de otras tarjetas.
- Iconos dentro de cuadrados redondeados.
- Grandes bloques de texto gris.
- Exceso de
border-radius. - Secciones de características casi idénticas.
- Landing pages con el mismo hero, testimonios y tabla de precios.
El propio proyecto describe estos elementos como señales habituales de interfaces producidas sin una dirección de diseño clara.
Impeccable intenta reducir estos patrones mediante referencias de diseño y reglas que detectan decisiones visuales repetitivas o poco justificadas.
Impeccable no es un framework
Es importante entender que Impeccable no reemplaza herramientas como:
- Tailwind CSS.
- Shadcn UI.
- Material UI.
- Chakra UI.
- Bootstrap.
- Figma.
- Storybook.
Tampoco genera una aplicación mediante una plataforma visual independiente.
Impeccable se instala dentro de un proyecto y trabaja junto al agente de programación que ya utilizamos. El agente sigue modificando nuestros archivos React, Vue, Svelte, HTML o CSS, pero lo hace utilizando las instrucciones y criterios proporcionados por la skill.
Por ejemplo, podemos crear una landing page usando Next.js, Tailwind CSS y Shadcn UI, y posteriormente pedirle a Claude Code que ejecute una revisión con Impeccable.
/impeccable critique the landing page
Después de identificar los problemas, podemos solicitar una mejora:
/impeccable polish the landing page
Cómo funciona Impeccable
Impeccable trabaja principalmente con tres elementos:
- Contexto del producto.
- Comandos de diseño.
- Detección automática de problemas.
Contexto del producto
Al iniciar Impeccable dentro de un proyecto, la herramienta genera archivos que almacenan información sobre el producto y su identidad visual.
Los dos archivos principales son:
PRODUCT.md
DESIGN.md
PRODUCT.md almacena información estratégica como:
- Público objetivo.
- Propósito del producto.
- Personalidad de la marca.
- Tipo de interfaz.
- Tono de comunicación.
- Referencias que deben evitarse.
DESIGN.md describe el sistema visual:
- Colores.
- Tipografías.
- Componentes.
- Tokens de diseño.
- Patrones reutilizables.
- Reglas de composición.
Los comandos posteriores leen estos archivos antes de generar cambios. Esto ayuda a que el agente mantenga una dirección consistente durante todo el proyecto.
Impeccable también diferencia entre una superficie de marca y una superficie de producto.
Una landing page debe captar atención y persuadir al usuario. Un dashboard, en cambio, debe facilitar tareas y presentar información con claridad. Impeccable intenta identificar esta diferencia antes de proponer el diseño.
Cómo instalar Impeccable
La instalación recomendada se realiza desde la raíz del proyecto.
npx impeccable install
Actualmente, el instalador requiere Node.js 22.12 o una versión posterior y genera una instalación adaptada al agente de programación detectado.
Después de instalarlo, debemos reiniciar o recargar nuestro agente.
Dentro de Claude Code, Cursor, Codex u otra herramienta compatible, ejecutamos:
/impeccable init
Este comando analiza el proyecto, solicita contexto sobre el producto y crea los archivos necesarios.
El flujo inicial completo sería:
npx impeccable install
Luego, dentro del agente:
/impeccable init
Finalmente, podemos probarlo sobre una página existente:
/impeccable polish the pricing page
La documentación recomienda comenzar con una página que ya sea funcional. polish está pensado como una etapa de refinamiento y no como reemplazo del desarrollo inicial.
Principales comandos de Impeccable
Todos los comandos se ejecutan utilizando /impeccable.
Crear una nueva interfaz
/impeccable craft
Realiza un proceso completo de descubrimiento, definición visual y construcción.
También podemos describir directamente lo que necesitamos:
/impeccable build a landing page for a developer tool
Planificar antes de programar
/impeccable shape
Ayuda a definir la experiencia, el contenido, la estructura y la dirección visual antes de escribir código.
Analizar la experiencia de usuario
/impeccable critique the landing page
Realiza una crítica de diseño que revisa jerarquía, claridad, carga cognitiva y experiencia del usuario.
Revisar la implementación
/impeccable audit the checkout page
Ejecuta comprobaciones técnicas relacionadas con accesibilidad, rendimiento, responsive design, temas y calidad de implementación.
Refinar una página
/impeccable polish the homepage
Realiza una última pasada sobre tipografía, alineación, colores, transiciones, contenido y consistencia visual.
Mejorar la tipografía
/impeccable typeset the hero section
Revisa selección de fuentes, tamaños, pesos, espaciado y jerarquía tipográfica.
Corregir el layout
/impeccable layout the pricing section
Mejora la distribución, el ritmo visual, los espacios y la organización de los elementos.
Simplificar una interfaz
/impeccable distill the dashboard
Elimina componentes, decoraciones o contenido innecesario para conseguir una interfaz más clara.
Hacer el diseño más llamativo
/impeccable bolder the landing page
Aumenta el impacto visual cuando el resultado es demasiado conservador o genérico.
Reducir el exceso visual
/impeccable quieter the homepage
Reduce colores, efectos y elementos que compiten innecesariamente por la atención.
Preparar la interfaz para producción
/impeccable harden the checkout
Revisa textos largos, internacionalización, estados de error, contenido vacío, desbordamientos y otros casos límite.
La documentación agrupa los comandos en áreas como creación, evaluación, refinamiento, simplificación, preparación para producción y mantenimiento del sistema visual.
Ejemplo con Next.js, Tailwind CSS y Shadcn UI
Imaginemos que tenemos una landing page creada con Next.js.
El agente ya ha generado:
- Hero principal.
- Sección de características.
- Testimonios.
- Planes de precios.
- Preguntas frecuentes.
- Llamada a la acción final.
La página funciona, pero tiene el aspecto típico de una interfaz creada rápidamente con IA.
Primero podemos inicializar el contexto:
/impeccable init
Después, ejecutar una crítica:
/impeccable critique the landing page
Podríamos pedir que conserve nuestro stack y componentes:
Use the existing Tailwind tokens and Shadcn components.
Do not replace the component library.
Identify generic AI design patterns and weak visual hierarchy.
Luego aplicamos una mejora:
/impeccable polish the landing page
También podemos trabajar por secciones:
/impeccable typeset the hero section
/impeccable distill the features section
/impeccable bolder the final call to action
/impeccable harden the pricing section
Esto permite revisar el diseño progresivamente sin pedirle al agente que reescriba toda la landing page.
Live Mode: editar la interfaz desde el navegador
Una de las funciones más interesantes es Live Mode.
Se activa con:
/impeccable live
Live Mode abre un flujo de trabajo visual sobre el servidor de desarrollo. Podemos seleccionar un elemento en el navegador, agregar un comentario y generar tres variantes diferentes.
Cuando aceptamos una variante, Impeccable modifica el código fuente real del proyecto. Los estilos se integran en los archivos correspondientes en lugar de quedarse como modificaciones temporales dentro del navegador.
El proceso se divide en tres pasos:
- Seleccionamos un elemento.
- Generamos variantes.
- Aceptamos una propuesta.
Por ejemplo, podríamos seleccionar el hero de una landing page y escribir:
Make this section feel more premium and less like a generic SaaS template.
También podríamos utilizar acciones como:
bolder
quieter
distill
polish
typeset
colorize
layout
animate
Live Mode funciona con servidores y frameworks comunes como Next.js, Vite, SvelteKit, Astro, Nuxt, Bun y proyectos HTML estáticos. La función continúa marcada como beta, por lo que configuraciones menos habituales pueden presentar problemas.
Detección automática de patrones genéricos
Impeccable incluye un detector que puede analizar archivos frontend sin depender de un modelo de lenguaje o una API externa.
Podemos ejecutarlo desde la terminal:
npx impeccable detect src/
Este detector busca problemas y patrones asociados con interfaces generadas automáticamente. También puede integrarse en procesos de integración continua y utilizar códigos de salida para bloquear un pull request cuando encuentra determinados problemas.
Esto resulta útil en proyectos donde varios desarrolladores o agentes de IA modifican la interfaz constantemente.
En lugar de depender solamente de una revisión manual, el equipo puede ejecutar el detector dentro del pipeline:
- name: Check frontend design
run: npx impeccable detect src/
El proyecto también ofrece una extensión para Chrome que ejecuta el detector directamente sobre una página cargada en el navegador.
Ventajas de utilizar Impeccable
Reduce las interfaces genéricas
La principal ventaja es que proporciona instrucciones más específicas que un simple “hazlo más moderno”.
Mantiene el contexto visual
Los archivos PRODUCT.md y DESIGN.md permiten que distintos agentes trabajen utilizando las mismas reglas.
Se integra con herramientas existentes
No obliga a cambiar Next.js, React, Tailwind, Shadcn UI ni la arquitectura del proyecto.
Permite trabajar por etapas
Podemos separar la creación, crítica, auditoría y refinamiento de una interfaz.
Puede utilizarse desde el navegador
Live Mode ofrece un flujo más visual para desarrolladores que no quieren describir cada componente utilizando solamente texto.
Es gratuito y open source
Las skills, los comandos, la CLI y el motor de detección están disponibles bajo licencia Apache 2.0.
Limitaciones
Impeccable puede mejorar el criterio utilizado por el agente, pero no convierte automáticamente cualquier interfaz en un gran diseño.
Todavía debemos revisar:
- Los cambios realizados en el código.
- La experiencia en dispositivos reales.
- La accesibilidad.
- El rendimiento.
- La identidad de la marca.
- La calidad del contenido.
- Las necesidades reales de los usuarios.
La propia documentación recomienda revisar los cambios, solicitar explicaciones y revertir las modificaciones que no tengan sentido. Impeccable es una herramienta con opiniones de diseño, pero no es infalible.
También debemos tener cuidado con comandos como bolder, animate u overdrive. Usarlos sin una dirección clara podría generar una interfaz visualmente impresionante, pero menos usable.
¿Vale la pena utilizar Impeccable?
Impeccable puede resultar especialmente útil para desarrolladores que utilizan agentes de IA para crear:
- Landing pages.
- Dashboards.
- Productos SaaS.
- Portafolios.
- Paneles administrativos.
- Aplicaciones internas.
- Tiendas online.
- Prototipos para clientes.
Su principal aporte no es generar más código. Su aporte es proporcionar una capa adicional de criterio entre la primera versión funcional y el resultado final.
Un flujo recomendable sería:
/impeccable init
/impeccable shape
Construir la funcionalidad
/impeccable critique
/impeccable polish
/impeccable audit
/impeccable harden
De esta manera, la IA deja de actuar solamente como generadora de componentes y comienza a seguir un proceso más parecido al de un equipo que diseña, revisa y refina un producto.
Conclusión
Impeccable es una skill de diseño frontend que busca solucionar uno de los mayores problemas del vibe coding: las interfaces funcionales, pero visualmente genéricas.
La herramienta agrega comandos especializados, contexto persistente, revisiones de experiencia de usuario, auditorías técnicas, detección automática y edición visual desde el navegador.
No reemplaza a un diseñador, un sistema de diseño ni una buena investigación de usuarios. Sin embargo, puede convertirse en una segunda capa muy útil para desarrolladores que utilizan Claude Code, Cursor, Codex u otros agentes para crear productos web.
En lugar de aceptar la primera interfaz que genera la IA, Impeccable permite criticarla, simplificarla, endurecerla y pulirla antes de llevarla a producción.