Skills de Claude Code para diseño UI/UX: cuáles sirven y cómo instalarlas

Para diseño UI/UX sirven pocas skills, y las que valen la pena hacen una de dos cosas: miden algo que no se ve a ojo (contraste, textos, SEO) o le dan a Claude un criterio visual más allá de los valores por defecto. Con las tres gratis en español de este repositorio (contraste-colores, ux-writing-es y seo-basico) y la skill oficial frontend-design de Anthropic cubres lo esencial. Se instalan en un par de comandos, pero como una skill puede ejecutar scripts, primero se lee, después se instala.

Datos revisados el 20 de octubre de 2026 contra la documentación oficial y los repositorios citados.

Qué es una skill

Según la documentación de Claude Code, una skill es una carpeta con un archivo SKILL.md: un encabezado en YAML (con un description que dice qué hace y cuándo usarla) seguido de las instrucciones en Markdown. La carpeta puede traer además scripts y otros archivos.

Claude Code mantiene siempre a la vista las descripciones de las skills instaladas y carga el cuerpo completo solo cuando la tarea calza con la descripción. También puedes llamarla tú con /nombre-de-la-skill. Por eso la descripción es lo más importante de una skill: si no dice con claridad cuándo usarla, no se activa.

Dónde viven

La documentación lista estas ubicaciones:

Ámbito	Ruta	Cuándo se carga
Personal	~/.claude/skills/<nombre>/SKILL.md	En todos tus proyectos de esa máquina
Proyecto	.claude/skills/<nombre>/SKILL.md	En ese repositorio (si la subes a git, la comparte el equipo)
Plugin	<plugin>/skills/<nombre>/SKILL.md	Donde el plugin esté activo, como /plugin:skill

Cómo se instalan

Hay dos caminos:

1. Copiar la carpeta. Dejas la carpeta de la skill (con su SKILL.md) en ~/.claude/skills/ para tenerla en todos tus proyectos, o en .claude/skills/ para un solo proyecto.
2. Como plugin. Agregas un repositorio como catálogo (marketplace) e instalas el plugin desde Claude Code. La documentación muestra este formato:

/plugin marketplace add anthropics/claude-plugins-official
/plugin install skill-creator@claude-plugins-official

Es decir, /plugin marketplace add <usuario/repositorio> y luego /plugin install <plugin>@<catálogo>. Los comandos de las secciones siguientes siguen ese molde.

Tres skills gratis para diseñar interfaces, en español

Son parte de un kit que armé; las tres están en un repositorio público con licencia MIT (Clagoss/claude-code-para-disenadores) y funcionan solo con Node 18 o superior, sin instalar nada en tu proyecto.

• contraste-colores: calcula el contraste WCAG entre los colores de tus tokens (hex, rgb, hsl u oklch), separa tema claro y oscuro y, cuando un par falla, sugiere el color más cercano que cumple sin cambiar el tono. Tiene su propia guía: cómo revisar el contraste WCAG con Claude Code. Esta misma skill está en el catálogo público agentic-awesome-skills con el nombre design-token-contrast, que la incorporó el 20 de octubre de 2026.
• ux-writing-es: revisa los textos de la interfaz (voseo, formas de vosotros, inglés residual como «Submit», mayúsculas de título, signos ¿¡ faltantes, enlaces «aquí») y luego propone botones con verbo, errores útiles y estados vacíos claros.
• seo-basico: revisa un sitio construido o publicado (title, description, un solo h1, lang, canonical, Open Graph, imágenes sin alt, enlaces internos rotos, robots.txt y sitemap).

Instalación, tal como la indica el README del repositorio:

/plugin marketplace add Clagoss/claude-code-para-disenadores
/plugin install lagos-diseno-es@claude-code-para-disenadores

Y se llaman así:

/lagos-diseno-es:contraste-colores
/lagos-diseno-es:ux-writing-es src
/lagos-diseno-es:seo-basico

Si prefieres tenerlas por proyecto, copia la carpeta plugins/lagos-diseno-es/skills/ del repositorio a .claude/skills/; ahí se llaman /contraste-colores, /ux-writing-es y /seo-basico. Los scripts también corren solos con Node, sin Claude, que es una buena forma de probarlos antes.

Las skills oficiales de Anthropic

Anthropic publica ejemplos de skills en anthropics/skills. El propio README aclara que son para demostración y que conviene probarlas en tu entorno antes de depender de ellas. Dos sirven a quien diseña:

• frontend-design: según su SKILL.md, da guía para un diseño visual distintivo e intencional al construir una interfaz nueva o rehacer una existente: dirección estética, tipografía y decisiones que no se lean como una plantilla genérica. Pide partir del tema real del encargo y revisar el resultado antes de entregarlo. Licencia Apache 2.0.
• canvas-design: crea piezas visuales estáticas (afiches, composiciones) en .png y .pdf, primero redactando una «filosofía de diseño» y después expresándola en el lienzo. Sirve para piezas gráficas, no para interfaces. Licencia Apache 2.0.

También hay una theme-factory, que aplica una paleta y un par de tipografías a presentaciones, documentos o páginas, con 10 temas predefinidos. Es de otro tipo: no mide ni audita nada.

Para instalarlas, el README del repositorio indica registrar el catálogo y elegir el plugin con las skills de ejemplo, que incluye frontend-design, canvas-design y theme-factory:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

Después, el README dice que basta mencionar la skill en tu pedido.

Cómo elegir una skill

Hay muchas skills en catálogos públicos y no todas valen. Cuatro preguntas antes de instalar:

1. ¿Mide o solo opina? «Revisa si el diseño se ve bien» es una opinión; «calcula la razón de contraste de cada par de tokens» es una medición. Para accesibilidad, textos y SEO, prefiere las que traen un script que calcula. Para criterio visual no existe medición, y ahí sirve una guía de proceso como frontend-design.
2. ¿Pide claves? Una skill de diseño rara vez necesita tus credenciales. Si pide un token o una clave de API para algo que se puede hacer en local, sospecha.
3. ¿Trae licencia? Sin licencia no sabes si puedes usarla en un trabajo con clientes. Busca LICENSE en la carpeta o en el repositorio.
4. ¿Puedes leer el SKILL.md antes? Es lo más importante. Una skill es texto que Claude obedece y, muchas veces, scripts que se ejecutan en tu máquina. Lee el SKILL.md, abre los archivos de la carpeta scripts/ y comprueba que hacen lo que dice la descripción: que no borran archivos, no envían datos a otro lado y no instalan paquetes sin avisar. Si no puedes leerla, no la instales.

Esto vale también para las mías: el SKILL.md y los scripts están en el repositorio, a la vista.

Lo que ninguna skill reemplaza

Una skill ordena el trabajo de Claude, no decide por ti. El contraste calculado no dice si la marca se ve bien, y frontend-design no sustituye un brief ni una prueba con usuarios. Úsalas para quitar de encima lo mecánico y deja tu tiempo para las decisiones de diseño.

Siguiente paso

Las tres skills gratis están en el repositorio público de GitHub, con licencia MIT. Si quieres el flujo completo, el kit «Del Figma a producción con Claude Code» trae 14 skills y 6 subagentes para pasar de Figma a código, sincronizar tokens, auditar accesibilidad y publicar. Es de pago; aquí está todo lo que incluye. El kit no está afiliado a Anthropic.