3 skills para que Claude Code deje de hacerte diseños de plantilla

Si Claude Code te saca el mismo dashboard genérico una y otra vez, el problema no es el modelo: es que no le has dado un lenguaje visual. Estas tres skills se instalan con un comando y le ponen vocabulario de diseño real. Las tres son verificadas, instalables hoy, y cubren tres cosas distintas: movimiento, vocabulario de UI y estilos visuales curados.

Las 3 skills, comando a comando

Copia y pega en tu terminal (las tres se instalan vía el CLI de skills):

npx skills add emilkowalski/skill
npx skills add pbakaus/impeccable
npx skills add Leonxlnx/taste-skill

Si alguno tarda o se queja de versión, abre Claude Code y prueba la alternativa: /plugin marketplace add <slug>.

---

1. Emil Kowalski — motion + microinteracciones

La skill del tío del equipo web de Linear, autor de Sonner, Vaul y animations.dev. Destila sus artículos en una skill que revisa tu UI buscando errores típicos de motion: easings que no pegan, animaciones largas en acciones de alta frecuencia, transiciones de plantilla.

• Repo: github.com/emilkowalski/skill
• Web: emilkowal.ski/skill
• Comando: npx skills add emilkowalski/skill

Qué te impone (a grandes rasgos):

• Duraciones por debajo de 300ms en interacciones frecuentes.
• Curvas de easing custom en lugar de las default de CSS.
• Tablas before/after cuando revisa código de animación.
• Reglas concretas para hover, focus y micro-feedback.

Prompt de ejemplo

Usa la skill emil-design-eng para revisar el componente
<ruta/al/componente>. Audita:

- Duraciones de transition y animation.
- Easings (marca cualquier ease-in en acciones repetidas).
- Microinteracciones en hover, focus y press.
- Cualquier animación que dure más de 300ms en flujos de alta
  frecuencia.

Devuelve una tabla con código exacto a sustituir y por qué.

---

2. Impeccable — vocabulario de diseño completo

De Paul Bakaus (ex-Google, ex-Disney, ex-Unity). La describe como “Design Language for AI”: 7 dominios (tipografía, color/contraste, espaciado, motion, interacción, responsive, UX writing) y 23 comandos tipo /impeccable audit, /impeccable polish, /impeccable animate. Detecta 27 anti-patterns deterministas: fuentes sobreusadas, gris sobre color, bounce easing fuera de sitio, ritmo vertical roto, etc.

• Repo: github.com/pbakaus/impeccable (sí, pbakaus con dos “a”)
• Web: impeccable.style
• Comando: npx skills add pbakaus/impeccable

Comandos que más se usan:

• /impeccable audit — pasa toda la UI por un filtro y devuelve un informe priorizado.
• /impeccable polish — aplica fixes seguros sin tocar lógica.
• /impeccable typography — solo tipografía (escala, line-height, jerarquía).
• /impeccable spacing — solo ritmo vertical y espaciado.

Prompt de ejemplo

Ejecuta /impeccable audit sobre <ruta/de/la/pagina>. Quiero:

- Los anti-patterns detectados, agrupados por dominio
  (tipografía / color / espaciado / motion).
- Severidad: blocker / mejora / nit.
- Fix concreto por cada hallazgo, con el snippet de CSS exacto.
- Una sección "lo que ya está bien" para no romper lo que funciona.

No toques la lógica de los componentes — solo estilos.

---

3. Taste Skill — framework con varios estilos visuales

Mantenida por Leon Lin y blueemi, se autodefine como “The Anti-Slop Frontend Framework for AI Agents”. No es una skill suelta: es un framework con 12+ skills especializadas y variantes de estilo. La principal (taste-skill) es el default versátil, pero el valor real está en las variantes: soft-skill, minimalist-skill, brutalist-skill (beta), image-to-code-skill, output-skill, brandkit.

• Web: tasteskill.dev
• Comando: npx skills add Leonxlnx/taste-skill
• Estado: beta v2 — si la instalación falla, vuelve a probar en unas horas o usa el fallback /plugin marketplace add Leonxlnx/taste-skill desde dentro de Claude Code.

Idea clave: dejas de pedirle a Claude “que quede bonito” y le das un lenguaje visual concreto (soft, minimalist, brutalist). El output deja de ser un dashboard genérico y empieza a tener carácter.

Prompt de ejemplo

Reescribe la landing de <ruta> usando la variante minimalist-skill
de taste-skill. Reglas:

- Mantén la estructura semántica y el contenido textual.
- Cambia solo tipografía, espaciado, color y composición.
- Sin sombras pesadas, sin gradientes — paleta de máximo 3 colores.
- Tipografía: una sans para UI y una serif sutil para titulares.

Devuelve el HTML/JSX final + 2-3 líneas explicando qué decisiones
de estilo has tomado.

---

Checklist de uso (5 pasos)

1. ✅ Instala las 3 con los comandos de arriba. Verifica que claude agents list (o skills list) las muestra.
2. ✅ Prueba primero Impeccable sobre un proyecto que ya tengas — es la que da resultados visibles más rápido.
3. ✅ Usa Emil Kowalski cuando la app ya tiene buena base y quieres pulir motion (no antes).
4. ✅ Usa Taste Skill cuando arrancas algo nuevo y necesitas elegir lenguaje visual antes de escribir CSS.
5. ✅ No las apliques las tres a la vez sobre el mismo componente: se pisan. Una pasada por skill, en orden.

La regla de oro

Pedirle a Claude “que quede bonito” es regalarle el problema. Dale un lenguaje visual concreto (motion, vocabulario o estilo) y el output deja de ser de plantilla.

---

Sígueme para más trucos con Claude Code e IA → @pabloinpublic

Waitlist de la comunidad → pabloinpublic.com