Los 10 skills de diseño
que más uso.
Con el comando para instalar cada uno. Debajo tienes el carrusel, mis tokens y mis diseños. La guía completa está en mi blog.
Los skills
Ordenados por usos reales. Cada nombre lleva a su fuente y cada comando se selecciona con un clic.
- 01frontend-designDa una dirección visual propia a interfaces nuevas o existentes.
npx skills add anthropics/skills --skill frontend-design147 usos - 02webapp-testingPrueba webs con Playwright: revisa que funcionen, saca capturas y lee los logs.
npx skills add anthropics/skills --skill webapp-testing108 usos - 03impeccableDiseña, rediseña, critica, audita y pule una interfaz.
npx impeccable installEl instalador te pregunta si lo quieres en el proyecto o global.33 usos - 04ui-ux-pro-maxReferencia de UI y UX con estilos, paletas y pares de fuentes.
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill/plugin install ui-ux-pro-max@ui-ux-pro-max-skill28 usos - 05emil-design-engEl método de Emil Kowalski para pulir UI y decidir animaciones.
npx skills add emilkowalski/skills --skill emil-design-eng22 usos - 06refero-designInvestiga pantallas y flujos reales antes de diseñar.
npx skills add referodesign/refero_skill --skill refero-designLa investigación en vivo pide un plan de pago de Refero.20 usos - 07web-designerTrabajo general de UI y UX: interfaz, investigación, sistemas de diseño y accesibilidad.
npx skills add intelligentcode-ai/skills --skill web-designer17 usos - 08web-design-guidelinesRevisa código de UI contra las Web Interface Guidelines.
npx skills add vercel-labs/agent-skills --skill web-design-guidelines13 usos - 09figma-useBase obligatoria para trabajar por script dentro de un archivo de Figma.
claude plugin install figma@claude-plugins-officialViene en el plugin de Figma. Con plan Starter o asiento View o Collab, las llamadas de lectura tienen un límite mensual.11 usos - 10figma-create-new-fileCrea un archivo nuevo de Design, FigJam o Slides.
claude plugin install figma@claude-plugins-officialEs el mismo plugin que el skill anterior.10 usos
Datos del contador de Claude Code en 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 de ui-ux-pro-max, impeccable y Figma salen de su README; el resto los he probado instalándolos.
El carrusel
Doce slides a 1080 x 1350: portada, una por skill y cierre.
Los tokens
Un archivo decide color, tipo, espacio y radio. Es el que usa hoy yenderfonseca.com.
#FCFCFD#F4F4F6#D9D9DB#646468#151517- Familia
- Host Grotesk
- Tipo
- 9 tamaños, 11 a 88 px
- Espacio
- Base 4, 11 pasos
- Radio
- 0 y 2 px
Cargando tokens.css...
Los diseños
Cada marca lleva sus propios tokens. El método es el mismo.

Yender Fonseca
Web personal de fotografía y educación.
yenderfonseca.com
Margarita Creative
Web de servicios con portada en pixel art.
margaritacreative.com
Email Potato
Archivo vivo de emails reales de marcas.
emailpotato.vercel.app
Madrid Photo Meet
Caminatas de fotografía de calle con crítica en grupo.
madrid-photo-meet.vercel.app
Apertura
Landing de una guía gratuita de 12 páginas.
apertura-landing.vercel.app
Motion kit
Una de las 24 piezas animadas para mis reels.
Ver el video