Yender Fonseca

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.

  1. 01frontend-designDa una dirección visual propia a interfaces nuevas o existentes.npx skills add anthropics/skills --skill frontend-design147 usos
  2. 02webapp-testingPrueba webs con Playwright: revisa que funcionen, saca capturas y lee los logs.npx skills add anthropics/skills --skill webapp-testing108 usos
  3. 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
  4. 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
  5. 05emil-design-engEl método de Emil Kowalski para pulir UI y decidir animaciones.npx skills add emilkowalski/skills --skill emil-design-eng22 usos
  6. 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
  7. 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
  8. 08web-design-guidelinesRevisa código de UI contra las Web Interface Guidelines.npx skills add vercel-labs/agent-skills --skill web-design-guidelines13 usos
  9. 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
  10. 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.

Descargar el ZIP
Portada: los 10 skills de diseño que más uso Skill 1: frontend-design, con su comando de instalación Skill 2: webapp-testing, con su comando de instalación Skill 3: impeccable, con su comando de instalación Skill 4: ui-ux-pro-max, con su comando de instalación Skill 5: emil-design-eng, con su comando de instalación Skill 6: refero-design, con su comando de instalación Skill 7: web-designer, con su comando de instalación Skill 8: web-design-guidelines, con su comando de instalación Skill 9: figma-use, con su comando de instalación Skill 10: figma-create-new-file, con su comando de instalación Cierre: todo en un link

Los tokens

Un archivo decide color, tipo, espacio y radio. Es el que usa hoy yenderfonseca.com.

Descargar
Papel#FCFCFD
Relleno suave#F4F4F6
Línea fina#D9D9DB
Texto de apoyo#646468
Tinta y acento#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...