12 Skills gratuitos que arreglan el diseño AI Slop

Fuente Inter. Degradado morado. Tarjetas redondeadas con sombras. Cuando empecé a programar con vibe coding, el verdadero cuello de botella nunca fue el código. Fue el diseño. Cada interfaz generada por IA parecía salida de la misma fábrica de plantillas.

Un solo archivo SKILL.md cambia la forma en que el agente piensa sobre el diseño. He instalado y probado decenas de skills de diseño en los últimos meses. La mayoría los eliminé en menos de una semana porque entraban en conflicto entre sí o producían mejoras marginales. Los 12 que aparecen a continuación son los que realmente se quedaron.

Por dónde empezar

El plugin oficial frontend-design de Anthropic es la base. Viene incluido con Claude Code y establece reglas fundamentales para layout, tipografía y elección de colores. Sin él, el agente recurre por defecto a la misma combinación de Inter + degradado morado cada vez. Piensa en esto como el suelo, no el techo.

Impeccable amplía el plugin oficial con 20 slash commands: /polish, /audit, /distill, /bolder, /quieter, y más. Cada uno aborda un aspecto concreto del diseño. /audit ejecuta una revisión exhaustiva de calidad en accesibilidad, temas y breakpoints responsive. /distill reduce un componente a lo esencial. Yo uso /polish antes de cada deploy como pasada final.

Controlar la intensidad del diseño

Taste Skill adopta un enfoque diferente. En lugar de slash commands, utiliza tres variables numéricas como DESIGN_VARIANCE para controlar cuánto se desvía el agente de los valores por defecto. Ponlo bajo para interfaces corporativas conservadoras. Súbelo para landing pages experimentales. La granularidad es útil, aunque encontrar el punto óptimo requiere algo de prueba y error. Mi primer intento con varianza alta produjo algo que parecía una página de MySpace de 2006.

Iconos y recursos visuales

Better Icons conecta más de 150 colecciones de iconos con más de 200.000 iconos en total. Buscas por palabra clave y sincroniza el SVG directamente en tu proyecto. Antes de esto, descargaba iconos manualmente de cinco sitios diferentes. La calidad de búsqueda varía según la colección, pero para iconos de UI comunes, encuentra la coincidencia correcta rápidamente.

Inteligencia de diseño a nivel de componente

UI Design Brain contiene principios de diseño para más de 60 componentes en cinco estilos de diseño. Le indica al agente cómo debe comportarse un modal en un sistema minimalista frente a uno glassmorphic. Este nivel de especificidad importa porque las instrucciones genéricas de “haz que quede bien” producen resultados genéricos.

UI UX Pro Max va más allá: más de 50 estilos de diseño, 97 combinaciones de paletas de color, 57 emparejamientos tipográficos y razonamiento específico por sector para más de 160 tipos de producto. El alcance es ambicioso. Sinceramente, la cantidad de opciones puede ralentizar la generación si no limitas el contexto. Yo normalmente establezco el estilo y la paleta de forma explícita en lugar de dejar que el agente elija.

Revisión y puertas de calidad

agent-skills de Vercel incluye un conjunto de reglas de revisión de UI con más de 100 checkpoints. Evalúa la consistencia del espaciado, el contraste de color, los estados de interacción y el comportamiento responsive. Ejecutar esto después de la fase de diseño detecta problemas que se ven bien en un portátil pero se rompen en móvil.

UI Skills añade comprobaciones de calidad específicas para Tailwind. Comandos como /baseline-ui garantizan un uso consistente de clases de utilidad, y /fixing-accessibility ejecuta una auditoría de accesibilidad enfocada. Si tu stack está basado en Tailwind, esto cubre un vacío que los skills de diseño generales no alcanzan.

Cobertura completa del flujo de trabajo

Designer Skills Collection es el paquete más completo de esta lista: 63 skills y 27 comandos que cubren todo el flujo de trabajo de diseño, desde el wireframe hasta producción. Es dogmático, lo que significa que ocasionalmente entra en conflicto con otros skills. Tuve que desactivar algunas reglas solapadas para evitar que el agente recibiera instrucciones contradictorias.

Design Plugin aplica principios de diseño a nivel de código. En lugar de sugerir mejoras, bloquea patrones que violan tu design system configurado. Esto es útil en equipos donde varias personas dan prompts al mismo agente.

El aspecto premium

Super Design se centra en tipografía premium y whitespace generoso. Orienta al agente hacia elecciones que transmiten gama alta: tamaños de fuente más grandes, márgenes más amplios, paletas de color contenidas. Los resultados se ven notablemente más pulidos, aunque el whitespace puede ser excesivo en páginas con mucho contenido.

Make Interfaces Feel Better se enfoca específicamente en micro-interacciones. Estados hover, transiciones de carga, comportamientos de scroll, feedback de botones. Estos pequeños detalles son lo que separa “queda bien” de “se siente bien”. Noté la mayor mejora percibida en calidad con este skill en comparación con cualquier otro de esta lista.

Qué no funcionó

No todas las combinaciones conviven bien. Instalar los 12 simultáneamente creó instrucciones contradictorias que confundieron al agente. La configuración práctica es apilar tres o cuatro skills que cubran diferentes aspectos: uno para reglas fundamentales, uno para guía a nivel de componente, uno para revisión y uno para el hueco estético concreto de tu proyecto.

También descubrí que los skills que apuntan a la misma capa (como dos sistemas de paletas de color que compiten entre sí) se anulan mutuamente. Elige uno por cada aspecto y mantente fiel a él.

Los 12 son gratuitos. Empieza con el plugin oficial frontend-design e Impeccable, y después añade según dónde tu resultado siga pareciendo genérico. Y elimina Inter de tu font stack.