Impecable: La Habilidad de Claude Code para UI Frontend Únicas

Impeccable es una habilidad de código abierto para Claude Code, creada por Paul Bakaus, que soluciona el típico problema de “descuido de la IA” en resultados de frontend generados automáticamente. Impeccable proporciona 20 comandos de dirección (/audit, /polish, /critique, etc.), 7 archivos de referencia de diseño específicos de dominio y una biblioteca de anti-patrones que le indican al modelo exactamente qué NO debe generar. El resultado: UI que parecen diseñadas profesionalmente, no simples plantillas autogeneradas.

Prueba Apidog hoy

Por qué todos los frontends generados por IA se ven iguales

Pide a cualquier asistente de IA que construya un dashboard, landing page o panel de configuración y verás patrones repetidos: fuente Inter, gradientes púrpura-azul, tarjetas anidadas, texto gris sobre color, números grandes y acentos brillantes, a veces con glassmorphism. Los grandes modelos de lenguaje, entrenados en las mismas plantillas, producen resultados genéricos y olvidables.

Impeccable se diseñó específicamente para romper ese ciclo. Va más allá del skill oficial de Anthropic frontend-design, aportando profundidad, mayor cobertura de dominio y restricciones estrictas, alejando a la IA de patrones predecibles.

💡Antes de ejecutar /audit, /polish o /overdrive en Claude Code con Impeccable, descarga Apidog gratis. Así puedes probar y depurar visualmente los endpoints de API que usará tu frontend generado por IA, validando cargas útiles, tokens y datos de prueba en segundos. Este paso evita el ir y venir entre una UI pulida y una integración backend poco fiable.

¿Qué es Impeccable?

Impeccable es una skill de código para Claude: un conjunto instalable de instrucciones, archivos de referencia y comandos de barra para mejorar cualquier tarea de frontend.

En su núcleo, incluye tres componentes prácticos:

1. La skill frontend-design expandida

La skill frontend-design de Impeccable es una guía de diseño avanzada, dividida en siete archivos de referencia específicos de dominio:

Por ejemplo, la guía de tipografía explica ritmo vertical, cómo evitar FOUT con size-adjust y cuándo clamp() es o no apropiado. Esta profundidad diferencia a Impeccable de una guía genérica.

2. Protocolo de recopilación de contexto

El comando /teach-impeccable solicita, antes de diseñar, el contexto clave: público objetivo, casos de uso y personalidad de marca. Este contexto se guarda en .impeccable.md en la raíz del proyecto y se carga automáticamente después. Así la IA deja de recurrir a soluciones genéricas y diseña con un contexto claro.

20 comandos para corregir frontends generados por IA

Impeccable ofrece 20 comandos orientados a problemas concretos del frontend generado por IA. Se invocan como comandos de barra en Claude Code:

/audit          → Chequeo de accesibilidad, rendimiento y respuesta
/critique       → Revisión de UX: jerarquía, claridad, resonancia
/polish         → Revisión final (alineación, espaciado, detalles)
/distill        → Simplifica y elimina complejidad innecesaria
/normalize      → Alinea con estándares del sistema de diseño
/animate        → Añade animaciones intencionales
/colorize       → Introduce color estratégico
/bolder         → Potencia diseños demasiado seguros
/quieter        → Suaviza diseños agresivos
/delight        → Añade momentos memorables
/typeset        → Ajusta fuentes, jerarquía y tamaño
/arrange        → Mejora layout, espaciado y ritmo visual
/harden         → Manejo de errores, i18n, casos extremos
/optimize       → Mejoras de performance
/extract        → Extrae componentes reutilizables
/adapt          → Adapta a dispositivos/contextos distintos
/onboard        → Diseña flujos de onboarding y estados vacíos
/clarify        → Mejora la redacción de UX
/overdrive      → Efectos avanzados (shaders, física, animaciones especiales)
/teach-impeccable → Configura y guarda contexto de diseño

Puedes limitar el alcance, por ejemplo: /audit header solo audita la barra de navegación. Encadenar comandos es clave: ejecuta /audit para detectar problemas, /arrange para corregir layout, /typeset para tipografía y /polish como toque final.

Biblioteca de anti-patrones: enseñando a la IA qué evitar

El aporte más original de Impeccable son los anti-patrones: restricciones explícitas de “NO HACER” integradas en el contexto del modelo. Estas reglas atacan problemas recurrentes:

Anti-patrones de tipografía:

• No uses Inter, Roboto, Arial ni fuentes por defecto del sistema.
• No uses monoespaciadas como atajo para “estilo dev”.
• No coloques iconos grandes/redondeados encima de cada título.

