Tres skills que le enseñan a Claude Code a no diseñar feo

Si llevas un tiempo desarrollando con Claude Code, ya habrás notado el patrón: cuando le pides «que la interfaz quede bonita», te entrega lo más probable. Lo más probable es lo que ha visto miles de veces. Y lo que ha visto miles de veces es genérico. Resultado: UI plausible, sin personalidad, sin tensión visual, sin criterio.

El problema no es de capacidad del modelo. Es de vocabulario. Claude Code no tiene un sistema de creencias estéticas. No tiene preferencias entre easing curves. No sabe distinguir entre tipografía de revista y tipografía de panel de control. Pedirle «que quede bonito» es regalarle el problema.

La buena noticia es que esto se puede arreglar. Tres skills externas, publicadas en las últimas semanas, le dan a Claude Code precisamente eso: vocabulario visual concreto, comandos para auditar UI, y un marco de referencia que evita el slop. Las tres se instalan con un comando.

Cómo se instalan

El comando universal es este:

npx skills add <usuario/skill>

Si por lo que sea ese flujo falla, hay alternativa desde dentro de Claude Code con /plugin marketplace add <slug>. Necesitas tener el CLI de skills instalado previamente. Con eso basta.

Emil Kowalski — motion y microinteracciones

El primer skill es de Emil Kowalski, ingeniero en Linear y autor de librerías ampliamente usadas como Sonner y Vaul. Su skill se centra en algo que casi todos los modelos hacen mal por defecto: motion.

Comando de instalación:

npx skills add emilkowalski/skill

Lo que aplica:

• Transiciones por debajo de 300 ms en interacciones frecuentes.
• Easing personalizado en lugar de los defaults de CSS.
• Validación sistemática de los estados de hover, focus y micro-feedback.

El resultado se nota especialmente en componentes que ya están funcionalmente terminados pero arrastran animaciones torpes. El skill audita y corrige sin meterse en la lógica.

Impeccable — vocabulario de diseño completo

El segundo skill es de Paul Bakaus, ex-Google, ex-Disney, ex-Unity. Impeccable se vende a sí mismo como «Design Language for AI» y es probablemente el que da resultados más visibles más rápido.

Instalación:

npx skills add pbakaus/impeccable

Cubre siete dominios de diseño y expone 23 comandos. Los más útiles en el día a día son cuatro:

• /impeccable audit — informe priorizado de los problemas visuales detectados en toda la UI.
• /impeccable polish — aplica fixes sin tocar la lógica de la aplicación.
• /impeccable typography — solo tipografía: ritmo vertical, jerarquía, contraste.
• /impeccable spacing — solo espaciado: paddings, margins, ritmo horizontal.

Por debajo identifica 27 anti-patterns deterministas: fuentes sobreusadas, contraste deficiente, ritmo vertical roto, line-height incoherente entre niveles, padding asimétrico sin razón. Cosas que cualquier diseñador senior detectaría en cinco minutos y que Claude Code, sin este skill, deja pasar.

Taste Skill — framework de estilos visuales

El tercer skill es de Leon Lin y blueemi. Se posiciona como «The Anti-Slop Frontend Framework for AI Agents» y es el más conceptual de los tres.

Instalación:

npx skills add Leonxlnx/taste-skill

En lugar de auditar lo que ya hay, te obliga a elegir un lenguaje visual antes de empezar. Las variantes disponibles son:

• soft-skill — estética cálida, bordes redondeados, paletas pastel.
• minimalist-skill — máxima reducción, espacio blanco, foco en tipografía.
• brutalist-skill (en beta) — contraste fuerte, sin redondeos, jerarquía agresiva.
• image-to-code-skill — para arrancar a partir de una referencia visual.
• output-skill — control fino del output final.
• brandkit — adaptación a un brand kit existente.

Está en beta v2, así que en algunos entornos puede requerir reintentos o el fallback con /plugin marketplace. Pero la idea es la correcta: si no decides primero qué tipo de estética quieres, el modelo decide por ti, y siempre decide hacia el promedio.

En qué orden aplicarlas

Las tres se solapan parcialmente. Si las activas todas a la vez, vas a tener fricción entre ellas. Lo razonable es una secuencia:

1. Instalar las tres. Tenerlas disponibles sin activarlas todas.
2. Empezar con Impeccable. Es la que da resultados más visibles más rápido sobre proyectos que ya existen. Un /impeccable audit sobre una UI mediocre suele revelar 15-20 problemas accionables en menos de un minuto.
3. Pasar a Emil Kowalski. Cuando la estructura visual ya está pulida, las animaciones se notan más. Es el momento de meterle motion.
4. Reservar Taste Skill para proyectos nuevos. Donde aún no hay UI definida y conviene fijar lenguaje visual antes de escribir CSS.
5. Aplicar una skill a la vez. No las combines en el mismo turno. El modelo se confunde y tú no sabes qué hizo qué.

Por qué esto importa más en 2026 que hace un año

El argumento «vibe coding» se ha normalizado. Cualquiera con Claude Code monta una app funcional en una tarde. La diferenciación ya no está en si funciona o no, sino en si parece diseñada por alguien con criterio o por un modelo que promedió mil ejemplos.

Estas skills, en conjunto, son lo más parecido a contratar a tiempo parcial a un diseñador senior que te audite los pull requests. No sustituyen a un diseñador real cuando el proyecto lo merece, pero suben el suelo de calidad lo suficiente como para que cualquier dev produzca UI presentable sin pedirle ayuda al equipo de diseño.

Y eliminan el síndrome de «todas las apps generadas por IA parecen la misma app». Que no es poco.

Recursos

• Repo Emil Kowalski: github.com/emilkowalski/skill
• Repo Impeccable: github.com/pbakaus/impeccable · Web: impeccable.style
• Web Taste Skill: tasteskill.dev

Las tres son gratuitas y open source. Las tres se instalan en menos de un minuto. El único coste es probar.