Le pides a Claude Code «hazme una landing bonita» y te sale… la de siempre. Degradado de morado a azul, «Welcome to Our Platform», un botón «Get Started» y tres tarjetas con un cohete, un candado y un rayo. Funciona, pero se parece a otras mil.
El problema no es Claude: es lo que le das. Un agente sin criterio de diseño tira por lo más común. Estas tres skills gratis le dan ese criterio.
Las 3 skills y para qué sirve cada una
emil-design-eng
Animaciones de verdad: botones, transiciones y microdetalles con la curva y la duración correctas.
Impeccable
Le dices «púlelo» (polish) y repasa espacios, tipografía y jerarquía. También revisa con audit y critique.
Taste Skill
Dirección de arte y referencias reales para que no salga la landing media de internet.
1. emil-design-eng, la skill de Emil Kowalski
Emil Kowalski es design engineer y el autor de Sonner, una librería de avisos (toasts) muy usada en React. Su repositorio emilkowalski/skills tiene licencia MIT y más de 50.000 estrellas en GitHub.
Según su README, las skills nacen de sus años trabajando en empresas como Vercel y Linear, y existen porque los agentes «no tienen buen gusto»: eligen, por ejemplo, una curva ease-in para una animación de entrada cuando debería ser ease-out, o un borde sólido donde iría una sombra semitransparente. Son detalles pequeños, pero se acumulan.
- emil-design-eng es la principal: sobre todo animación y algunos consejos de diseño.
- En el mismo paquete vienen otras: animate (crea una animación eligiendo curva, duración y propiedades), review-animations (revisa tus animaciones con sus reglas), improve-animations (audita todas las del proyecto), animation-performance (arregla animaciones que van a tirones) y más.
Resultado: botones que responden al pulsarlos, transiciones suaves y esos microdetalles que hacen que todo se sienta premium.
2. Impeccable: «púlelo»
Impeccable (pbakaus/impeccable, licencia Apache-2.0, casi 100.000 estrellas) se define como el vocabulario de diseño para tu agente. Su README lo explica con una lista que te sonará: Inter para todo, degradados de morado a azul, tarjetas dentro de tarjetas… Lo que sale cuando no le das más indicaciones.
En vez de pedir «que quede mejor», le das un comando y un objetivo:
- polish: la pasada final antes de publicar. Es el «púlelo».
- typeset: arregla fuentes, jerarquía y tamaños.
- layout: arregla espacios y ritmo.
- critique: una revisión de usabilidad con puntuación y lo primero que debes arreglar.
- audit: un informe técnico (accesibilidad, rendimiento, temas y adaptación a móvil) con fallos ordenados de P0 a P3.
Tiene 24 comandos en total y un detector de slop con 62 reglas que no usa IA ni clave de API.
Nota
Cómo se usa. Una vez por proyecto ejecutas /impeccable init: lee tu código, te pregunta lo que no puede deducir y escribe un PRODUCT.md. Después pides cosas como /impeccable polish settings o /impeccable critique the pricing cards. Funciona mejor con objetivos concretos (una sección) que con la página entera. Si usas mucho un comando, /impeccable pin audit te crea el atajo /audit.
3. Taste Skill: referencias reales
Taste Skill (Leonxlnx/taste-skill, licencia MIT, más de 100.000 estrellas) ataca justo lo de «Claude tiende a repetir lo mismo». Según su README, hace que el agente diseñe webs y pantallas de app en vez de montar la landing media. Para eso le da tres cosas:
- Dirección de arte: un rumbo visual claro antes de escribir código.
- Fotos reales sacadas de archivos abiertos, con sus créditos.
- Una comprobación en un navegador de verdad para revisar su propio trabajo.
Necesita Node 22 o más nuevo y Chrome, Edge o Chromium instalado. No pide claves de API.
Cómo instalar las tres
Abre la terminal en la carpeta de tu proyecto y lanza cada comando (son los que indica cada repositorio):
# 1. Skills de Emil Kowalski (incluye emil-design-eng)
npx skills@latest add emilkowalski/skills
# 2. Impeccable (después recarga Claude Code y ejecuta /impeccable init)
npx impeccable install
# 3. Taste Skill
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
Consejo
¿Prefieres los plugins de Claude Code? Dentro de Claude Code: para Taste Skill, /plugin marketplace add Leonxlnx/taste-skill y luego /plugin install taste-skill@taste-skill. Para Impeccable, /plugin marketplace add pbakaus/impeccable y después lo instalas desde /plugin.
Atención
El instalador de Impeccable ofrece añadir un hook que revisa cada archivo de interfaz que edita tu agente. Su propio README avisa de que en Claude Code los hooks se ejecutan aunque deniegues los comandos del modelo. Es útil, pero revisa qué instala antes de dejar a Claude trabajando solo.
Pídele a Claude que te las instale
Si no quieres tocar la terminal, copia esto en Claude Code:
Quiero instalar en este proyecto tres skills de diseño para Claude Code:
1. Las skills de Emil Kowalski: npx skills@latest add emilkowalski/skills
2. Impeccable: npx impeccable install (después dime que recargue Claude Code y ejecuta /impeccable init)
3. Taste Skill: npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
Antes de empezar, comprueba que tengo Node.js 22 o más nuevo (node -v) y explícame en una frase qué hará cada comando.
Ve de uno en uno y espera a que te diga «adelante» antes de ejecutar cada uno.
Si algún instalador pregunta por hooks o permisos, para y explícamelo antes de aceptar.Cómo sacarles partido
Un flujo sencillo para tu próxima web:
- Crea con Taste Skill: describe tu negocio, para quién es y qué sensación quieres transmitir.
- Pule con Impeccable:
/impeccable critiquepara ver qué falla y/impeccable polishpara la pasada final. - Anima con la de Emil: pídele que revise las animaciones o que añada microinteracciones donde de verdad aporten.
Misma IA. Resultado de diseñador senior.