Anti-patrones de color:

• No uses texto gris sobre fondos de color; mejor, tonos oscuros del fondo.
• No uses la “paleta IA”: cian sobre oscuro, gradientes púrpura-azul, neón sobre oscuro.
• No uses negro puro (#000) ni blanco puro (#fff).

Anti-patrones de diseño:

• No envuelvas todo en tarjetas o anides tarjetas dentro de tarjetas.
• No uses grids de tarjetas idénticas repetidas.
• No centres todo; la alineación izquierda y asimetría son más profesionales.

Anti-patrones de movimiento:

• No uses animaciones de rebote; los movimientos reales desaceleran suavemente.
• No animes width, height, padding; usa solo transform y opacity.

Nombrar estos anti-patrones ayuda a la IA a evitar los errores más obvios y repetidos en UI generada automáticamente.

Bajo el capó: build system, tests y soporte multi-herramienta

Impeccable es un proyecto de software real, no solo un archivo de prompts. Incluye sistema de compilación, pruebas unitarias y soporte para múltiples plataformas.

Sistema de compilación

Los archivos fuente se encuentran en source/skills/ y usan YAML frontmatter siguiendo la especificación Agent Skills. Un solo comando compila todo en 8 formatos:

bun run build      # Compila los 8 formatos de proveedor
bun run rebuild    # Limpia y recompila desde cero

Cada proveedor (Claude, Cursor, Codex, Gemini, etc.) recibe su dialecto correcto automáticamente gracias a la arquitectura modular en scripts/lib/transformers/.

Pruebas unitarias

Impeccable trae pruebas unitarias con Bun en tests/build.test.js, cubriendo:

• Orquestación: verifica llamadas correctas a funciones transformadoras
• Integración: crea archivos fuente y valida salida para cada proveedor
• Transformaciones: chequea presencia de marcadores específicos ({{args}}, $TARGET, etc)
• Casos extremos: listas vacías y flujos edge-case

Ejecuta todo con:

bun test

Esto permite modificar transformadores y validar de inmediato si algo se rompió, manteniendo calidad de ingeniería en el proyecto.

Impeccable + Apidog: calidad de UI y API

Impeccable mejora la calidad del frontend generado por IA; Apidog hace lo mismo para la capa de API.

En productos reales, ambas capas importan. Una UI pulida falla si las APIs están mal documentadas o son poco fiables. Apidog te da precisión para tus APIs igual que Impeccable para la UI.

Con Apidog puedes:

• Diseñar APIs visualmente antes de escribir backend
• Generar servidores simulados a partir del esquema de API para desarrollo frontend realista
• Ejecutar tests automatizados de API y detectar regresiones
• Compartir documentación interactiva y alinear equipos frontend/backend

La combinación es directa: Impeccable para frontends distintivos listos para producción; Apidog para APIs confiables y bien documentadas.

Prueba Apidog gratis para crear mocks y documentación de API en tu próximo proyecto de frontend con IA.

Cómo empezar con Impeccable

Descarga el paquete listo desde impeccable.style, selecciona tu herramienta y extrae.

Para Claude Code:

# 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/

Ejecuta /teach-impeccable una vez para guardar el contexto de diseño y tendrás los 20 comandos listos.

Preguntas frecuentes

¿Qué diferencia a Impeccable de la skill oficial de frontend-design de Anthropic?

Impeccable amplía la skill de Anthropic con 7 archivos de referencia, 20 comandos y una biblioteca explícita de anti-patrones. La oficial es un punto de partida; Impeccable es un sistema de diseño completo.

¿Funciona Impeccable con herramientas distintas a Claude Code?

Sí. Soporta Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro y Pi. El build traduce el formato fuente a dialectos de cada proveedor.

¿Para qué sirve el comando /overdrive?

Para efectos técnicamente avanzados: shaders WebGL, tablas virtuales a 60 fps, diálogos con física de resortes, animaciones ligadas al scroll, etc.

¿Cómo maneja Impeccable las pruebas unitarias?

Conjunto basado en Bun, cubriendo todo el pipeline de compilación y transformadores. Ejecuta bun test para correrlas.

¿Impeccable ayuda con frontends basados en API?

Impeccable asegura la calidad de UI. Para la capa API, combínalo con Apidog, que ofrece diseño visual, tests y mocks para backends fiables.

¿Es Impeccable gratis?

Sí. Open source, licencia Apache 2.0, código en GitHub y paquetes en impeccable.style.