Fuente Inter. Gradientes púrpura. Tarjetas con bordes redondeados de 8px y sombras genéricas. Tres columnas perfectamente simétricas. Un puñado de Heroicons. Modo oscuro que es literalmente #000000 con texto blanco.
Si has usado un agente de código para generar una interfaz, conoces esa estética. Es el equivalente visual de la música de ascensor: funcional, inofensiva, completamente olvidable. La comunidad de desarrollo le puso nombre: AI Slop.
Pero en los últimos meses apareció una contraofensiva. Desarrolladores y diseñadores crearon "skills de diseño" — archivos de texto que le enseñan a los agentes de IA a tener buen gusto. No son librerías de componentes. No son frameworks de UI. Son documentos de diseño ejecutables que el agente lee antes de escribir una sola línea de código.
Este artículo desglosa las cinco herramientas principales, cómo combinarlas y cuándo usar cada una.
El problema: por qué los agentes diseñan mal
Los LLMs no tienen criterio estético. Cuando generan una interfaz, aplican patrones estadísticamente probables basados en su entrenamiento. El resultado converge en los mismos lugares comunes una y otra vez porque eso es lo que predomina en los datos.
No es que el modelo sea malo. Es que no tiene restricciones de diseño. Sin un brief, cualquier agente va a producir lo genérico.
La solución no es cambiar de modelo ni escribir prompts más largos. Es darle al agente un archivo de diseño que defina explícitamente lo que querés.
Las herramientas
1. Frontend-Design Skill (Anthropic)
El punto de partida. Es el plugin oficial de Anthropic para Claude Code, con más de 565,000 instalaciones. Un solo archivo SKILL.md de aproximadamente 1,300 tokens que establece reglas fundamentales de diseño: tipografía, color, layout.
Pensalo como el piso, no el techo. Sin este skill, cualquier agente de Claude va directo al combo Inter + púrpura. Con el skill activado, ya tenés una mejora notable en el output base.
Instalación:
claude plugins install frontend-design@claude-code-plugin
Cuándo usarlo: Siempre. Es la capa base sobre la que se construye todo lo demás.
2. Impeccable
Creado por Paul Bakaus (creador de jQuery UI, ex-Google, ex-Creator Pass), Impeccable es un workflow de diseño estructurado para agentes. No es un solo skill — es un lenguaje de diseño completo con 23 comandos, 37 anti-patrones documentados y un proceso de 4 etapas.
Las cuatro etapas del workflow Impeccable:
Teach (Enseñar): Definir el sistema de diseño del proyecto — variables de color, tipografía, espaciado, componentes base. El agente aprende tu lenguaje visual antes de diseñar nada.
Shape (Dar forma): Crear la interfaz con restricciones concretas. Acá usás comandos como /bolder (más audaz), /quieter (más sobrio), /simpler (menos elementos).
Craft (Refinar): Pulir detalles específicos. Comandos como /polish para el pase final de calidad, /distill para reducir un componente a su esencia.
Iterate (Iterar): Revisar y mejorar. /audit ejecuta un chequeo completo de accesibilidad, theming consistente y breakpoints responsive.
Comandos clave:
-
/polish— pase final de refinamiento visual antes de deploy -
/audit— chequeo integral de calidad (accesibilidad, temas, responsive) -
/distill— reduce un componente a lo esencial -
/bolder//quieter— ajusta intensidad visual
Instalación:
npx impeccable@latest init
Cuándo usarlo: Proyectos con interfaz de usuario donde necesitás control granular sobre la calidad visual. Particularmente útil en la fase de refinamiento antes de producción.
3. Taste Skill
Si Impeccable es un workflow completo, Taste Skill es un framework de combate. Su filosofía: "Anti-Slop Frontend Framework" — skills modulares que cubren aspectos específicos del diseño.
La diferencia clave es que usa variables numéricas de control:
-
DESIGN_VARIANCE— qué tanto se desvía el agente de los defaults (bajo para corporate, alto para experimental) -
TYPOGRAPHY_QUALITY— nivel de refinamiento tipográfico -
SPACING_RHYTHM— consistencia en el ritmo de espaciado
Los skills modulares cubren:
- Layout — sistemas de grid, containers, breakpoints
- Typography — escalas, pairing de fuentes, jerarquía
- Motion — transiciones, micro-interacciones, animaciones
- Spacing — ritmo vertical, densidad de información
- Imágenes — skills para generación de imágenes con control de estilo
Instalación:
npx tasteskill@latest init
Cuándo usarlo: Cuando querés control fino sobre aspectos individuales del diseño sin cargar con un workflow completo. Ideal para equipos que ya tienen identidad visual definida pero necesitan que el agente la respete.
4. DESIGN.md
El fenómeno más explosivo del ecosistema. Lanzado el 31 de marzo de 2026, en 10 días acumuló 40,700 estrellas en GitHub. La proporción fork-to-star de 12.6% indica que los desarrolladores no solo miran — están integrando DESIGN.md en producción.
DESIGN.md es un archivo markdown estandarizado con 9 secciones que definen el sistema de diseño completo de un proyecto. El agente lo lee como un brief de diseño ejecutable.
Las 9 secciones del estándar:
- Visual Theme & Atmosphere — intención emocional y visual
- Color Palette & Roles — colores con valores precisos y roles semánticos
- Typography Rules — fuentes, tamaños, interlineados, pesos
- Component Stylings — estados default, hover, active, focus, disabled
- Layout Principles — grid, escala de espaciado, anchos de contenedor
- Depth & Elevation — sombras, z-index, relaciones espaciales
- Do's and Don'ts — restricciones explícitas ("Nunca más de 3 colores en una card")
- Responsive Behavior — breakpoints, stacking, visibilidad condicional
- Agent Prompt Guide — instrucciones directas al agente
Instalación:
npx getdesign@latest add stripe # O cualquier otro sistema de diseño
El repositorio VoltAgent/awesome-design-md tiene más de 60 sistemas de diseño extraídos de productos reales como Stripe, Linear, Vercel, GitHub y Figma. Todos bajo licencia MIT.
Cuándo usarlo: Cuando necesitás consistencia visual entre múltiples pantallas y sesiones de desarrollo. Es la solución para equipos donde varias personas le piden UI al mismo agente.
5. Agents with Taste (Emil Kowalski)
Más que una herramienta, es una filosofía. Emil Kowalski propuso crear skills de diseño por aspecto: un archivo para layout, otro para tipografía, otro para motion. La idea es transferir el "gusto" del desarrollador al agente en piezas modulares.
La diferencia con DESIGN.md es granularidad y control humano. En lugar de un archivo monolítico que describe todo el sistema, creás skills pequeños que reflejan tus preferencias específicas. Si cambiás de opinión sobre cómo deberían verse los modales, editás un archivo de 20 líneas en lugar de reescribir una especificación completa.
Este enfoque inspiró herramientas como Taste Skill y el ecosistema de skills modulares que vino después.
Cómo combinarlos
El error más común es instalar todo junto. Doce skills activos simultáneamente generan instrucciones contradictorias que confunden al agente. Tony Lee, que probó decenas de combinaciones, recomienda una arquitectura de 3-4 capas:
Capa 1 — Fundación:
Frontend-Design Skill de Anthropic. No negocies esto. Es el baseline.
Capa 2 — Sistema de Diseño:
Elegí entre DESIGN.md (si necesitás consistencia multi-pantalla) o Taste Skill (si preferís control modular por aspecto). No uses ambos — compiten en la misma capa.
Capa 3 — Refinamiento:
Impeccable para los pases de calidad. /polish antes de cada deploy. /audit para chequeos de accesibilidad.
Capa 4 — Especialización:
Un skill específico para el punto débil de tu proyecto:
- ¿Micro-interacciones pobres? → Make Interfaces Feel Better
- ¿Iconos inconsistentes? → Better Icons
- ¿Componentes genéricos? → UI Design Brain
- Si usás Tailwind → UI Skills con
/baseline-ui
Cuándo usar cada enfoque
| Situación | Herramienta |
|---|---|
| "Quiero que mi agente deje de hacer todo púrpura con Inter" | Frontend-Design Skill |
| "Necesito consistencia visual en 15 pantallas" | DESIGN.md |
| "Ya tengo identidad visual, quiero control fino" | Taste Skill |
| "El diseño está bien pero se siente barato" | Impeccable /polish + Make Interfaces Feel Better |
| "Quiero que el agente aprenda MIS preferencias" | Agents with Taste (skills por aspecto) |
| "Tengo un equipo donde todos le piden UI al agente" | DESIGN.md + Design Plugin (bloquea violaciones) |
Lo que aprendí usándolos
Después de probar estas herramientas en proyectos reales, tres lecciones:
1. Las skills de diseño son constraints, no sugerencias. El agente las sigue mejor cuando son reglas explícitas ("nunca uses más de 3 colores en una card") que cuando son aspiraciones vagas ("hacelo más moderno").
2. El orden de capas importa. Si ponés un skill de tipografía arriba de uno de layout, el agente puede priorizar mal. Fundación → Sistema → Refinamiento → Especialización. En ese orden.
3. Menos es más. Tres skills bien elegidos producen mejor resultado que doce skills compitiendo. Dos skills en la misma capa se anulan mutuamente.
El futuro
DESIGN.md está convergiendo hacia un estándar de facto para especificaciones de diseño legibles por agentes. Google Stitch ya lo adoptó como formato nativo. La tendencia apunta a que cada proyecto serio de frontend tenga su DESIGN.md en el root del repositorio, al mismo nivel que README.md o package.json.
Las skills de diseño resuelven un problema que los mejores modelos de lenguaje todavía no pueden resolver solos: el criterio estético. No es un problema de capacidad técnica — es un problema de constraints. Dale al agente las restricciones correctas y va a producir interfaces que no solo funcionan, sino que se sienten bien.
Y por favor, sacá Inter de tu font stack.
Top comments (0)