Impeccable: el flujo completo para capturar el contexto de tu marca

Los flujos de trabajo con IA para diseño tienen un problema de raíz: sin contexto de marca, la IA genera opciones genéricas sin importar qué tan bien estén escritas las instrucciones. Comentaste DISEÑO porque ya lo viviste. Corriges, ajustas, regeneras. Y en la siguiente sesión el mismo proceso, porque la IA volvió a empezar desde cero. Multiplica las veces que ajustas diseño en una sesión por lo que te cuesta la hora: eso es lo que cuesta no tener el contexto capturado.

Impeccable resuelve eso con un archivo. Capturas el contexto de tu marca una sola vez en un archivo llamado PRODUCT.md y todos sus comandos lo leen desde ahí, sin que vuelvas a explicar nada. El resultado es defendible frente a un cliente porque parte de decisiones de marca documentadas, no de preferencias genéricas de la IA. Esta guía, de heypiili, muestra el flujo completo: instalación, configuración inicial y los comandos que usarás después. Impeccable es de código abierto, gratuito, con soporte para 17 harnesses de IA, entornos de desarrollo asistido como Claude Code, Cursor o Gemini CLI (GitHub, agosto 2026).

Esta guía asume que ya trabajas dentro de Claude Code (terminal, escritorio o IDE) u otro entorno de desarrollo asistido. Impeccable opera sobre el código que Claude genera en la sesión, no reemplaza un editor visual como Figma ni exporta archivos de diseño.

¿Cómo funciona Impeccable y por qué cambia el resultado?

Impeccable es un conjunto de comandos que corres dentro de Claude Code. No es un plugin de diseño ni un editor visual: es una capa de contexto que vive entre tu descripción y la respuesta de Claude. El resultado son componentes HTML y CSS listos para integrar.

El beneficio es inmediato: corres la configuración inicial una vez, Claude escribe el contexto de tu marca en PRODUCT.md en la raíz del proyecto, y desde ese momento todos los comandos de Impeccable parten de ahí.

Esto cambia el punto de partida. En lugar de recibir opciones genéricas que tienes que ajustar hacia tu marca, recibes opciones que parten de ella. La decisión de quién es tu marca la tomas una vez. No en cada pedido.

¿Cómo instalar Impeccable en Claude Code?

Necesitas Claude Code instalado (terminal, escritorio o extensión de IDE).

La opción más directa es desde Claude Code, sin salir del editor:

``
/plugin marketplace add pbakaus/impeccable
``

Si prefieres instalar desde tu terminal (requiere Node.js):

``
npx impeccable install
``

En ambos casos, el instalador detecta automáticamente tu harness y escribe los archivos de skill en la carpeta correspondiente. Después de la instalación, reinicia Claude Code para que los comandos queden disponibles en el autocomplete.

Referencia oficial: impeccable.style/tutorials/getting-started

¿Cómo capturar el contexto de tu marca con init?

Este es el paso más importante. Con el proyecto abierto en Claude Code, corre:

``
/impeccable init
``

Claude te hace una serie de preguntas sobre tu marca. Tómate el tiempo de responderlas bien: la calidad de esas respuestas determina la calidad de todo lo que viene después. Las preguntas cubren:

• El propósito del proyecto: si es para un cliente real, un portafolio o práctica.
• La personalidad de la marca: describe el tono en 3 palabras (por ejemplo: moderno, directo, cálido).
• Referencias visuales: URLs de sitios que te gustan, nombres de marcas, imágenes que representen el estilo que buscas.
• Anti-referencias: estilos que quieres evitar de manera explícita (gradientes saturados, tipografía decorativa, asimetría excesiva, cualquier patrón específico que no va con tu cliente).
• Paleta: tema claro u oscuro, colores principales si ya los tienes definidos.
• Idioma: el idioma en que se escribe el contenido de la interfaz.

Cuanto más específicas sean tus referencias y anti-referencias, más preciso queda el contexto. Las respuestas se guardan en PRODUCT.md en la raíz del proyecto.

Cada proyecto tiene su propio PRODUCT.md: cuando empiezas con un cliente nuevo, corres init de nuevo en ese proyecto. El archivo es PRODUCT.md y no CLAUDE.md porque contiene contexto de marca, no instrucciones de comportamiento para Claude. Si el proyecto ya tiene un sistema de diseño en producción, PRODUCT.md complementa esas decisiones: los comandos de Impeccable generan desde el contexto que captures, sin modificar archivos existentes.

¿Qué comandos usar después de init?

Una vez que PRODUCT.md existe, no necesitas un comando separado para generar diseño. Describes la superficie que quieres y Claude Code construye desde el contexto de tu marca. Por ejemplo:

> "Diseña la página de inicio. El hero lleva el tagline principal, una imagen de producto a la derecha y un botón de contacto visible sin hacer scroll."

Impeccable lee PRODUCT.md antes de responder y entrega varias opciones desde ángulos de diseño distintos para que elijas la dirección. La selección de mundos de diseño (las variantes de dirección que Impeccable genera simultáneamente) ocurre al describir la superficie: no hay un comando separado para activarlo.

Después de la primera generación, los comandos más útiles son:

/critique: Hace una revisión del diseño generado y entrega un diagnóstico detallado. Puedes pedirle después que implemente los cambios y puede mostrar el razonamiento detrás de cada corrección. Cada corrección que implementas desde el diagnóstico es trabajo que puedes justificar en la factura: el cliente ve un proceso documentado, no un ajuste intuitivo. Útil antes de entregar cualquier pieza.

/animate: Añade movimiento con intención. No decoración: animaciones de entrada con orden de aparición coherente con la jerarquía visual. El principio es que el movimiento comunica estado, no distrae.

/live: Abre una vista previa del proyecto en el navegador para que puedas ver los cambios en tiempo real sin quedarte dentro de la terminal.

/quieter: Reduce el ruido visual cuando el resultado tiene demasiados elementos compitiendo entre sí.

/typeset: Pase enfocado en tipografía cuando la jerarquía visual no está funcionando.

/document: Escribe DESIGN.md en la raíz del proyecto: un registro del sistema de diseño que emergió del trabajo. Útil cuando necesitas entregar un documento de referencia al cliente o mantener coherencia entre sesiones. Referencia: impeccable.style/docs/document

Impeccable tiene 23 comandos en total. Para empezar, el flujo funcional es: init para capturar el contexto, describir la superficie para generar, /critique antes de entregar al cliente, y /document para dejar un registro del sistema de diseño.