Mejores Skills de IA para Diseño Web: Agent Skills Comparadas (2026)

Esto no va del currículum. Las mejores skills de IA para diseño web en 2026 son las Agent Skills: paquetes de instrucciones en SKILL.md que hacen que los agentes de programación con IA produzcan mejor diseño web en lugar del típico AI slop. Son gratuitas, de código abierto, y hay un camino de 0 $/mes para empezar esta misma noche. Comparé las 11 skills que de verdad importan según números de adopción, alcance y encaje para desarrolladores en solitario. Esto es lo que instalaría, lo que me saltaría y los problemas que nadie más menciona.

Por qué todas las webs hechas con IA se parecen: las señales del AI slop

Ya las has visto. Todos los agentes de codificación con IA se entrenaron con el mismo corpus de plantillas SaaS, así que los agentes sin protección emiten las mismas señales una y otra vez:

• Inter por todas partes: la fuente por defecto que grita “no elegí esto”
• Gradiente de morado a azul en el hero sin jerarquía clara
• Card dentro de card: rectángulos redondeados anidados que contienen más rectángulos redondeados
• Icono en pastilla redondeada sobre cada encabezado: los mismos iconos de Lucide/Phosphor en círculos pastel
• Texto gris sobre fondos de color: suspende el contraste, queda “suave” en las capturas y es ilegible a la luz del día
• Los tres looks por defecto de la IA: la propia advertencia de Anthropic: crema + serif + terracota, casi negro + acento ácido, o línea fina de periódico. Todos los modelos convergen en estos.

Esto pasa porque los modelos optimizan hacia el centro estadístico de sus datos de entrenamiento. El resultado es un valle inquietante del diseño: técnicamente correcto, estéticamente idéntico, reconocible al instante como “esto lo hizo una IA”.

Las skills son la palanca más barata contra esto. Un archivo SKILL.md de 200 líneas puede anular estos valores por defecto a nivel de agente. Sin Figma, sin repo de sistema de diseño, sin contratar un diseñador para tu proyecto paralelo.

¿Qué son las Agent Skills? SKILL.md, divulgación progresiva y por qué ganan a los prompts

Una Agent Skill es una carpeta que contiene un archivo SKILL.md. Ese es el corazón del sistema. El archivo tiene frontmatter YAML (name + description) seguido de instrucciones en markdown. Los subdirectorios opcionales scripts/, references/ y assets/ te permiten enviar comprobaciones deterministas, imágenes de referencia y código de ayuda junto con las instrucciones.

El mecanismo que hace que esto funcione es la divulgación progresiva, que mantiene el coste de contexto casi en cero hasta que realmente necesitas la skill:

1. Fase 1 (arranque): solo se cargan el name y la description del frontmatter, unos 100 tokens por skill. Instalar 10 skills añade ~1.000 tokens a tu contexto. Despreciable.
2. Fase 2 (activación): cuando una tarea coincide con la descripción, el agente lee las instrucciones completas del SKILL.md. Normalmente menos de 5.000 tokens.
3. Fase 3 (bajo demanda): los scripts, archivos de referencia y assets enlazados se cargan solo cuando las instrucciones los piden.

Esto supera a amontonar reglas en un system prompt porque las skills son componibles (mezcla y combina), portables (el mismo archivo funciona en Claude Code, Codex, Gemini CLI y Cursor) y eficientes en contexto (las skills inactivas casi no cuestan nada).

Esta es la pinta de una skill mínima:

