Curso Impeccable — Índice
Curso Impeccable — De cero a hero
Impeccable es una design skill para agentes de IA creada por Paul Bakaus (autor original de jQuery UI y exdirector de Developer Advocacy en Google). Su objetivo es directo: combatir el AI slop, ese conjunto de tics visuales que todos los modelos de lenguaje reproducen porque fueron entrenados con las mismas plantillas de SaaS. Hablamos de Inter para absolutamente todo, gradientes morado-a-azul, cards anidadas dentro de cards, texto gris sobre fondos de color y el inevitable cuadradito redondeado con un ícono encima de cada título. Impeccable le da al agente un vocabulario de diseño compartido y una lista explícita de anti-patrones para que deje de caer en esos automatismos.
El framework se monta sobre tres piezas que conviene tener claras desde el principio: una sola skill que orquesta todo (/impeccable), 23 comandos especializados que cubren desde planificar y revisar hasta animar y desplegar, y 44 reglas deterministas que un detector ejecuta sin necesidad de API key para cazar fallos de contraste, tipografía, layout, movimiento y color. A esto se suma la live browser iteration: el comando live abre una sesión en el navegador para editar la interfaz en tiempo real sobre el DOM y devolver los cambios al código. Todo se ancla en un contexto de diseño persistente (PRODUCT.md y DESIGN.md) que cada comando consulta antes de actuar, para que las decisiones sean coherentes con la audiencia, la marca y el sistema de componentes del proyecto, en lugar de improvisar plantilla tras plantilla.
Impeccable no te da “más diseño”: te da un criterio. Convierte al agente en un colaborador que sabe cuándo subir la expresividad, cuándo bajarla y, sobre todo, qué evitar para no parecer generado por una máquina.
Este curso está pensado para desarrolladores frontend, diseñadores que trabajan con código y cualquiera que use agentes de IA (Claude Code, Cursor, Copilot, Codex, Gemini CLI y compañía) para construir interfaces y quiera que el resultado se vea profesional y distintivo. No necesitas ser experto en diseño: necesitas ganas de entender por qué tus interfaces generadas por IA se parecen todas entre sí, y cómo Impeccable rompe ese molde.
Estructura del curso
flowchart TD
A["Fundamentos<br/>(Cap. 01-02)"] --> B["Contexto y detección<br/>(Cap. 03-04)"]
B --> C["Comandos<br/>(Cap. 05-10)"]
C --> D["Iteración y operación<br/>(Cap. 11-12)"]
A -.- A1["Filosofía y AI slop<br/>Instalación y setup"]
B -.- B1["init · PRODUCT.md · DESIGN.md<br/>Detector de 44 reglas"]
C -.- C1["Planificación · Revisión · Refinamiento<br/>Estructura visual · Movimiento · Contenido"]
D -.- D1["Live browser iteration<br/>Hooks y workflow de equipo"]| # | Capítulo | Foco |
|---|---|---|
| 1 | Introducción y filosofía de Impeccable | Qué es Impeccable, el problema del AI slop en el diseño frontend generado por IA, la filosofía de Paul Bakaus y qué incluye el framework: una skill, 23 comandos, 44 reglas detectoras y live browser iteration. |
| 2 | Instalación y configuración inicial | Instalar Impeccable con el CLI, como submódulo de git o manualmente; los proveedores soportados, los hooks nativos por proveedor y la estructura de archivos de configuración que crea. |
| 3 | El contexto de diseño: init, PRODUCT.md y DESIGN.md | El comando init que genera el contexto de diseño persistente del proyecto: PRODUCT.md (audiencia, lane de marca, voz, anti-referencias) y DESIGN.md (colores, tipografía y sistema de componentes). |
| 4 | El detector: 44 reglas deterministas | El detector CLI de Impeccable que corre 44 reglas deterministas sin API key sobre archivos o URLs, los anti-patrones de AI slop y de calidad general que detecta, y el sistema de ignores inline. |
| 5 | Comandos de planificación: craft, shape, document, extract | Los comandos de planificación de Impeccable para arrancar y estructurar trabajo de diseño: craft para crear desde cero, shape para dar forma, document para documentar y extract para extraer sistema de un diseño existente. |
| 6 | Comandos de revisión: critique, audit, polish | Los comandos de revisión de Impeccable: critique para feedback de diseño honesto, audit para una auditoría sistemática y polish para pulir los detalles finales. |
| 7 | Comandos de refinamiento: bolder, quieter, distill, harden | Los comandos de refinamiento que ajustan la intensidad y robustez de un diseño: bolder para subir la expresividad, quieter para bajarla, distill para simplificar y harden para robustecer. |
| 8 | Estructura visual: layout, typeset, colorize | Los comandos que trabajan los pilares visuales de un diseño: layout para la composición y el espacio, typeset para la tipografía y colorize para el color y los tintes. |
| 9 | Movimiento y deleite: animate, delight, overdrive, onboard | Los comandos que añaden vida e intención a la interfaz: animate para movimiento, delight para detalles que sorprenden, overdrive para llevar la expresividad al máximo y onboard para flujos de bienvenida. |
| 10 | Contenido y adaptación: clarify, adapt, optimize | Los comandos enfocados en el contenido y su adaptación: clarify para mejorar la claridad del texto y la jerarquía del mensaje, adapt para adaptar a contextos/dispositivos y optimize para optimizar. |
| 11 | Live browser iteration: el comando live | El comando live de Impeccable que abre una sesión de iteración en el navegador en tiempo real: ediciones manuales sobre el DOM, captura de evidencia y commit de los cambios de vuelta al código. |
| 12 | Hooks, configuración avanzada y workflow de equipo | Cerrar el círculo: los hooks nativos por proveedor que corren el detector en cada edición, la configuración avanzada (config.json, ignores), los atajos con pin y cómo adoptar Impeccable en equipo y CI. |
Cómo usar este curso
El curso está diseñado para seguirse en orden, porque cada bloque se apoya en el anterior. Los Fundamentos (capítulos 01-02) te dan el porqué y dejan el entorno listo. El bloque de Contexto y detección (03-04) es el corazón del sistema: sin PRODUCT.md y DESIGN.md los comandos pierden criterio, y sin el detector no hay red de seguridad. El bloque de Comandos (05-10) es de referencia y práctica: puedes recorrerlo entero o saltar al grupo que necesites en cada momento. Por último, Iteración y operación (11-12) te enseña a cerrar el ciclo en el navegador y a llevar Impeccable a un equipo y a CI.
Requisitos previos
- Conocimientos básicos de HTML, CSS y un framework frontend (React, Astro, Vue o similar).
- Un agente de IA compatible instalado: Claude Code, Cursor, GitHub Copilot, Codex o Gemini CLI, entre otros.
- Node.js disponible para ejecutar el detector y los scripts del framework (
context.mjs,palette.mjs). - Familiaridad mínima con la terminal y git (Impeccable puede instalarse como submódulo).
No se requiere experiencia previa en diseño formal: Impeccable está hecho precisamente para que el criterio de diseño viva en el framework, no en tu cabeza. Empieza por el capítulo 1 y avanza a tu ritmo.