01 · ¿Qué son las 3 skills y cómo se apilan?
Tres skills que se apilan · base + vocabulario + auditor de motion
Claude por defecto diseña feo. Paletas violetas, Inter por todos lados, transitions de 300ms en all. El stack que te muestro acá lo arregla en tres capas:
- frontend-design (Anthropic oficial) le da el norte estético.
- impeccable (Paul Bakaus, Apache 2.0) le da los 23 comandos y 7 dominios de referencia.
- design-motion-principles (Kyle Zantos, MIT) le da el criterio para auditar las animaciones.
Las tres son open source. Las tres se instalan en menos de cinco minutos. Las tres funcionan en Claude Code, Cursor, Codex, Gemini CLI y cualquier agente que respete el formato de skills.
¿Querés tus devs entregando 3x más con Claude Code?
Sin reescribir el repo. Sin formaciones largas. Sin tocar tu stack.
02 · ¿Qué hace frontend-design?
La skill oficial de Anthropic · el norte estético
Vive en github.com/anthropics/skills. Un solo archivo SKILL.md que le enseña a Claude cinco cosas que la mayoría de los agentes no saben:
- Pensar antes de codear: Purpose / Tone / Constraints / Differentiation.
- Comprometerse con una dirección estética bold: brutalist, maximalist, retro-futurist, organic, luxury, editorial, art deco, etc. No mezclar.
- Tipografía con personalidad: nunca Inter, Roboto o Arial. Display font distintivo + body font refinada.
- Color & theme cohesivo: variables CSS, paletas con accent fuerte, no "evenly distributed".
- Motion con propósito: page load orchestrado con stagger, hover states que sorprenden, scroll-triggering.
Cómo se instala en Claude Code:
Cómo se invoca en Cursor / Codex / Gemini CLI: cloná el repo y copiá plugin/skills/frontend-design/SKILL.md al directorio de skills del agente (.cursor/rules/, .codex/skills/, etc).
Para quien arranca de cero. Esta es la base sobre la que las otras dos extienden.
03 · ¿Qué hace impeccable?
El vocabulario operativo · 23 comandos + 7 dominios
Creada por Paul Bakaus (github.com/pbakaus/impeccable), licencia Apache 2.0, sitio oficial impeccable.style. La descripción del repo lo resume bien: "the vocabulary you didn't know you needed".
Instalación una sola línea (cualquier agente):
Para quien ya tiene frontend-design instalado y quiere subir un nivel.
Los 23 comandos agrupados por momento del workflow:
| Comando | Qué hace | Cuándo usarlo |
|---|---|---|
/impeccable teach | Gather design context, escribe PRODUCT.md + DESIGN.md | Al arrancar un proyecto nuevo. |
/impeccable shape | Plan UX/UI antes de escribir código | Cuando vas a construir algo no trivial. |
/impeccable craft | Full shape → build → iterate flow | Para un feature de cero a deployable. |
/impeccable document | Genera DESIGN.md desde código existente | Al heredar un proyecto sin docs. |
/impeccable extract | Pull components y tokens al design system | Cuando notás patrones repetidos. |
/impeccable critique | Review de hierarchy, clarity, emotional resonance | Después de una primera implementación. |
/impeccable audit | Checks técnicos: a11y, performance, responsive | Antes de mergear. |
/impeccable polish | Final pass + design system alignment | Pre-ship. |
/impeccable bolder | Amplifica diseños que se sienten tibios | Cuando el output es "ok" pero no memorable. |
/impeccable quieter | Calma diseños demasiado ruidosos | Cuando el primer pass salió maximalista de más. |
/impeccable distill | Stripear a la esencia | Cuando hay demasiados elementos compitiendo. |
/impeccable harden | Error handling, i18n, text overflow, edge cases | Antes de probar con datos reales. |
/impeccable onboard | First-run flows, empty states, activation | Para SaaS / apps con login. |
/impeccable animate | Agrega motion con propósito | Cuando todo está estático. |
/impeccable colorize | Introduce color estratégico | Cuando todo es gris. |
/impeccable typeset | Fix de font choices, hierarchy, sizing | Cuando la tipografía se siente default. |
/impeccable layout | Fix de layout, spacing, visual rhythm | Cuando algo se "siente off" pero no sabés qué. |
/impeccable delight | Agrega micro-momentos de joy | Para apps consumer que buscan retention. |
/impeccable overdrive | Efectos técnicamente extraordinarios | Para landings de tools / hero sections. |
/impeccable clarify | Mejora UX copy poco claro | Cuando los buttons dicen "Click here". |
/impeccable adapt | Adapta para diferentes devices | Cuando el desktop se rompe en mobile. |
/impeccable optimize | Performance improvements | Pre-deploy. |
/impeccable live | Visual variant mode: iterar en browser | Para explorar opciones rápido. |
Los 7 dominios de referencia que vienen bundleados son archivos que Claude lee on-demand cuando el comando los necesita: Typography (type systems, OpenType, modular scales), Color & Contrast (OKLCH, tinted neutrals, dark mode), Spatial Design (spacing systems, grids), Motion Design (easing curves, staggering, reduced motion), Interaction Design (forms, focus states, loading), Responsive Design (mobile-first, container queries) y UX Writing (button labels, error messages, empty states).
Garantía: impeccable extiende frontend-design, no la reemplaza. Si no tenés frontend-design instalada, instalala primero o el contexto base falta.
04 · ¿Qué hace design-motion-principles?
El auditor de animaciones · tres filosofías, no reglas universales
Creada por Kyle Zantos (github.com/kylezantos/design-motion-principles), licencia MIT. La diferencia con cualquier "rule file" de motion: no aplica reglas universales. Evalúa contra tres filosofías reales y elige cuál priorizar según el contexto.
Instalación una sola línea:
Las tres filosofías:
Default ciego. Todo anima igual, todo dura lo mismo, nada se siente intencional. El resultado es genérico de IA pura.
El skill primero detecta qué tipo de producto es (dashboard fintech, kids app, portfolio creativo) y después elige la filosofía que aplica.
- Emil Kowalski (emilkowal.ski, Linear, ex-Vercel): restraint y velocidad. La pregunta que hace antes de animar es "should this animate at all?". Para productivity tools donde la animación es fricción.
- Jakub Krehel (jakub.kr): production polish. Subtle, refined, professional. Para apps consumer ya shippeadas que necesitan ese último 10% de pulido.
- Jhey Tompkins (@jh3yy): experimentación CSS, playful, creative. Para portfolios, kids apps, sitios de marketing donde el WOW es el producto.
Garantía: el skill no está endorsed por ninguno de los tres designers. Draws desde su trabajo público (cursos, artículos, repos open source).
Cuándo usarlo: después de implementar un componente animado, pedile a Claude "audita las animaciones de este componente con design-motion-principles". El skill auto-detecta el tipo de producto del repo y aplica la filosofía relevante. No vas a recibir un report de "agregá más animaciones" si estás construyendo un dashboard de trading.
05 · ¿Cómo se apila el workflow completo?
Cómo se usan las tres juntas · un solo flujo end-to-end
El stack no es teórico. Funciona así en la práctica:
Paso 1 · arrancás con /impeccable craft. Por debajo, el comando referencia frontend-design para el norte estético. Salís con un componente funcional y un DESIGN.md que documenta las decisiones.
Paso 2 · iterás con /impeccable critique y /impeccable polish. El primero te marca problemas de hierarchy y clarity. El segundo alinea con el design system y deja el componente production-ready.
Paso 3 · auditás motion con design-motion-principles. Antes de mergear: "audita las animaciones de Pricing.tsx con design-motion-principles". Si es una pricing page B2B, el skill va a aplicar Emil (restraint, speed). Si es para un sitio creativo, va a aplicar Jhey (playful, experimentación).
Paso 4 · cierre con /impeccable audit. Checks técnicos: contraste WCAG, breakpoints, performance budget. Si pasa, mergeás.
Cuatro comandos, tres skills, un solo flujo. Sin pelearle al agente, sin paletas violetas, sin Inter forzado.
06 · ¿Cómo se comparan las 3 skills lado a lado?
Las 3 skills · qué hace cada una y cuándo elegirla
| Skill | Qué hace | Cuándo usarla |
|---|---|---|
| frontend-design (Anthropic) | Le da a Claude el framework estético: purpose / tone / constraints / differentiation + reglas de typography, color, motion y spatial composition. Una sola SKILL.md, sin comandos extra. | Siempre instalada. Es la base. Sin ella, las otras dos no tienen contexto de referencia. |
| impeccable (Paul Bakaus) | Suma 23 slash commands (craft, critique, polish, bolder, quieter, etc.) y 7 dominios de referencia (typography, color, spatial, motion, interaction, responsive, UX writing). | Cuando ya tenés frontend-design y querés vocabulario operativo para iterar. Para 99% de los usuarios serios. |
| design-motion-principles (Kyle Zantos) | Auditor de animaciones que evalúa contra tres filosofías reales (Emil Kowalski, Jakub Krehel, Jhey Tompkins) según el contexto del proyecto. | Cuando hay motion en el componente. Antes de mergear o cuando las animaciones se sienten random. |
07 · ¿Qué cambia en el before/after real?
Lo que cambia visualmente · ejemplo verbatim
Pedile a Claude "hacé una landing page para una herramienta de notas" con y sin el stack:
Paleta: violeta y blanco. Fuente: Inter en todo. Layout: hero centrado con un H1 grande, párrafo abajo y un único botón "Get Started" en violeta. CTA section idéntica al hero. Footer con cuatro columnas y links genéricos. Cero personalidad.
Paleta: cream warm + accent terracota + un detalle negro. Fuente: Halant para display, Inter Tight para body. Hero asimétrico con la H1 corrida a la izquierda y un mockup del producto en el cuadrante derecho rotado 3 grados. Tres bloques de feature con números grandes serif. Footer compacto con el wordmark gigante en outline.
El delta no es marketing. Es porque las skills cambiaron las defaults del agente: el "comprometerse con una dirección bold" de frontend-design, sumado al "evitar AI slop" del archivo color.md de impeccable, sumado al criterio de spacing del spatial.md, hacen que el mismo prompt genere un output radicalmente distinto.
08 · ¿Cuándo NO conviene usarlas?
Honestidad antes de cerrar · tres casos donde sobra
Estás explorando una idea de 5 minutos y vas a tirar el código. El proyecto tiene un design system propio bien definido y querés que Claude lo siga exacto (las skills empujan a su norte estético). Estás construyendo un admin panel interno donde la prioridad es funcionalidad pura y la estética es secundaria.
El output va a producción / a un cliente / a una landing pública. Es un proyecto creativo donde la estética es parte del producto (portfolio, marketing site, app consumer). Querés que Claude diseñe componentes nuevos sin pelearte con paletas default genéricas.
Si dudás, instalá frontend-design sola primero. Es la más liviana y la más reversible. Después sumá impeccable si querés vocabulario operativo.
09 · ¿Cuál es el combo final?
Cómo se ven los próximos 10 minutos
Si pusiste atención hasta acá, los próximos 10 minutos son:
- Instalar frontend-design en Claude Code:
/plugin marketplace add anthropics/skills→/plugin install frontend-design. - Instalar impeccable en cualquier agente:
npx skills add pbakaus/impeccable. - Instalar design-motion-principles:
npx add-skill kylezantos/design-motion-principles. - Probar el stack: abrí un proyecto, pedile a Claude
/impeccable craft 'landing page para X'y comparalo con lo que generaba antes.
Tres skills, cero costo, todas open source. Tu agente pasa de generar "AI slop" violeta a entregar componentes que se sienten diseñados.
📦 Repos:
- github.com/anthropics/skills (frontend-design oficial)
- github.com/pbakaus/impeccable (Paul Bakaus, Apache 2.0)
- github.com/kylezantos/design-motion-principles (Kyle Zantos, MIT)
🌐 Sitio oficial impeccable: impeccable.style
Si te interesa cómo Claude piensa el diseño desde el lado del producto, mirá también Claude Design · qué es y cómo crear prototipos React y cómo hablarle a Claude para slides, prototipos y one-pagers. Y si querés ver dónde encaja frontend-design dentro de un stack productivo end-to-end de creator, leé las mejores Claude skills para 2026 con las 28 que disparo a diario.
¿Querés tus devs entregando 3x más con Claude Code?
Sin reescribir el repo. Sin formaciones largas. Sin tocar tu stack.
Preguntas frecuentes sobre skills de Claude para diseño
Las skills son archivos Markdown estructurados que extienden el comportamiento de Claude Code y otros agentes (Cursor, Codex, Gemini CLI) con conocimiento especializado de un dominio. La documentación oficial vive en docs.anthropic.com/en/docs/claude-code y el repo público de Anthropic con las skills oficiales es github.com/anthropics/skills. Para diseño la diferencia es brutal: sin skill, Claude default-ea a paletas violetas con Inter sobre fondo blanco. Con skill, sabe distinguir entre brutalist, editorial y refined minimal, conoce OKLCH, easing curves y stagger. Si recién empezás a customizar Claude, mirá primero el diccionario de Claude Code con 8 conceptos clave y la guía sobre cómo armar tu carpeta Claude desde cero para entender dónde van los archivos.
Empezá por frontend-design porque es la base oficial de Anthropic y le da a Claude el framework conceptual (purpose / tone / constraints / differentiation) que las otras dos asumen. Vive en github.com/anthropics/skills y está documentada en la referencia oficial de skills. Una vez instalada, sumás impeccable (github.com/pbakaus/impeccable) para tener los 23 comandos slash que mandás cuando ya hay algo en pantalla y querés iterar: /impeccable critique, /impeccable bolder, /impeccable polish. Y al final agregás design-motion-principles (github.com/kylezantos/design-motion-principles) para que Claude audite tus animaciones contra tres filosofías reales. Si solo vas a instalar una, que sea impeccable: extiende frontend-design en vez de reemplazarla, y al cargar también traes los 7 dominios de referencia bundleados. Para contexto extra mirá la guía de cómo armar tu carpeta Claude desde cero.
Frontend-design es la skill oficial de Anthropic y vive en github.com/anthropics/skills: es un único archivo SKILL.md que le da a Claude el manifiesto estético (typography, color, motion, spatial composition, backgrounds) y lo entrena para evitar el "AI slop". Es la base. Impeccable, creada por Paul Bakaus y publicada en github.com/pbakaus/impeccable bajo licencia Apache 2.0, es un superset: arranca desde frontend-design y le suma 23 slash commands + 7 archivos de referencia por dominio (typography, color & contrast, spatial design, motion design, interaction design, responsive design, UX writing). Si frontend-design es el "norte estético", impeccable es el "vocabulario operativo". El sitio oficial con todos los bundles por agente es impeccable.style. Anti-pattern: no instales solo impeccable saltando frontend-design — perdés el contexto base que impeccable referencia.
Es un auditor de animaciones publicado en github.com/kylezantos/design-motion-principles bajo licencia MIT, creado por @kylezantos. En vez de aplicar reglas universales, evalúa el código desde tres filosofías distintas según el contexto del proyecto. Emil Kowalski (Linear, ex-Vercel, emilkowal.ski) aporta el principio de restraint y velocidad: "should this animate at all?". Jakub Krehel (jakub.kr) aporta el production polish, la sutileza profesional de apps consumer ya shippeadas. Jhey Tompkins (@jh3yy) aporta la experimentación creativa CSS para sitios playful, kids apps y portfolios. El skill detecta el tipo de producto y elige qué filosofía priorizar: un dashboard fintech va por Emil, un portfolio creativo por Jhey. Nota: el skill no está endorsed por los tres designers, draws from su trabajo público (cursos, artículos, repos).
Los 23 comandos están agrupados por momento del workflow. Para arrancar un proyecto: /impeccable teach (gather context, escribe PRODUCT.md + DESIGN.md), /impeccable shape (plan UX antes de codear), /impeccable craft (full flow: shape → build → iterar). Para iterar sobre algo ya construido: /impeccable critique (review de hierarchy, clarity, emotional resonance), /impeccable audit (checks técnicos de a11y + performance + responsive), /impeccable polish (final pass + design system alignment). Para mover el dial cuando algo se siente off: /impeccable bolder, /impeccable quieter, /impeccable distill, /impeccable delight. Para rubros específicos: /impeccable typeset, /impeccable colorize, /impeccable layout, /impeccable animate, /impeccable adapt. Lista completa en el README oficial de impeccable y bundles por agente en impeccable.style. Si ya usás Claude Code intensivamente, complementá con las 5 herramientas pro para Claude Code y la guía del plugin Caveman para ahorrar tokens.
Las tres skills son agent-agnostic. frontend-design se instala como plugin de Anthropic con /plugin marketplace add anthropics/skills adentro de Claude Code, pero el SKILL.md del repo anthropics/skills también funciona pegado en .cursor/rules/, .codex/skills/ o el directorio equivalente de cualquier agente que respete el formato. Impeccable soporta oficialmente Claude Code, Cursor, Codex CLI, Gemini CLI, VS Code Copilot, Antigravity, Kiro, OpenCode y Pi según el sitio impeccable.style: corré npx skills add pbakaus/impeccable y auto-detecta el agente. Design-motion-principles se instala con npx add-skill kylezantos/design-motion-principles desde el repo de Kyle Zantos y también auto-detecta. La portabilidad es uno de los argumentos fuerte de skills sobre rules propietarias. Si todavía no tenés Claude Code abierto, leé 3 cosas que hacer antes de abrir Claude Code primero.
Se apilan, no se pisan, porque atacan capas distintas del problema. Frontend-design te da el norte estético: cuándo brutalist, cuándo refined, cuándo maximalist (ver SKILL.md oficial). Impeccable te da el vocabulario operativo y los slash commands para iterar: "polish this", "make it bolder", "distill to essence" según el README de impeccable. Design-motion-principles te da el criterio para auditar las animaciones contra tres filosofías reales en vez de aplicar transition: all 0.3s ciegamente. Workflow típico: arrancás con /impeccable craft (el norte lo da frontend-design por debajo), iterás con /impeccable critique y /impeccable polish, y antes de mergear pedís un audit de motion con design-motion-principles. Tres herramientas, un solo agente. Para entender el contexto de modelos detrás de todo esto, mirá Claude Opus 4.7, el nuevo modelo más fuerte del mundo.
Fuentes e inspiración
Mirá los posts originales donde desarrollamos estas ideas en redes.