# .claude/skills/my-design-taste/SKILL.md
---
name: my-design-taste
description: Apply my typography and color rules to any UI. Use when building or styling pages.
---
1. Ancho máximo del texto de cuerpo: 65ch.
2. Usa tabular-nums en columnas de precios.
3. Nada de Inter — usa Geist, Satoshi o la fuente del proyecto.
4. Área mínima de toque: 44px.
5. Sin negro puro (#000) — usa #1a1a1a para texto oscuro.

Y ya está. Cinco reglas, y tu agente las seguirá cada vez que construya un componente de UI.

Anthropic creó el estándar Agent Skills en octubre de 2025 y lo publicó como estándar abierto en diciembre de 2025. Hoy lo adoptan Claude Code, Codex CLI, Gemini CLI, Cursor, GitHub Copilot y más de 50 agentes. El sitio agentskills.io tiene la especificación completa. Si quieres profundizar en la construcción de agentes en sí, mira cómo construir tu propio agente de IA con Mastra. Las skills son una capa de un ecosistema más amplio que también incluye los patrones de herramientas de Mastra vs MCP.

Las mejores skills de IA para diseño web, ordenadas: 11 skills comparadas

Las ordené por adopción (instalaciones de skills.sh), mantenimiento reciente, alcance y encaje para desarrolladores en solitario. Las cifras de estrellas e instalaciones son una foto de agosto de 2026. Irán cambiando.

frontend-design: la skill oficial de diseño frontend (Anthropic)

La original. Más de 277K instalaciones totales según la auditoría de Composio de marzo de 2026, del repo anthropics/skills (171.9K estrellas). Esta skill prohíbe explícitamente las fuentes sobreusadas (Inter, Roboto, Arial, Space Grotesk) y empuja una dirección estética audaz. Avisa de los tres looks por defecto de la IA y obliga al agente a elegir algo distintivo. Si no sabes por dónde empezar, empieza aquí. Es la base de la que evolucionaron las demás, y la mantiene el propio equipo de Anthropic.

Impeccable: 59 reglas deterministas contra el AI slop

63K estrellas, 142K instalaciones en la skill principal. Es la opción de “fiabilidad aburrida”, y lo digo como cumplido. Impeccable trae 23 comandos, 59 reglas de detección deterministas, iteración en vivo en el navegador, hooks de diseño y archivos de contexto PRODUCT.md/DESIGN.md. Funciona en 14 harnesses, incluidos Claude Code, Codex, Gemini CLI, Cursor, Copilot e incluso Kiro AI IDE.

La función estrella: npx impeccable detect src/ ejecuta 59 reglas y saca JSON con códigos de salida. Puedes gatear un pipeline de CI contra el AI slop. Licencia Apache-2.0.

npx impeccable install    # requiere Node 22.12+
npx impeccable init       # escribe PRODUCT.md + DESIGN.md
npx impeccable detect src/ # 59 reglas, salida JSON, códigos de salida

Las skills de Emil Kowalski: movimiento y pulido de interacciones

32.8K estrellas, 967K instalaciones totales entre 12 skills en skills.sh. La principal, emil-design-eng, acumula 231.8K instalaciones por sí sola. Emil es ex-Vercel/Linear, autor de Sonner, Vaul y animations.dev.

Esta skill es de movimiento puro: diagrama de decisión de easing (entrada = ease-out, morfosis en pantalla = ease-in-out, hover = ease, velocidad constante = linear), tablas de duración (micro 100-150ms, estándar 150-250ms, modales 200-300ms, salida ~20% más rápida), trucos de scale(0) vs scale(0.95) y áreas mínimas de toque de 44px. La mejor opción para proyectos que necesitan pulir interacciones, no solo maquetar.

taste-skill: el framework frontend anti-slop

81.1K estrellas. La reescritura v2 funciona en tres fases: inferencia del brief → dirección de diseño → envío de UI sin plantillas. La sección 2 mapea briefs a sistemas de diseño consolidados (Material, Fluent, Carbon, Polaris y otros). La sección 8 cubre el protocolo de modo oscuro. La sección 11 tiene un protocolo de rediseño. La sección 14 es una comprobación previa al vuelo. El nombre de instalación es design-taste-frontend.

web-design-engineer: recetas de diseño ancladas a sistemas reales

11K estrellas, de ConardLi/garden-skills. La versión 1.3.0 trae una lectura de diseño de cinco diales, una lista de bloqueo de clichés y 25 recetas de estilo ancladas a productos reales: Linear, Aesop, Stripe Press, Bloomberg, Mid-Century y más. Construida a partir del system prompt de Claude Design. La opción de “referenciar productos reales”. Cuando quieres que tu agente entienda “hazlo como Stripe Press” y obtenga algo cercano de verdad, esta es la que instalas.

ui-ux-pro-max: más de 50 estilos y 161 paletas contrastadas

121.5K estrellas. El todoterreno: más de 50 estilos, 161 paletas (todas con contraste verificado), 57 combinaciones tipográficas, 99 directrices UX, 25 tipos de gráficas y un generador de sistemas de diseño. Amplitud sobre foco. Si quieres una sola skill que cubra cualquier escenario de diseño, es esta. Ten en cuenta que la amplitud implica una huella de contexto mayor al activarse.

La suite better-* de Jakub Krehel: flujo de revisión de interfaces

4.5K estrellas, 83K instalaciones totales en skills.sh. Once skills centrales: better-ui, better-typography, better-colors, better-layout, better-accessibility, better-writing, interface-review, variant, break y más. El flujo de “revisar primero” es lo que la diferencia: revisa cambios sin commitear o un PR, elige variantes, explora estados de “ruptura”. La opción de “iterar, no generar”, para desarrolladores que ya tienen un diseño y quieren mejorarlo en vez de empezar de cero.

Las designer skills de Owl-Listener: el pack del proceso de diseño completo

2.3K estrellas, 241 skills en 5 colecciones (107 skills de diseño, 32 comandos, 9 plugins). Creadas por MC Dean. Es el pack de proceso: design-research, ux-strategy, ui-design, interaction-design, design-ops, visual-critique. Comandos como /visual-critique:critique-screen y /design-ops:handoff. La opción de “práctica de diseño completa”, pensada para equipos con un proceso de diseño estructurado, no para desarrolladores en solitario que buscan un arreglo rápido.

tastemaker: cálculo de contraste y memoria de gusto persistente

223 estrellas, pequeña pero única. Usa Python 3 + Pillow para scripts deterministas. La matriz de contraste ejecuta cálculo WCAG real, genera una paleta fresca por proyecto y escribe .tastemaker/style-lock.md más ~/.tastemaker/profile.md para una memoria de gusto persistente entre proyectos. La opción de “accesibilidad primero, con matemáticas”. Hay un nivel de patrocinio opcional de 8 $/mes para “Aesthetic Modes” en Polar, pero el núcleo es gratis.

Las skills de Meng To: WebGL, juegos y amplitud

5.5K estrellas, más de 120 recetas que cubren WebGL, Three.js, desarrollo de juegos, animaciones GSAP y diseño web estándar. Parte del ecosistema Aura Build. La opción de amplitud: cuando necesitas escenas Three.js o desarrollo de juegos junto al diseño web estándar. Los archivos de las skills son gratis; algunos assets de Aura Build son de pago.

landing-page-design: el punto de partida minimalista

1.4K estrellas, de elayadesign/ai-design-skills. Una skill (landing-page-design) más un repo aparte, redesign-skill. La sección “design-vals” más simple posible al final del archivo. Buena como ejemplo didáctico. Lee el código fuente de esta skill para entender el formato y luego construye la tuya. La opción de “inicio absolutamente mínimo”.

Cómo elegir la mejor skill de diseño frontend para tu agente

No lo instales todo. La queja número uno en todos los hilos sobre skills es la solapación: cuatro skills con reglas contradictorias peleándose por el control de la salida de tu agente. Mi recomendación: una principal + una de movimiento (si la necesitas) + una auditora. Y ya.

npx skills add anthropics/skills -s frontend-design
# o
npx skills add Leonxlnx/taste-skill

npx skills add emilkowalski/skills

npx impeccable install

npx skills add anthropics/skills -s frontend-design

Otros mapeos: flujos de revisión/iteración → la suite better-* de Jakub. Proceso de diseño completo para equipos → Owl-Listener. WebGL y 3D → Meng To. Cálculo de accesibilidad y tokens de marca → tastemaker. Referenciar productos reales → web-design-engineer.

Claude Code y las design skills: soporte por agente comparado (Codex, Gemini, Cursor)

No todos los agentes tratan las skills igual. “Funciona en todo” es una afirmación de marketing. Esta es la realidad.

Si quieres probar varios agentes sin malgastar en suscripciones, Agent Router da acceso unificado a Claude Code, Codex y Gemini CLI desde una sola interfaz. Para una comparación más amplia de herramientas de programación con IA, mira las mejores herramientas de IA para programar en 2026.

Cuánto cuesta usar skills de IA para diseño web: el camino de 0 $/mes

Las skills en sí cuestan 0 $. Todos los repos listados aquí tienen licencia MIT o Apache-2.0. Sin claves de API, sin suscripciones, sin “nivel premium” que gatee los archivos de las skills.

El coste es la suscripción al agente. Aquí está la escalera de presupuesto:

Una historia de advertencia: en abril de 2026, Anthropic probó en secreto mover Claude Code a solo-Max (100–200 $/mes) para un 2% aproximado de nuevos registros. Lo revirtieron el mismo día tras la reacción — Simon Willison lo documentó en detalle. El lead de Codex prometió públicamente disponibilidad free+Plus. La lección: las skills portables que funcionan en varios agentes te protegen de los juegos de precios de los proveedores. Si exploras opciones de modelos baratos, mira por qué las suscripciones a Claude Code o Gemini CLI son mala idea y alternativas de LLM open source asequibles. Para una vía barata con clave de API, la reseña de OpenCode Go: 18 modelos de IA por 10 $/mes cubre una opción sólida.

Realidad operativa: las skills son markdown y scripts pequeños. Claude Code, Codex y Gemini CLI funcionan sin problemas en un Hetzner VPS — la clase de 5–10 $/mes, 4–8 GB de RAM, Node 22+. Sin GPU. Mantén las skills en tu repo (.claude/skills/ commiteado = equipo y CI reproducibles). 1–2 GB de swap ayudan cuando corren Playwright pesados.

Chuleta de instalación: comandos npx skills por agente

# Instalador universal (auto-detecta el agente)
npx skills add emilkowalski/skills
npx skills add pbakaus/impeccable
npx skills add ConardLi/garden-skills -s web-design-engineer
npx skills add Leonxlnx/taste-skill
npx skills add jakubkrehel/skills

# O usa los marketplaces de plugins
/plugin marketplace add pbakaus/impeccable
/plugin marketplace add emilkowalski/skills
/plugin marketplace add jakubkrehel/skills
/plugin marketplace add Owl-Listener/designer-skills
/plugin marketplace add codeswithroh/tastemaker
/plugin install tastemaker@codeswithroh

# Verificar
npx skills list

# Las skills van en .agents/skills/ (repo) o ~/.agents/skills/ (usuario)
npx skills add emilkowalski/skills
npx skills add pbakaus/impeccable

# El instalador dedicado de Impeccable (recomendado)
npx impeccable install
# Luego abre /hooks y aprueba el hook del proyecto

# Skills curadas del registro
$skill-installer linear

# Verificar
npx skills list

# Las skills necesitan la build preview
npm i -g @google/gemini-cli@preview

# Activa Skills en /settings, luego:
gemini skills install https://github.com/codeswithroh/tastemaker --path skills/tastemaker
npx skills add emilkowalski/skills
npx skills add anthropics/skills -s frontend-design

# Verificar
/skills list

# Requiere canal Nightly + toggle "Agent Skills" en Settings → Rules
# Las skills van en .agents/skills/ o .cursor/skills/
npx skills add emilkowalski/skills
npx skills add anthropics/skills -s frontend-design

# Aviso: la conversión .mdc pierde scripts/ y references/
# Comprueba que la skill realmente cargó antes de fiarte de la salida

Usa npx skills find web-design para buscar más skills en el registro. Usa npx skills list tras cualquier instalación para confirmar qué está activo.

Cómo verificar que una skill cargó y hizo algo

Instalar una skill y asumir que funciona es acabar con el mismo AI slop, más una falsa sensación de seguridad. Verifica.

El bucle de feedback visual es el paso de verificación con mayor palanca. En Claude Code, usa la skill webapp-testing o un servidor MCP de Playwright para capturar la salida y comparar. Para pipelines de CI, npx impeccable detect --json . > design-report.json te da códigos de salida sobre los que gatear.

Si la skill cargó pero la salida sigue mal, la description del frontmatter probablemente es demasiado vaga. Reescríbela con activadores explícitos: “Úsala al construir landing pages, secciones de precios, heroes o cualquier UI de marketing” gana a “Aplica reglas de diseño”.

Footguns de las skills de IA: conflictos, confianza de hooks, Node 22, presupuesto de contexto

Construye tu propia skill de diseño web en 10 minutos

No necesitas instalar la skill de otro. Escribir la tuya es la forma más rápida de entender el formato — y la mejor manera de codificar preferencias que ya tienes.

mkdir -p .claude/skills/my-design-taste

Crea .claude/skills/my-design-taste/SKILL.md:

---
name: my-design-taste
description: Aplica mis reglas de tipografia, color y movimiento a cualquier UI. Usar al construir o estilizar paginas, componentes o secciones.
---

## Tipografía
1. Ancho máximo del texto de cuerpo: 65ch. Nunca a todo el ancho en escritorio.
2. Usa tabular-nums en columnas de precios y tablas de datos.
3. Ni Inter, Roboto, Arial ni Space Grotesk. Usa Geist, Satoshi o la fuente declarada del proyecto.
4. Interlineado: 1.5 para cuerpo, 1.2 para encabezados. Ni más apretado.

## Color
5. Sin negro puro (#000) — usa #1a1a1a para texto oscuro, #fafafa para fondos claros.
6. El texto gris debe pasar contraste WCAG AA (4.5:1) contra su fondo.
7. Un color de acento como máximo. Sin gradientes morado-a-azul salvo que la marca lo exija.

## Movimiento (reglas de easing de Emil Kowalski)
8. Animaciones de entrada: ease-out. Morfosis en pantalla: ease-in-out. Hover: ease. Velocidad constante: linear.
9. Duración: micro-interacciones 100–150ms, transiciones estándar 150–250ms, modales 200–300ms.
10. Animaciones de salida: ~20% más rápidas que la entrada. Las transiciones de UI deben quedar bajo 300ms.

## Layout
11. Área mínima de toque: 44px × 44px.
12. Sin cards dentro de cards. Un nivel de contención como máximo.
13. Sin iconos en pastillas redondeadas sobre los encabezados. Usa espacio en blanco, no decoración.

Eso es una skill funcional. Usa npx skills init para andamiar la estructura de carpetas, o pide a la skill skill-creator del repo de Anthropic que genere una a partir de una descripción. El artículo “Agents with Taste” de Emil Kowalski es la mejor referencia de cómo se ve el gusto codificado en la práctica — su diagrama de easing y sus tablas de duración valen la pena robarse.

Las skills amplifican el gusto: mantén al humano en el bucle

Emil Kowalski lo dijo bien: “La IA no reemplaza la experiencia, la amplifica.” Una skill codifica gusto que alguien ya tenía — es un amplificador, no un diseñador. La opinión honesta de la comunidad r/ClaudeCode: “Ninguna skill de diseño creará un diseño propio desde cero… pero las partes de WCAG y utilidades son oro”.

Anthropic lanzó Claude Design en abril de 2026 — un producto de lienzo visual que da a algunos desarrolladores mejores resultados al primer intento que las skills en terminal. Pero las skills son el camino de terminal: sin dependencias, gratis, portables entre agentes, sin vendor lock-in. Ese es el camino bitdoze.

Empieza con una skill. Verifica con comprobaciones deterministas. Mantén a un humano en las decisiones que importan — jerarquía, voz de marca, si el diseño sirve de verdad al usuario. Las skills se encargan de las reglas mecánicas (contraste, espaciado, timing de movimiento, fuentes prohibidas) para que tú te concentres en las decisiones que requieren juicio.

Este artículo también está disponible en inglés: Best AI Skills for Web Design.