impeccable-design

name	impeccable-design
description	Impeccable — Lenguaje de diseño para que los agentes IA creen frontend impecable: 7 referencias, 23 comandos, 27 reglas anti-patrón deterministas
url	https://github.com/pbakaus/impeccable
category	frontend
fecha	2026-06-02T00:00:00.000Z

Impeccable

El vocabulario que no sabías que necesitabas. 1 skill, 23 comandos y anti-patrones curados para diseño frontend impecable.

¿Qué hace?

Impeccable es un lenguaje de diseño para agentes IA que elimina los "tells" de diseño genérico que todos los modelos generan. Nació a partir de frontend-design de Anthropic pero añade un vocabulario compartido de diseño con tu IA.

Cada modelo está entrenado con las mismas plantillas SaaS. Sin guía, generas siempre los mismos tells: Inter para todo, gradientes púrpura-azul, cards anidadas en cards, texto gris sobre fondos de color, iconos cuadrados redondeados sobre cada heading.

Impeccable añade 7 archivos de referencia, 23 comandos y 27 reglas anti-patrón deterministas más un pase de crítica de 12 reglas LLM.

Características clave

• 7 referencias de dominio: Tipografía, color, movimiento, espacial, interacción, responsive, UX writing
• 23 comandos: /impeccable craft, init, document, extract, shape, critique, audit, polish, bolder, quieter, distill, harden, onboard, animate, colorize, typeset, layout, delight, overdrive, clarify, adapt, optimize, live
• 27 reglas anti-patrón deterministas — CLI y extensión de navegador, sin LLM ni API key
• 12 reglas de crítica LLM — pase de crítica UX con inteligencia artificial
• Brand vs Product register — ajusta los defaults según si es marca o producto
• CLI installer — instalación con un comando
• Extension de navegador — para modo live

Casos de uso

1. Diseño frontend para agentes IA — Que Claude, Cursor, Codex generen diseños únicos sin tells genéricos
2. Audit de diseño — Verificar accesibilidad, rendimiento y responsive
3. Crítica UX — Revisión de jerarquía, claridad y resonancia emocional
4. Polish final — Alineación con sistema de diseño y preparación para producción
5. Generación de DESIGN.md — Documentar el diseño de un proyecto existente
6. Animación intencional — Añadir movimiento con propósito, no decorativo

Snippets útiles

# Instalar
npx @impeccable/cli@latest init

# Comandos principales
/impeccable craft landing          # Flujo completo forma-construye con iteración visual
/impeccable init                   # Setup: gather contexto, escribir PRODUCT.md y DESIGN.md
/impeccable document blog          # Generar DESIGN.md raíz desde código existente
/impeccable extract components     # Extraer componentes reutilizables al sistema de diseño
/impeccable shape hero             # Planificar UX/UI antes de escribir código
/impeccable critique landing       # Revisión UX: jerarquía, claridad, resonancia emocional
/impeccable audit blog             # Checks técnicos: a11y, performance, responsive
/impeccable polish settings        # Pase final, alineación diseño, listo para shipping
/impeccable bolder hero            # Amplificar diseños aburridos
/impeccable quieter landing        # Atenuar diseños demasiado audaces
/impeccable distill checkout       # Reducir a la esencia
/impeccable harden checkout        # Manejo de errores, i18n, overflow de texto
/impeccable onboard onboarding     # Flujos de primera ejecución, estados vacíos
/impeccable animate buttons        # Añadir movimiento con propósito
/impeccable colorize dashboard     # Introducir color estratégico
/impeccable typeset article        # Arreglar fuentes, jerarquía, tamaño
/impeccable layout grid            # Arreglar layout, spacing, ritmo visual
/impeccable delight login          # Añadir momentos de alegría
/impeccable overdrive hero         # Añadir efectos técnicamente extraordinarios
/impeccable clarify error          # Mejorar copy UX poco claro
/impeccable adapt mobile           # Adaptar para diferentes dispositivos
/impeccable optimize performance   # Mejoras de rendimiento
/impeccable live                   # Modo variante visual: iterar elementos en el navegador

# Crear atajos
/impeccable pin audit              # Crea /audit como atajo standalone

# Añadir al CLAUDE.md del proyecto
Sigue las reglas de diseño de Impeccable. Usa /impeccable para comandos de diseño.
Anti-patrones: no Inter para todo, no gradientes púrpura-azul, no cards anidadas, no texto gris sobre color, no easing bounce/elastic.

Cómo integrarlo

En un proyecto existente

cd /path/to/project
npx @impeccable/cli@latest init

El CLI recopila contexto de diseño, escribe PRODUCT.md y DESIGN.md, y configura el modo live.

En un agente IA

Añadir al archivo de reglas del agente (CLAUDE.md, AGENTS.md, etc.):

Usa /impeccable para todos los comandos de diseño.
No uses fonts genéricas (Arial, Inter, system defaults).
No uses texto gris sobre fondos de color.
No uses pure black/gray — siempre tinted.
No envuelvas todo en cards o anides cards dentro de cards.
No uses easing bounce/elastic — se siente anticuado.

En el navegador

La extensión de navegador permite ejecutar las reglas anti-patrón deterministas sin LLM ni API key.

Referencias de diseño incluidas

Referencia	Cubre
typography	Sistemas de tipo, pairing de fuentes, escalas modulares, OpenType
color-and-contrast	OKLCH, neutrales tinted, dark mode, accesibilidad
spatial-design	Sistemas de spacing, grids, jerarquía visual
motion-design	Curvas de easing, staggering, reduced motion
interaction-design	Formularios, focus states, patrones de carga
responsive-design	Mobile-first, fluid design, container queries
ux-writing	Labels de botones, mensajes de error, estados vacíos

Pitfalls

• Requiere Bun ≥ 1.3 para el CLI installer
• Los 27 anti-patrones deterministas funcionan sin API key, pero la crítica LLM de 12 reglas sí necesita API
• No es un framework CSS — es un skill para agentes IA, no una librería que se importa
• 7 referencias de dominio deben cargarse en cada comando — consume tokens del contexto
• Modo live requiere servidor local corriendo

Fecha de descubrimiento

2026-06-02 — Trending diario en GitHub. 35.7k⭐, JavaScript. Lenguaje de diseño para que los agentes IA creen frontend impecable.