10 skills de diseño para Claude Code y cómo instalarlos

De los 10 skills de esta lista, dos se llevan 255 de mis 409 usos: el 62 %. Con los skills de diseño para Claude Code me pasa lo mismo que con el equipo de fotografía: tener más no te hace mejor.

Esta es la lista real, ordenada por el contador de usos de la propia herramienta.

Los 10 skills de diseño que más uso

1. frontend-design (147 usos): da una dirección visual propia a tus interfaces.
2. webapp-testing (108 usos): prueba webs en un navegador real.
3. impeccable (33 usos): diseña, critica y pule una interfaz.
4. ui-ux-pro-max (28 usos): referencia de estilos, paletas y fuentes.
5. emil-design-eng (22 usos): pule la UI y decide las animaciones.
6. refero-design (20 usos): investiga pantallas reales antes de diseñar.
7. web-designer (17 usos): trabajo general de UI y UX.
8. web-design-guidelines (13 usos): revisa tu código contra una guía de interfaces.
9. figma-use (11 usos): trabaja por script dentro de Figma.
10. figma-create-new-file (10 usos): crea archivos nuevos en Figma.

Qué es un skill de Claude Code

Un skill es una carpeta con un archivo SKILL.md que le enseña a Claude a hacer una tarea de una manera concreta. Claude lo carga cuando encaja con lo que le pides, o cuando lo llamas con /nombre-del-skill.

Piensa en él como una receta: el modelo ya sabe cocinar, y el skill le dice cómo se hace en tu cocina. Lo explica mejor la documentación oficial de Claude Code.

Cómo instalar un skill de diseño en Claude Code

1. Abre la terminal en tu proyecto. Entra en la carpeta del proyecto donde quieres usar el skill. Para los comandos con npx skills necesitas Node.js 22.20 o superior.
2. Ejecuta el comando del skill. Copia el comando de cada skill, más abajo, y pégalo donde se indique. El instalador te guía en lo que falte.
3. Abre Claude Code y úsalo. Pídele la tarea con normalidad, porque Claude carga el skill cuando encaja. También puedes llamarlo directamente con /nombre-del-skill.

Fíjate en cómo empieza cada comando. Los que empiezan por npx o claude van en la terminal. Los que empiezan por /plugin se escriben dentro de Claude Code. Los skills de un plugin llevan su nombre delante, como /figma:figma-use.

Los 10 skills, uno por uno

1. frontend-design

Da una dirección visual propia a interfaces nuevas o existentes: estética, tipografía y decisiones que no parecen de plantilla. Es el que más uso porque entra en casi todo: cada diseño que hago pasa por una revisión que lo carga antes de darlo por terminado.

npx skills add anthropics/skills --skill frontend-design

Fuente: anthropics/skills

2. webapp-testing

Prueba webs con Playwright: revisa que funcionen, saca capturas y lee los logs. Sirve para ver el resultado en un navegador real, en lugar de fiarte de que el código está bien.

npx skills add anthropics/skills --skill webapp-testing

Fuente: anthropics/skills

3. impeccable

Diseña, rediseña, critica, audita y pule una interfaz. Su instalador detecta tus herramientas y te pregunta si lo quieres en el proyecto o global.

npx impeccable install

Fuente: pbakaus/impeccable

4. ui-ux-pro-max

Referencia de UI y UX con estilos, paletas y pares de fuentes. Viene bien al empezar un diseño, cuando aún no tienes una dirección clara. Son dos comandos: escribe uno y luego el otro, dentro de Claude Code.

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill

/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Fuente: ui-ux-pro-max-skill

5. emil-design-eng

El método de Emil Kowalski para pulir UI, diseñar componentes y decidir animaciones. Es para cuando la interfaz ya funciona y lo que falta es el detalle.

npx skills add emilkowalski/skills --skill emil-design-eng

Fuente: emilkowalski/skills

6. refero-design

Obliga a investigar pantallas y flujos reales antes de diseñar, usando la colección de Refero. Este comando instala solo el método.

