Impeccable es una habilidad de código de Claude de código abierto, creada por Paul Bakaus, que combate el problema del "descuido de la IA" en el resultado de frontend generado por IA. Incluye 20 comandos de dirección (/audit, /polish, /critique y más), 7 archivos de referencia de diseño específicos del dominio y anti-patrones curados que le dicen al modelo exactamente qué NO debe generar. El resultado: interfaces de usuario que parecen diseñadas, no auto-generadas.
Por qué todos los frontends generados por IA se ven iguales
Pídele a cualquier asistente de codificación de IA que te construya un panel de control, una página de destino o un panel de configuración. Dale rienda suelta. ¿Qué obtienes?
Fuente Inter. Degradado de morado a azul. Tarjetas anidadas dentro de tarjetas. Texto gris sobre un fondo de color. Una sección principal con un número grande, una etiqueta pequeña y un acento brillante. Quizás algo de "glassmorphism" para dar "profundidad".
Lo has visto mil veces porque cada modelo de lenguaje grande entrenado en las mismas plantillas genéricas produce el mismo resultado genérico. Esa es la trampa del frontend generado por IA: técnicamente funcional, visualmente olvidable.
Impeccable fue creado específicamente para romper ese ciclo. Donde la habilidad oficial de Anthropic frontend-design sentó las bases, Impeccable se basa en ella con una experiencia más profunda, mayor cobertura de dominio y restricciones estrictas que alejan a la IA de los patrones predecibles grabados en sus pesos.
Qué es Impeccable en realidad
Impeccable es una habilidad de código de Claude: un conjunto instalable de instrucciones, archivos de referencia y comandos de barra que aumentan cómo Claude Code aborda cualquier tarea de frontend.
En su núcleo, la habilidad se envía con tres componentes:
La habilidad frontend-design expandida de Impeccable
La habilidad frontend-design dentro de Impeccable es una guía de diseño completa dividida en siete archivos de referencia específicos de dominio:
Cada archivo de referencia es técnicamente preciso. La guía de tipografía, por ejemplo, va más allá de "usar buenas fuentes" y explica cómo funciona el ritmo vertical, por qué ocurre FOUT (Flash of Unstyled Text) y cómo evitarlo con anulaciones de size-adjust, y cuándo el tipo fluido con clamp() es en realidad la elección incorrecta. Esta profundidad es lo que separa a Impeccable de una guía de estilo genérica.
El Protocolo de Recopilación de Contexto de Impeccable
Uno de los aspectos más subestimados del diseño de Impeccable es el comando /teach-impeccable. Antes de que comience cualquier trabajo de diseño, la habilidad requiere un contexto de diseño confirmado: público objetivo, casos de uso y personalidad de la marca. Este contexto se guarda en .impeccable.md en la raíz del proyecto y se carga automáticamente en sesiones futuras.
Es algo pequeño que marca una gran diferencia. El resultado de frontend generado por IA es genérico en parte porque el modelo no tiene contexto de proyecto, por lo que recurre a opciones seguras y promedio. Impeccable obliga a establecer ese contexto primero.
Los 20 comandos que corrigen frontends generados por IA
Impeccable incluye 20 comandos invocables por el usuario, cada uno abordando un modo de fallo específico en el trabajo de frontend generado por IA. Los llamas como comandos de barra dentro de Claude Code:
/audit → Comprobación de calidad de accesibilidad, rendimiento y respuesta
/critique → Revisión de UX: jerarquía, claridad, resonancia emocional
/polish → Última revisión antes de la entrega (alineación, espaciado, detalles)
/distill → Despojar a la esencia — eliminar la complejidad que no merece su lugar
/normalize → Alinear con los estándares del sistema de diseño
/animate → Añadir movimiento con propósito (no un temblor decorativo)
/colorize → Introducir color estratégico en interfaces monocromáticas
/bolder → Amplificar diseños seguros y aburridos
/quieter → Suavizar diseños excesivamente agresivos
/delight → Añadir momentos memorables de alegría
/typeset → Corregir elecciones de fuente, jerarquía y tamaño
/arrange → Corregir diseño, espaciado y ritmo visual
/harden → Manejo de errores, i18n, casos extremos
/optimize → Mejoras de rendimiento
/extract → Extraer componentes reutilizables y tokens de diseño
/adapt → Adaptar para diferentes dispositivos/contextos
/onboard → Diseñar flujos de incorporación y estados vacíos
/clarify → Mejorar la copia de UX poco clara
/overdrive → Efectos técnicamente ambiciosos (shaders, física de resortes, revelaciones impulsadas por el desplazamiento)
/teach-impeccable → Configuración única: recopilar y guardar el contexto de diseño
La mayoría de los comandos aceptan un argumento de alcance opcional. /audit header ejecuta la auditoría solo en la barra de navegación. /polish checkout-form enfoca el pase de pulido en el flujo de pago. Esta orientación quirúrgica mantiene a Claude concentrado y evita que toque partes del frontend generado por IA que ya funcionan.
El verdadero poder proviene de encadenar comandos. Un flujo de trabajo típico podría ejecutar /audit para detectar problemas, /arrange para corregir problemas de diseño, /typeset para limpiar la jerarquía de tipos y /polish como el pase final antes de la entrega, cada paso construyendo sobre el anterior.
La biblioteca de anti-patrones: enseñarle a la IA qué no hacer
La contribución más original que hace Impeccable al problema del frontend generado por IA no son los comandos, sino los anti-patrones.
La habilidad incorpora restricciones explícitas de "NO HACER" directamente en el contexto del modelo. Estas no son preferencias de estilo vagas; son firmas de fallos específicas y recurrentes que aparecen una y otra vez en el resultado del frontend generado por IA:
Anti-patrones de tipografía:
- No uses Inter, Roboto, Arial o los valores predeterminados del sistema (hacen que los diseños sean invisibles)
- No uses fuentes monoespaciadas como atajo perezoso para "vibra de desarrollador"
- No coloques iconos grandes y redondeados encima de cada encabezado; parece una plantilla
Anti-patrones de color:
- No uses texto gris sobre fondos de color; se ve descolorido; en su lugar, usa un tono más oscuro del color de fondo
- No uses la "paleta de IA": cian sobre oscuro, degradados de morado a azul, acentos de neón sobre fondos oscuros
- No uses negro puro (
#000) o blanco puro (#fff); tiñe tus neutrales
Anti-patrones de diseño:
- No envuelvas todo en tarjetas; no todos los elementos necesitan un contenedor
- No anides tarjetas dentro de tarjetas
- No uses cuadrículas de tarjetas idénticas (icono + encabezado + texto, repetido indefinidamente)
- No centres todo; el texto alineado a la izquierda con diseños asimétricos se lee como diseñado
Anti-patrones de movimiento:
- No uses animaciones de rebote o elásticas; se sienten anticuadas; los objetos reales desaceleran suavemente
- No animes propiedades de diseño como
width,height,padding; usa solotransformyopacity
Estas reglas se ajustan exactamente a los hábitos que hacen que el código de frontend generado por IA sea reconocible a primera vista. Al nombrarlos explícitamente, Impeccable le da al modelo una lente correctiva que no tendría sin guía externa.
Bajo el capó: Sistema de compilación, pruebas unitarias y soporte multi-herramienta
Impeccable no es solo un archivo de indicaciones, es un proyecto de software adecuado con un sistema de compilación, un conjunto de pruebas unitarias y soporte para múltiples proveedores.
El sistema de compilación
Los archivos fuente de la habilidad se encuentran en source/skills/ y utilizan un frontmatter YAML enriquecido (siguiendo la especificación de Agent Skills). Un solo paso de compilación los compila en formatos específicos del proveedor para Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro y Pi:
bun run build # Compilar los 8 formatos de proveedor
bun run rebuild # Limpiar y reconstruir desde cero
Cada proveedor obtiene el dialecto correcto. Claude Code y OpenCode obtienen metadatos completos, incluidos args y allowed-tools. Codex CLI obtiene el formato argument-hint con marcadores de posición $ARGNAME. Gemini obtiene un frontmatter mínimo. La compilación maneja todo esto automáticamente a través de una arquitectura de transformador modular en scripts/lib/transformers/.
El conjunto de pruebas unitarias
Impeccable incluye un conjunto de pruebas unitarias basado en Bun en tests/build.test.js. Las pruebas cubren todo el pipeline de compilación:
- Pruebas de orquestación verifican que cada función transformadora se llama con los argumentos correctos
- Pruebas de integración crean archivos fuente reales en un directorio temporal y afirman que los archivos de salida esperados existen para cada proveedor
- Pruebas de corrección de transformación verifican transformaciones específicas, como que la salida de Gemini contiene
{{args}}, que la salida de Codex contiene$TARGET, y que la salida de Claude Code contieneuser-invokable: true - Pruebas de casos extremos manejan listas de habilidades vacías y verifican que el pipeline no se rompa
Ejecutar el conjunto de pruebas unitarias es un solo comando:
bun test
Estas pruebas unitarias son las que hacen que sea seguro contribuir a Impeccable. Puedes modificar un transformador, ejecutar las pruebas unitarias y saber inmediatamente si tu cambio rompió la salida para cualquiera de las ocho herramientas compatibles. Ese es el tipo de confianza de ingeniería que separa los proyectos de código abierto mantenidos de las colecciones de indicaciones abandonadas.
Impeccable + Apidog: Combinando la calidad del diseño con la calidad de la API
Impeccable resuelve el problema de calidad del frontend generado por IA en la capa de UI. Apidog lo resuelve en la capa de API.
Cuando estás construyendo un producto real con asistencia de IA, ambas capas importan. Un frontend generado por IA que se vea pulido seguirá decepcionando a los usuarios si las llamadas a la API que realiza están mal documentadas, sin probar o no son fiables. Apidog te ofrece el mismo nivel de precisión para tu API que Impeccable te da para tu UI.
Con Apidog, puedes:
- Diseñar APIs visualmente antes de escribir una sola línea de código backend
- Generar servidores simulados automáticamente a partir de tu esquema de API, para que tu frontend generado por IA tenga datos realistas para renderizar durante el desarrollo
- Ejecutar pruebas automatizadas de API contra cada punto final, detectando regresiones antes de que lleguen a producción
- Compartir documentación interactiva de API con tu equipo, manteniendo alineados a los desarrolladores de frontend y backend
La combinación es natural: usa Impeccable para asegurar que tu frontend generado por IA sea visualmente distintivo y esté listo para producción, y usa Apidog para asegurar que las APIs que impulsan ese frontend sean confiables y estén bien documentadas. Juntos, cierran la brecha de calidad que el desarrollo asistido por IA solo deja abierta.
Prueba Apidog gratis para generar servidores simulados y documentos de API para tu próximo proyecto de frontend generado por IA.
Cómo empezar con Impeccable
La ruta más rápida es descargar el paquete listo para usar desde impeccable.style, elegir tu herramienta y extraerlo.
Para Claude Code específicamente:
# Instalación a nivel de proyecto
cp -r dist/claude-code/.claude your-project/
# O instalar globalmente para todos los proyectos
cp -r dist/claude-code/.claude/* ~/.claude/
Luego, ejecuta /teach-impeccable una vez para guardar el contexto de diseño de tu proyecto, y estarás listo para usar los 20 comandos.
Preguntas frecuentes
¿Qué diferencia a Impeccable de la habilidad oficial de frontend-design de Anthropic? Impeccable se basa en la habilidad de Anthropic con 7 archivos de referencia específicos de dominio, 20 comandos de dirección y una biblioteca explícita de anti-patrones. La habilidad oficial es un punto de partida; Impeccable es un sistema de diseño integral superpuesto a ella.
¿Impeccable funciona con herramientas que no sean Claude Code? Sí. Impeccable es compatible con Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro y Pi. El sistema de compilación traduce un único formato fuente a dialectos específicos del proveedor para cada herramienta.
¿Para qué sirve el comando /overdrive? /overdrive es para efectos técnicamente ambiciosos que van más allá de los límites convencionales: shaders WebGL, tablas virtuales a 60 fps, física de resortes en diálogos, revelaciones impulsadas por el desplazamiento. Úsalo cuando quieras algo que haga que los usuarios pregunten "¿cómo hicieron eso?"
¿Cómo maneja Impeccable las pruebas unitarias? El proyecto incluye un conjunto de pruebas unitarias basado en Bun que cubre todo el pipeline de compilación, incluida la corrección del transformador y las pruebas de integración que crean archivos fuente reales y verifican la salida. Ejecuta bun test para ejecutar el conjunto completo de pruebas unitarias.
¿Puede Impeccable ayudar con los frontends basados en API? Impeccable se encarga de la calidad de la interfaz de usuario. Para la capa de API, combínalo con Apidog, que proporciona diseño visual de API, pruebas automatizadas y generación de servidores simulados, todo lo que necesitas para construir backends confiables para tu frontend generado por IA.
¿Es Impeccable de uso gratuito? Sí. Impeccable tiene licencia Apache 2.0 y es de código abierto. El código fuente está disponible en GitHub y los paquetes compilados están disponibles en impeccable.style.