{"slug": "dominando-impeccable-para-mantener-coherencia-y-consistencia-de-diseno", "title": "Dominando Impeccable: para mantener coherencia y consistencia de diseño", "summary": "Paul Bakaus created Impeccable, a design skill package that operates within Claude Code, Gemini CLI, Codex CLI, Cursor, and GitHub Copilot to enforce strict aesthetic limits on generative code agents. The tool provides 23 commands and 58 deterministic antipattern detection rules, reading from a project's DESIGN.md to maintain consistent visual rules without overriding existing design systems.", "body_md": "Los agentes de código generativo son potentes, pero si se les deja a su libre albedrío, por defecto producen un desorden visual: degradados predecibles, espaciados sin calibrar y estructuras de componentes pesadas y obsoletas. Impeccable es un paquete de habilidades de diseño, creado por Paul Bakaus, que opera directamente dentro de **Claude Code, Gemini CLI y Codex CLI** (además de Cursor y GitHub Copilot) para imponer estrictos límites estéticos, con un mismo conjunto de reglas recompilado para cada harness.\n\nAl aplicar un diseño de habilidades deliberado, puedes alejar a los agentes de los patrones genéricos y obligarlos a generar experiencias web precisas y de alto nivel visual.\n\nEl diseño de habilidades (*skill design*) es la práctica de construir rieles deterministas para modelos de IA no deterministas. En lugar de pedirle interminablemente a un agente que \"haga que se vea mejor\" o \"mejore el rendimiento\", inyectas un `DESIGN.md`\n\ncompilado y directivas funcionales que el agente debe respetar en cada iteración.\n\nImpeccable construye sobre la habilidad `frontend-design`\n\nde Anthropic y añade 23 comandos con un vocabulario de diseño compartido, más 58 reglas deterministas de detección de antipatrones (fuente Inter por defecto, degradados morado-azul, tarjetas anidadas, texto gris sobre fondos de color, iconos redondeados sobre cada encabezado, entre otros). Transforma a la IA de ser un desarrollador junior que intenta adivinar tu estética a un implementador estricto de las reglas visuales que tú definas.\n\nAl integrar este flujo de trabajo, la precisión lo es todo. Impeccable respeta tu sistema de diseño existente en lugar de sobrescribirlo: al ejecutarse, escanea tu código base (tokens, componentes, configuración de Tailwind) y carga las reglas de marca desde tu propio `DESIGN.md`\n\n, en vez de imponer una estética genérica. Por eso, si tu identidad se basa en una estética minimalista, la forma correcta de imponerla es **declarándola tú mismo** en ese archivo — paleta limitada de verde y rosa, fondo oscuro base en `#0c1624`\n\n, tipografía y tono de voz — para que cada comando posterior la lea antes de generar nada. Impeccable no decide esa estética por ti; te da el vocabulario y el mecanismo para que la tuya se respete de forma consistente en cada iteración.\n\nImpeccable expone 23 comandos que funcionan como un vocabulario compartido con el agente — cada uno nombra un tipo específico de intervención de diseño. Tres de los más útiles para un flujo de producción:\n\n`/audit`\n\n`/normalize`\n\n`DESIGN.md`\n\n. Útil cuando varias sesiones de un agente fueron introduciendo pequeñas divergencias con el tiempo.`/polish`\n\nUn flujo típico en Claude Code o Cursor se ve así: `/impeccable audit`\n\npara diagnosticar, `/impeccable normalize`\n\npara alinear lo que ya existe con tus tokens, y `/impeccable polish`\n\ncomo pase final antes de hacer commit — cada uno leyendo el mismo `DESIGN.md`\n\n/`PRODUCT.md`\n\npara no salirse de tu marca.\n\nEstos tres son solo el punto de partida: hay otros 20 comandos (`/typeset`\n\n, `/distill`\n\n, `/colorize`\n\n, `/layout`\n\n, `/bolder`\n\n, `/quieter`\n\n, `/overdrive`\n\n, entre otros) que cubren tipografía, color, layout y movimiento. Puedes ver el listado completo, la documentación de instalación y el código fuente en el [README oficial del repositorio](https://github.com/pbakaus/impeccable/blob/main/README.md).\n\nImpeccable no impone arquitectura de frontend (no decide si usas Angular zoneless, señales o qué motor de animación usar) — eso queda en tus manos. Lo que sí hace es leer consistentemente las reglas visuales que tú definas. Un `DESIGN.md`\n\ncon restricciones estrictas de marca podría verse así, a modo de ejemplo:\n\n```\n# Ejemplo ilustrativo — no es el esquema real de Impeccable,\n# que usa DESIGN.md/PRODUCT.md en formato Markdown (spec Google Stitch)\nbrand:\n  background_base: \"#0c1624\"\n  allowed_accents: [\"green\", \"pink\"]\n  voice: \"Calma, precisa, sin hype\"\n  anti_references: \"Evitar el blanco puro. No generar degradados genéricos. Rechazar toda iconografía agresiva o relacionada con armas, y evitar generar o mostrar manos en los recursos visuales.\"\n```\n\nCualquier motor de movimiento o decisión de arquitectura (GSAP, Lenis, Angular con Signals, etc.) sigue siendo una decisión tuya de stack técnico — Impeccable simplemente evita que el agente reintroduzca los patrones visuales genéricos mientras la implementas.", "url": "https://wpnews.pro/news/dominando-impeccable-para-mantener-coherencia-y-consistencia-de-diseno", "canonical_source": "https://dev.to/angularfirebase/dominando-impeccable-diseno-de-habilidades-para-arquitectura-frontend-con-ia-1739", "published_at": "2026-07-30 09:11:27+00:00", "updated_at": "2026-07-30 10:02:13.620911+00:00", "lang": "en", "topics": ["developer-tools", "generative-ai", "ai-agents"], "entities": ["Paul Bakaus", "Claude Code", "Gemini CLI", "Codex CLI", "Cursor", "GitHub Copilot", "Anthropic", "Impeccable"], "alternates": {"html": "https://wpnews.pro/news/dominando-impeccable-para-mantener-coherencia-y-consistencia-de-diseno", "markdown": "https://wpnews.pro/news/dominando-impeccable-para-mantener-coherencia-y-consistencia-de-diseno.md", "text": "https://wpnews.pro/news/dominando-impeccable-para-mantener-coherencia-y-consistencia-de-diseno.txt", "jsonld": "https://wpnews.pro/news/dominando-impeccable-para-mantener-coherencia-y-consistencia-de-diseno.jsonld"}}