npx skills add referodesign/refero_skill --skill refero-design

Para la investigación en vivo instala el plugin, que añade la conexión con Refero. Va dentro de Claude Code, pide tu cuenta y un plan de pago de Refero.

/plugin marketplace add referodesign/refero_skill

/plugin install refero@refero

Fuente: referodesign/refero_skill

7. web-designer

Trabajo general de UI y UX: interfaz, investigación, sistemas de diseño y accesibilidad.

npx skills add intelligentcode-ai/skills --skill web-designer

Fuente: intelligentcode-ai/skills

8. web-design-guidelines

Revisa tu código de UI contra las Web Interface Guidelines. Sirve como repaso final antes de publicar.

npx skills add vercel-labs/agent-skills --skill web-design-guidelines

Fuente: vercel-labs/agent-skills

9. figma-use

La base para trabajar por script dentro de un archivo de Figma. Viene en el plugin oficial. Con plan Starter o asiento View o Collab tienes hasta 20 llamadas de lectura al mes.

Escribir en el canvas está en beta: hoy es gratis y Figma prevé cobrarlo por uso. Pide plan Professional, Education, Organization o Enterprise, y acceso de edición al archivo.

claude plugin install figma@claude-plugins-official

Fuente: figma/mcp-server-guide

10. figma-create-new-file

Crea un archivo nuevo de Design, FigJam o Slides. Si ya instalaste el plugin del punto anterior, ya lo tienes.

claude plugin install figma@claude-plugins-official

Fuente: figma/mcp-server-guide

Un skill solo no basta: necesitas tokens

Sin reglas, cada skill diseña a su manera. Por eso mi web sale de un solo archivo, tokens.css, que decide color, tipo, espacio y radio. Los skills trabajan sobre él, no sobre su gusto.

Es la misma idea que un preset en fotografía: da igual cuántas herramientas uses si todas parten de la misma base. Aquí tienes mis tokens y el carrusel de este artículo.

Cómo he contado los usos

Claude Code guarda un contador de uso por cada skill. Estos números son los de mi Mac a 31 de octubre de 2026.

He dejado fuera los que no son de diseño, los internos de mi agencia y los que ya vienen incluidos con Claude Code. El empate a 10 usos lo decide el uso más reciente.

Los comandos que empiezan por npx skills add los probé instalándolos en una carpeta limpia. Los de impeccable, ui-ux-pro-max y Figma salen de la documentación de cada proyecto.

Dudas frecuentes

¿Dónde se guardan los skills de Claude Code?

En ~/.claude/skills si quieres usarlos en todos tus proyectos, o en .claude/skills dentro de un proyecto si quieres compartirlos con tu equipo.

¿Qué diferencia hay entre un skill y un plugin?

Un skill es una carpeta de instrucciones. Un plugin es un paquete que puede traer varios skills y otras conexiones. El de Figma, por ejemplo, instala sus skills y la conexión con Figma.

¿Los skills de diseño son gratis?

Instalar los de esta lista no cuesta nada, pero necesitas acceso a Claude Code. Tres tienen límites: la investigación en vivo de Refero pide un plan de pago, y los dos de Figma dependen de tu plan y tu asiento.

¿Es seguro instalar skills de terceros?

Un skill puede traer instrucciones y scripts que Claude ejecuta con tus permisos. Antes de instalar uno, revisa su repositorio y lee su SKILL.md.

Por dónde empezar

Mi consejo: no instales los 10 de golpe. Empieza por estos tres, en este orden:

1. frontend-design para darle dirección visual a la interfaz.
2. webapp-testing para comprobarla en un navegador real.
3. impeccable para criticarla y pulirla.

Úsalos en un proyecto real antes de añadir otro. Cuando notes que te falta algo concreto, vuelve a esta lista y elige solo ese skill.

Soy fotógrafo y educador, y construyo mis propias webs. Si te interesa la parte de fotografía, empieza por la guía del triángulo de exposición o echa un vistazo a mis prints.

← Volver al blog