12 Skills Gratuitos Que Arreglan el Diseño AI Slop

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

Un solo archivo SKILL.md cambia la forma en que el agente piensa sobre el diseño. He instalado y probado docenas 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 siguen 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 al mismo combo de Inter + degradado morado cada vez. Piensen en esto como el piso, no el techo.

Impeccable se construye sobre el plugin oficial con 20 slash commands: /polish, /audit, /distill, /bolder, /quieter, y más. Cada uno apunta a una preocupación específica de diseño. /audit ejecuta una revisión integral de calidad cubriendo accesibilidad, temas y breakpoints responsivos. /distill reduce un componente a lo esencial. Yo uso /polish antes de cada deployment como pasada final.

Controlando la intensidad del diseño

Taste Skill toma un enfoque diferente. En lugar de slash commands, usa tres variables numéricas como DESIGN_VARIANCE para controlar qué tanto se desvía el agente de los valores predeterminados. Pónganlo bajo para interfaces corporativas conservadoras. Súbanlo para landing pages experimentales. La granularidad es útil, aunque encontrar el punto ideal 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. Buscan por palabra clave y sincroniza el SVG directamente en su proyecto. Antes de esto, yo 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 el resultado correcto 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 versus uno glassmorphic. Este nivel de especificidad importa porque instrucciones genéricas de “hazlo bonito” producen resultados genéricos.

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

Revisión y controles de calidad

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

UI Skills agrega verificaciones de calidad específicas para Tailwind. Comandos como /baseline-ui aplican uso consistente de utility classes, y /fixing-accessibility ejecuta una auditoría de accesibilidad enfocada. Si su stack está basado en Tailwind, esto llena un vacío que los skills de diseño generales no cubren.

Cobertura completa del workflow

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

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

El look premium

Super Design se enfoca en tipografía premium y whitespace generoso. Sesga al agente hacia elecciones que se sienten de alta gama: 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 trata específicamente de micro-interacciones. Estados hover, transiciones de carga, comportamientos de scroll, feedback de botones. Estos pequeños detalles son lo que separa “se ve bien” de “se siente bien”. Noté la mayor mejora percibida en calidad con este skill en comparación con cualquier otro de esta lista.

Lo que no funcionó

No todas las combinaciones se llevan bien entre sí. 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 preocupaciones: uno para reglas fundamentales, uno para guía a nivel de componente, uno para revisión y uno para la brecha estética específica de su proyecto.

También descubrí que los skills que apuntan a la misma capa (como dos sistemas de paleta de color compitiendo) se anulan entre sí. Elijan uno por preocupación y comprométanse con él.

Los 12 son gratuitos. Empiecen con el plugin oficial frontend-design e Impeccable, luego agreguen según dónde su output todavía se vea genérico. Y eliminen Inter de su font stack.