Las 8 mejores Claude Skills para ingenieros de UI/UX

Si pasas tiempo en r/Frontend, r/UXDesign o los foros de la comunidad de Figma, probablemente notaste un cambio en la forma en que diseñadores y desarrolladores front-end hablan sobre las herramientas de IA. Hace dos años, la mayoría de las conversaciones giraban en torno a si la IA reemplazaría por completo a los diseñadores. Ese temor no ha desaparecido (y probablemente nunca lo hará), pero ahora convive con un enfoque más práctico: diseñadores que comparten flujos de trabajo en los que la IA se encarga de las tareas tediosas para que puedan enfocarse en las creativas.

Las cifras lo reflejan. Según la encuesta anual de Loop11, en 2025 la adopción de la IA entre investigadores de UX llegó al 80 %. Diseñadores sénior afirman producir el volumen de trabajo que antes se asociaba con un equipo de 3 personas, una tendencia que dio lugar al «Super-IC» (colaborador individual superproductivo), que trabaja como un estudio de diseño unipersonal. En Reddit, la recepción ha sido entusiasta y práctica. En r/webdesign y r/Frontend, desarrolladores crean prototipos completos en 30 minutos con Claude Code. En UX Collective, diseñadores publican flujos de trabajo detallados para usar Claude y convertir diseños automáticamente al modo oscuro, generar variantes de componentes accesibles y auditar páginas según las pautas WCAG.

El escepticismo sigue presente, y es saludable. Al 91 % de los investigadores de UX les preocupa la precisión de los resultados y las alucinaciones. El consenso de la comunidad es claro: las herramientas de IA para crear interfaces son excelentes para preparar primeros borradores de mockups y estructuras, pero aún tienen dificultades con los ajustes personalizados, los patrones de interacción matizados y el criterio de diseño que se adquiere tras años de observar a usuarios reales enfrentarse a interfaces reales. La IA no reemplaza la mirada del diseñador. Se encarga del trabajo repetitivo (generar variantes responsivas, verificar relaciones de contraste, crear estructuras básicas de componentes y auditar según listas de verificación) para que las personas dediquen más tiempo a las decisiones que de verdad importan.

Play Video: YouTube Video: jmDLqqWxCco

Brian Clark, de Snyk, muestra cómo crear un sitio web usando Bolt y Figma en conjunto, y demuestra el tipo de flujo de trabajo de diseño asistido por IA que están adoptando los desarrolladores front-end.

Claude Skills son una de las formas más interesantes de iniciarse en este flujo de trabajo. Si aún no las conoces, vale la pena entenderlas porque ocupan un lugar único en el ecosistema de Claude.

Qué son Claude Skills (y qué no son)

El ecosistema de Claude cuenta con varios mecanismos de extensión, y es fácil confundirlos. Aquí tienes una breve aclaración:

• Los archivos CLAUDE.md son memoria persistente del proyecto. Se cargan en cada sesión y le indican a Claude cosas como «este proyecto usa Tailwind v4» o «usa siempre sangría de 2 espacios». Son contexto permanente, no capacidades a pedido.

• Los comandos personalizados con barra (.claude/commands/*.md) eran plantillas de instrucciones sencillas que se activaban con /command-name. En la práctica, se integraron en Skills. Las Skills que incluyen un argument-hint en sus metadatos frontmatter pueden invocarse como comandos con barra, mientras que las demás se activan según el contexto de la tarea.

• Los servidores MCP son procesos en ejecución que exponen herramientas y fuentes de datos mediante el Model Context Protocol. Permiten que Claude invoque API, consulte bases de datos o interactúe con servicios externos. Requieren un proceso de servidor y código.

• Los conectores de Claude vinculan Claude con servicios externos como Slack, Figma o Asana mediante servidores MCP remotos con OAuth.

• Claude Apps se refiere a las plataformas donde se ejecuta Claude (Claude.ai, Claude Code, dispositivos móviles y computadoras de escritorio), no a extensiones de Claude.

• Los plugins son paquetes que agrupan Skills, agentes, hooks y servidores MCP para distribuirlos.

Claude Skills son directorios que contienen un archivo SKILL.md (con metadatos frontmatter en YAML e instrucciones en Markdown), además de archivos de apoyo opcionales, como scripts, plantillas y documentos de referencia. Sus características únicas:

1. Son directorios, no archivos individuales. Una Skill puede incluir scripts de shell, utilidades de Python, documentación de referencia y archivos de recursos junto con sus instrucciones.

2. Divulgación progresiva. Al iniciarse, Claude solo carga el name y la description de cada Skill desde los metadatos frontmatter de YAML (alrededor de 100 tokens por Skill), de forma similar a cómo se incorporan al contexto las descripciones de las herramientas MCP. Claude compara tu tarea con esas descripciones para decidir qué Skill activar. Cuando encuentra una coincidencia, carga las instrucciones completas de SKILL.md. Los archivos de apoyo (referencias, scripts y recursos) se cargan solo cuando se necesitan explícitamente durante la ejecución. Este enfoque de tres niveles mantiene acotada la ventana de contexto, incluso si tienes docenas de Skills instaladas. También significa que el campo description de una Skill es fundamental: las descripciones vagas se activan de forma poco confiable, mientras que las precisas, con frases desencadenantes explícitas (como «Usa esta Skill cuando el usuario pida crear componentes web»), se activan de forma consistente.

3. Pueden ejecutar código. Las Skills pueden incluir scripts en scripts/ que Claude ejecuta, y pueden usar la sintaxis !`command` para insertar resultados dinámicos en el contexto de las instrucciones.

4. Siguen un estándar abierto. La especificación Agent Skills fue adoptada por Claude Code, OpenAI Codex, Cursor, Gemini CLI y otros, lo que permite portar las Skills.

5. Pueden registrarse como comandos con barra. Las Skills que incluyen un campo argument-hint en sus metadatos frontmatter de YAML pueden invocarse directamente como /skill-name. Las Skills sin una sugerencia de argumento se activan según el contexto; es decir, Claude las detecta automáticamente cuando tu tarea coincide con su descripción.

La especificación oficial y la documentación de Skills de Anthropic explican el formato completo. También vale la pena leer la publicación del blog de ingeniería de Anthropic sobre Agent Skills para conocer los motivos detrás de su diseño.

Cómo instalar una Claude Skill

Instalar una Skill toma unos 30 segundos.

A nivel de proyecto (se comparte con tu equipo mediante el control de versiones):

your-project/
└── .claude/
    └── skills/
        └── skill-name/
            ├── SKILL.md
            └── scripts/
                └── helper.sh

A nivel de usuario (personal, disponible en todos los proyectos):

~/.claude/
└── skills/
    └── skill-name/
        ├── SKILL.md
        └── references/
            └── REFERENCE.md

Mediante plugins (para colecciones de Skills como Vercel):

/plugin marketplace add vercel-labs/agent-skills
/plugin menu

Las Skills a nivel de proyecto se comparten con el equipo mediante el control de código fuente. Las Skills a nivel de usuario son privadas. Si hay nombres duplicados, las Skills empresariales tienen prioridad sobre las personales, y estas sobre las del proyecto.

Una advertencia importante: el ecosistema de Agent Skills es nuevo y crece rápidamente, por lo que la seguridad de la cadena de suministro es esencial. La investigación ToxicSkills de Snyk detectó inyección de instrucciones en el 36 % de las Skills evaluadas y 1,467 cargas maliciosas en todo el ecosistema. Revisa siempre el archivo SKILL.md de una Skill y todos los scripts que incluya antes de instalarla. Trata las Skills como tratarías cualquier código de terceros que ejecutes en tu entorno.

¿Estás creando una Claude Skill? Si estás creando o manteniendo una Claude Skill o un servidor MCP de código abierto, el programa Snyk Secure Developer ofrece análisis de seguridad gratuito de nivel empresarial para proyectos de código abierto. Snyk protege más de 585,000 proyectos de código abierto y ofrece acceso empresarial completo, soporte de la comunidad de Discord y ayuda con integraciones a los responsables de proyectos que cumplan los requisitos. Solicita participar aquí si ya tienes un proyecto, o aquí si estás por comenzar uno.

Ahora sí, vamos a la lista. Estas ocho Skills (y colecciones de Skills) abarcan desde el diseño front-end de alta fidelidad hasta las auditorías de accesibilidad, la optimización del rendimiento de React, la arquitectura de componentes y los patrones de interfaz móvil.

1. Anthropic frontend-design

Fuente: anthropics/skills (ruta: skills/frontend-design/) y anthropics/claude-code (ruta: plugins/frontend-design/) Estrellas: 65,847 (repositorio skills) / 65,362 (repositorio claude-code) Licencia: Personalizada (consulta LICENSE.txt) Última actualización: febrero de 2026 SKILL.md verificado: Sí

Esta es la respuesta de Anthropic a un problema que han enfrentado todos los diseñadores que usan Claude Code: las interfaces front-end generadas por IA siempre se ven iguales. Degradados morados genéricos sobre fondos blancos. Las mismas combinaciones tipográficas de Inter/Roboto. Diseños de tarjetas previsibles. La descripción de la Skill las llama «basura generada por IA», y sus instrucciones están diseñadas específicamente para que Claude deje atrás esos patrones.

La Skill parece un encargo de diseño de un director creativo cansado de ver siempre los mismos resultados. Antes de escribir código, le indica a Claude que analice cuatro dimensiones: propósito (quién lo usa y por qué), tono (elegir una dirección estética específica), restricciones (framework, rendimiento y accesibilidad) y diferenciación (qué hace que esta interfaz sea memorable).

Qué hace

El conjunto principal de instrucciones abarca cinco áreas:

• Tipografía: Elige fuentes distintivas y con personalidad. La Skill prohíbe explícitamente Inter, Roboto, Arial, las fuentes del sistema y Space Grotesk (señalada como «muy usada por la IA»). Promueve combinaciones inesperadas, como unir una fuente de exhibición distintiva con una fuente refinada para el texto.

• Color y tema: Elige una paleta armoniosa. Usa variables CSS para mantener la coherencia. Prefiere colores dominantes con acentos marcados en vez de paletas discretas y distribuidas uniformemente. Nada de los clichés de morado sobre blanco.

• Movimiento: Prioriza los momentos de mayor impacto. Una carga de página bien orquestada, con apariciones escalonadas, genera más satisfacción que varias microinteracciones dispersas. Soluciones solo con CSS para HTML y la biblioteca Motion para React.

• Composición espacial: Diseños inesperados. Asimetría, superposiciones, flujos diagonales, elementos que rompen la cuadrícula y abundante espacio negativo.

• Fondos y detalles visuales: Mallas de degradados, texturas de ruido, patrones geométricos, transparencias en capas, sombras dramáticas, bordes decorativos, cursores personalizados y superposiciones de grano.

Su enfoque tiene opiniones definidas. Impulsa a Claude a crear trabajos audaces y distintivos en vez de recurrir a opciones seguras por defecto. Si estás creando herramientas internas donde la coherencia importa más que la creatividad, quizá te convenga combinarla con una Skill de sistema de diseño más estructurada (consulta la n.º 5 o la n.º 6 a continuación). Pero para páginas de destino, sitios de marketing, portafolios y cualquier proyecto que necesite personalidad visual, esta Skill evita que Claude genere siempre la misma interfaz.

Instalación

Disponible en dos lugares (la misma Skill, en dos repositorios):

# From the skills repo (recommended)
git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

# Or from the claude-code plugins repo
/plugin marketplace add anthropics/claude-code
# Select frontend-design from the plugin menu
/plugin menu

Uso

La Skill se activa automáticamente cuando le pides a Claude que cree componentes, páginas o aplicaciones web:

Build a landing page for a fintech startup. Dark, editorial tone.
Create a dashboard component for a health app. Organic, warm aesthetic.
Design a portfolio site. Brutalist, typographic focus.

Para quién es: Desarrolladores front-end y diseñadores que quieren que Claude genere interfaces visualmente distintivas en vez de plantillas genéricas. Es especialmente útil para páginas de destino, sitios de portafolio, páginas de marketing y cualquier proyecto donde importe la personalidad estética.

2. Vercel web design guidelines

Fuente: vercel-labs/agent-skills (ruta: skills/web-design-guidelines/) Estrellas: 19,487 Licencia: MIT Última actualización: enero de 2026 SKILL.md verificado: Sí

Mientras que la habilidad frontend-design de Anthropic se enfoca en la dirección creativa, esta habilidad de Vercel se centra en la corrección. Revisa tu código de UI existente según las Web Interface Guidelines, un conjunto integral de más de 100 reglas que abarcan accesibilidad, rendimiento y prácticas recomendadas de UX.

Qué hace

La habilidad sigue un flujo de trabajo claro:

1. Obtiene las pautas más recientes desde la URL de origen (las reglas están en el repositorio vercel-labs/web-interface-guidelines, por lo que se mantienen actualizadas)

2. Lee los archivos que especificas

3. Verifica cada archivo según todas las reglas

4. Muestra los resultados en un formato conciso de file:line

Las pautas abarcan aspectos que los ingenieros de UI/UX con experiencia verifican durante la revisión del código, pero que es fácil pasar por alto cuando hay presión de tiempo: atributos ARIA adecuados, estados de enfoque visibles, campos de entrada etiquetados, tamaño de las áreas táctiles, compatibilidad con movimiento reducido, HTML semántico, navegación con teclado, jerarquía adecuada de encabezados y mucho más.

No es una habilidad creativa. Es un control de calidad. Piensa en ella como un linter de prácticas recomendadas de UI/UX que detecta problemas que podrían hacer que no pases una auditoría WCAG o causar problemas reales de usabilidad a quienes usan teclado y lectores de pantalla.

Instalación

git clone https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/web-design-guidelines ~/.claude/skills/

O desde el marketplace de plugins:

/plugin marketplace add vercel-labs/agent-skills
/plugin menu

Uso

La habilidad se registra como un comando de barra diagonal con una indicación de argumento para especificar archivos:

/web-design-guidelines src/components/**/*.tsx
Review my UI code for accessibility issues
Audit this page against web interface best practices
Check my form components for WCAG compliance

Para quién es: Desarrolladores de front-end que quieren verificaciones automatizadas de calidad de UI/UX durante el desarrollo. Ingenieros de sistemas de diseño que necesitan aplicar la coherencia en todo un código base. Cualquier persona que se esté preparando para una auditoría de accesibilidad.

Recursos relacionados de Snyk:

• 10 prácticas recomendadas de seguridad para React

• Lecciones educativas sobre seguridad de JavaScript

3. Prácticas recomendadas de React de Vercel

Fuente: vercel-labs/agent-skills (ruta: skills/react-best-practices/) Estrellas: 19,487 Licencia: MIT Última actualización: enero de 2026 SKILL.md verificado: Sí

El rendimiento es una cuestión de UX. Una interfaz con un diseño hermoso que tarda 4 segundos en volverse interactiva ofrece una mala experiencia de usuario, sin importar lo buena que sea la tipografía. Esta habilidad de Vercel Engineering incluye 57 reglas de optimización del rendimiento en 8 categorías, priorizadas según su impacto.

Qué incluye

El orden de prioridad importa. Refleja la experiencia de ingeniería de Vercel en el mundo real: eliminar cascadas de solicitudes y optimizar el tamaño del paquete tiene mucho más impacto en el rendimiento percibido que ajustar el comportamiento de los re-renderizados. Muchos desarrolladores (y asistentes de IA) van directo a useMemo y React.memo, cuando el verdadero cuello de botella es una cascada de llamadas secuenciales a la API o un archivo barrel que importa toda la biblioteca de íconos.

Cada regla incluye una breve explicación, código incorrecto con una explicación de por qué está mal, código correcto con su explicación y contexto adicional. El directorio de reglas contiene archivos Markdown individuales para cada regla, de modo que Claude puede consultar la explicación completa cuando sea pertinente.

Algunos aspectos destacados:

• async-suspense-boundaries: Usa Suspense para transmitir contenido en lugar de esperar a que todos los datos estén disponibles antes de renderizar

• bundle-barrel-imports: Importa directamente y evita los archivos barrel (un problema frecuente en las bibliotecas de sistemas de diseño)

• bundle-dynamic-imports: Usa next/dynamic para los componentes pesados

• rerender-derived-state: Suscríbete a valores booleanos derivados, no a valores sin procesar

• rendering-content-visibility: Usa CSS content-visibility para listas largas

• rendering-activity: Usa el componente Activity para mostrar y ocultar elementos

Instalación

git clone https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/react-best-practices ~/.claude/skills/

Uso

La habilidad se activa automáticamente al trabajar con código de React o Next.js:

Review this component for performance issues
Refactor this page to eliminate data fetching waterfalls
Optimize the bundle size of this Next.js app
Why is this component re-rendering unnecessarily?

Para quién es: Desarrolladores de React y Next.js que quieren que Claude escriba código de alto rendimiento de manera predeterminada. Ingenieros de sistemas de diseño que crean bibliotecas de componentes donde el rendimiento a escala es importante.

Play Video: Can This New AI Write Safe Code? (Claude 3.7 Sonnet)

Brian Clark, de Snyk, prueba si el código generado por Claude supera los análisis de seguridad y encuentra vulnerabilidades reales, como ataques de denegación de servicio mediante expresiones regulares. Habilidades como React Best Practices de Vercel ayudan a Claude a generar código de alto rendimiento que sigue patrones establecidos.

Recursos relacionados de Snyk:

• La vulnerabilidad CRÍTICA de Next.js que debes conocer (video: YouTube)

• Seguridad de NPM: cómo prevenir ataques a la cadena de suministro

• 10 prácticas recomendadas de seguridad para npm

4. Patrones de composición de Vercel

Fuente: vercel-labs/agent-skills (ruta: skills/composition-patterns/) Estrellas: 19,487 Licencia: MIT Última actualización: enero de 2026 SKILL.md verificado: Sí

Si alguna vez heredaste un componente React con 15 props booleanas (isCompact, showHeader, isRounded, hasBorder, isHighlighted...), entiendes el problema que resuelve esta habilidad. La proliferación de props booleanas es uno de los antipatrones más comunes en los sistemas de diseño. Hace que los componentes sean difíciles de entender, probar y ampliar.

Esta habilidad enseña a Claude patrones de composición que se pueden ampliar: componentes compuestos, proveedores de contexto, variantes explícitas y arquitecturas adecuadas para administrar el estado.

Qué incluye

Los patrones clave incluyen:

• architecture-avoid-boolean-props: No agregues props booleanas para personalizar el comportamiento. Usa composición. Esta es la regla fundamental y la que más mejora la calidad de la API de un componente.

• architecture-compound-components: Estructura componentes complejos con un contexto compartido (como funcionan <Select>, <Select.Trigger> y <Select.Content> en Radix UI).

• state-decouple-implementation: El proveedor es el único que sabe cómo se administra el estado. Los componentes consumen una interfaz clara.

• state-context-interface: Define una interfaz genérica con estado, acciones y metadatos para la inyección de dependencias.

• patterns-explicit-variants: Crea componentes de variantes explícitas en lugar de modos booleanos (por ejemplo, <Alert.Destructive> en lugar de <Alert isDestructive>).

• patterns-children-over-render-props: Usa children para la composición en lugar de props renderX.

• react19-no-forwardref: En React 19+, omite forwardRef y usa el nuevo hook use() en lugar de useContext().

Cada archivo de reglas del directorio rules/ incluye ejemplos de código incorrectos y correctos con explicaciones, para que estos patrones sean concretos y no abstractos.

Instalación

git clone https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/composition-patterns ~/.claude/skills/

Uso

La habilidad se activa al trabajar en la arquitectura de componentes:

Refactor this component to use compound components instead of boolean props
Design a flexible API for this dropdown component
Review this component library for composition anti-patterns
How should I structure this complex form component?

Para quién es: Ingenieros de sistemas de diseño, responsables del mantenimiento de bibliotecas de componentes y desarrolladores de front-end que crean componentes de UI reutilizables. Esta habilidad es especialmente útil al diseñar API de componentes que otros desarrolladores usarán.

5. UI/UX Pro Max

Fuente: nextlevelbuilder/ui-ux-pro-max-skill Estrellas: 29,636 Licencia: MIT Última actualización: febrero de 2026 SKILL.md verificado: Sí

Esta es la habilidad de inteligencia de diseño más completa del ecosistema actual. Mientras que frontend-design de Anthropic aporta a Claude criterio estético y las habilidades de Vercel se centran en patrones de ingeniería, UI/UX Pro Max le ofrece a Claude una base de datos de diseño en la que puede hacer búsquedas: más de 50 estilos de UI, 97 paletas de colores, 57 combinaciones de fuentes, 99 pautas de UX y 25 tipos de gráficos para 9 stacks tecnológicos.

Qué hace

La habilidad incluye una herramienta CLI de Python (scripts/search.py) que Claude ejecuta para consultar su base de datos de diseño. El flujo de trabajo consta de cuatro pasos:

Paso 1: Analizar los requisitos. Extrae el tipo de producto, las palabras clave de estilo, el sector y el stack de la solicitud del usuario.

Paso 2: Generar el sistema de diseño (obligatorio). Ejecuta --design-system para obtener recomendaciones integrales con sus fundamentos. Busca en 5 dominios en paralelo (producto, estilo, color, landing y tipografía), aplica reglas de razonamiento de un conjunto de datos CSV y devuelve un sistema de diseño completo: patrón, estilo, colores, tipografía, efectos y antipatrones que debes evitar.

Paso 3: Complementar con búsquedas detalladas. Consulta dominios individuales (estilo, gráficos, UX, tipografía y landing) para obtener más detalles.

Paso 4: Obtener pautas para el stack. Obtén prácticas recomendadas de implementación para el stack específico (html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose).

La habilidad también admite sistemas de diseño persistentes con un patrón principal + sobrescrituras. Al ejecutar --design-system --persist, se crea un archivo design-system/MASTER.md (la fuente global de verdad) y un directorio design-system/pages/ para las sobrescrituras específicas de cada página. Es una función bien pensada para proyectos más grandes, donde una página de dashboard puede necesitar reglas de densidad diferentes a las de una página de marketing, aunque ambas compartan la misma paleta básica y tipografía.

Categorías de reglas por prioridad

La categoría de accesibilidad ocupa el primer lugar. La habilidad verifica relaciones de contraste mínimas de 4.5:1, anillos de enfoque visibles, texto alternativo descriptivo, etiquetas ARIA, navegación con teclado y etiquetas adecuadas para formularios. La lista de verificación previa a la entrega abarca calidad visual, interacción, contraste en modo claro y oscuro, diseño y accesibilidad.

Un detalle práctico: la habilidad incluye una sección llamada "Reglas comunes para una UI profesional" que recopila problemas que suelen pasarse por alto. Nada de íconos emoji (usa SVG). Usa el cursor de puntero en todos los elementos en los que se puede hacer clic. Transiciones suaves de 150 a 300 ms. Las tarjetas de vidrio en modo claro necesitan bg-white/80 o una opacidad mayor, no bg-white/10. Verifica la visibilidad de los bordes tanto en modo claro como oscuro.

Instalación

git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
cp -r ui-ux-pro-max-skill/.claude/skills/ui-ux-pro-max ~/.claude/skills/

O desde el marketplace de plugins:

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

Uso

Design a landing page for a beauty spa wellness service
Build a SaaS dashboard with dark mode
Create a fintech crypto trading interface
Review this component for UX anti-patterns

La habilidad también admite búsquedas directas en la CLI:

# Generate full design system
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

# Search specific domains
python3 skills/ui-ux-pro-max/scripts/search.py "glassmorphism dark" --domain style
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography

Para quién es: Diseñadores y desarrolladores que quieren que Claude tome decisiones de diseño fundamentadas en el tipo de producto, el sector y la dirección estética, en lugar de generar opciones genéricas. La función de sistema de diseño persistente es especialmente útil para equipos que trabajan en aplicaciones con varias páginas.

6. Diseñador de UX de Bencium

Fuente: bencium/bencium-claude-code-design-skill Estrellas: 72 Licencia: No especificada Última actualización: noviembre de 2025 SKILL.md verificado: Sí (2 archivos SKILL.md: bencium-controlled-ux-designer y bencium-innovative-ux-designer)

Esta es la guía más completa de fundamentos de diseño de UX en una sola habilidad dentro del ecosistema de Claude Skills. Mientras que otras habilidades se centran en un aspecto específico (accesibilidad, rendimiento, estética), la habilidad de Bencium es un documento integral de referencia sobre diseño de UX de más de 28,000 caracteres que aborda el pensamiento de diseño, los estándares visuales, el diseño de interacción y la accesibilidad en un solo paquete coherente.

El repositorio incluye dos variantes:

• bencium-innovative-ux-designer: Fomenta decisiones de diseño audaces, creativas y distintivas (con una filosofía similar a la habilidad frontend-design de Anthropic, pero con mucha más profundidad)

• bencium-controlled-ux-designer: Para proyectos donde la coherencia y el control son más importantes que la creatividad

Ambas incluyen los mismos documentos de referencia: ACCESSIBILITY.md, RESPONSIVE-DESIGN.md, MOTION-SPEC.md y DESIGN-SYSTEM-TEMPLATE.md.

Qué incluye

Filosofía de diseño básica:

• Simplicidad mediante la reducción (comienza con la complejidad y elimina elementos deliberadamente hasta llegar a la solución eficaz más simple)

• Honestidad material (los materiales digitales tienen propiedades únicas; aprovéchalas)

• Jerarquía funcional (crea jerarquías mediante la escala tipográfica, el contraste de color y las relaciones espaciales)

• Atención obsesiva al detalle (cada píxel es una decisión intencional)

• Lenguaje de diseño coherente (cada elemento debe comunicar visualmente su función)

• Tecnología invisible (los usuarios se enfocan en el contenido y sus objetivos, no en entender la interfaz)

Estándares de diseño visual:

• Arquitectura completa del sistema de color (paleta neutra base + paleta de acento, con reglas de aplicación para fondos, texto, botones, indicadores de estado y estados interactivos)

• Tipografía de excelencia (tipografía funcional frente a emocional, escala tipográfica, reglas de espaciado y legibilidad, tipografía adaptable y pautas específicas de interfaz para botones, etiquetas de formularios, campos y mensajes de error)

• Diseño de composición y espacio (equilibrio compositivo, disciplina de cuadrícula, orientación de la atención)

Diseño de interacción:

• Patrones de manipulación directa (arrastrar y soltar en lugar de botones arriba/abajo, edición en línea en lugar de formularios separados)

• Respuesta inmediata en menos de 100 ms para cada interacción

• Patrones que permiten recuperarse de errores (estrategias de prevención + estrategias de recuperación)

• Revelación progresiva (resumen, detalles, opciones avanzadas)

• Patrones modernos de UX: interfaces conversacionales, diseños adaptables, expresión visual audaz

Documentos de referencia:

• ACCESSIBILITY.md con orientación completa sobre WCAG 2.1/2.2

• RESPONSIVE-DESIGN.md con estrategias para puntos de quiebre

• MOTION-SPEC.md con curvas de aceleración, tablas de duración y patrones de animación específicos para cada estado

• DESIGN-SYSTEM-TEMPLATE.md para iniciar un sistema de diseño coherente

Instalación

git clone https://github.com/bencium/bencium-claude-code-design-skill.git

# Choose one (or install both):
cp -r bencium-claude-code-design-skill/bencium-innovative-ux-designer ~/.claude/skills/
cp -r bencium-claude-code-design-skill/bencium-controlled-ux-designer ~/.claude/skills/

Uso

La skill se activa al crear componentes web, páginas o aplicaciones:

Build a checkout flow with proper error handling and recovery
Design a settings page with progressive disclosure
Create an onboarding wizard with direct manipulation patterns
Review this form for UX issues

Para quién es: Diseñadores de UX y desarrolladores front-end que quieren que Claude entienda y aplique los fundamentos del diseño UX, no solo preferencias estéticas. Las dos variantes (innovadora y controlada) la hacen adaptable tanto a proyectos creativos como sistemáticos.

7. Plugin AccessLint

Fuente: accesslint/claude-marketplace Estrellas: 8 Licencia: MIT Última actualización: noviembre de 2025 SKILL.md verificado: Sí (skills en plugins/accesslint/skills/: contrast-checker, refactor, use-of-color, link-purpose)

AccessLint es un kit de herramientas de accesibilidad específico para Claude. A diferencia de las funciones de accesibilidad incorporadas en otras skills de esta lista (que consideran la accesibilidad como uno de varios aspectos), AccessLint se enfoca exclusivamente en ella. Incluye cuatro skills especializadas, un agente de revisión con IA y un servidor MCP integrado para analizar el contraste de color mediante programación.

Qué incluye

4 skills:

1 agente:

El agente accesslint:reviewer realiza revisiones de accesibilidad del código exhaustivas y de varios pasos. Analiza tu base de código para detectar problemas de conformidad con los niveles A y AA de WCAG 2.1, recorre la base de código para comprender todo el contexto y genera informes de auditoría estructurados con problemas priorizados, niveles de gravedad y referencias a WCAG.

Servidor MCP:

El plugin también incluye un servidor MCP (@accesslint/mcp) que ofrece tres herramientas:

• calculate_contrast_ratio: calcula la proporción de contraste WCAG entre dos colores

• analyze_color_pair: análisis detallado de aprobado/reprobado para todos los tipos de contenido y niveles WCAG

• suggest_accessible_color: obtiene alternativas de color accesibles que cumplen los requisitos WCAG y conservan la intención del diseño

Las herramientas MCP están disponibles para todas las demás skills y agentes, así que puedes combinar AccessLint con otras skills de diseño de esta lista. Las herramientas para comprobar el contraste son particularmente útiles junto con skills que generan paletas de colores.

Cobertura de WCAG

El plugin comprueba la conformidad con los niveles A y AA, incluidos:

• Perceptible: texto alternativo, estructura semántica, contraste de color

• Operable: navegación con teclado, administración del foco, visibilidad del foco

• Comprensible: etiquetas claras, identificación de errores, comportamiento coherente

• Robusto: uso adecuado de ARIA, nombres y roles accesibles

Instalación

# Via plugin marketplace
/plugin marketplace add accesslint/claude-marketplace
/plugin install accesslint@accesslint

O de forma manual:

git clone https://github.com/accesslint/claude-marketplace.git
cp -r claude-marketplace/plugins/accesslint/skills/* ~/.claude/skills/

Uso

Check the contrast ratio between #333 and #f5f5f5 for normal text
Review src/components/ for accessibility issues
Fix accessibility problems in this form component
Check if my status indicators rely solely on color

Para quién es: Cualquier profesional de ingeniería UI/UX que se tome en serio la accesibilidad. Equipos de sistemas de diseño que necesitan garantizar el cumplimiento de WCAG. Desarrolladores que se preparan para auditorías de accesibilidad. Tiene pocas estrellas (8), pero la calidad de la skill es alta y su alcance está bien definido.

Recursos relacionados de Snyk:

• ¿Qué es el scripting entre sitios (XSS)? (es relevante porque el XSS suele aprovechar entradas de formularios mal gestionadas, un problema que se relaciona con la accesibilidad, como el uso de etiquetas adecuadas y HTML semántico)

• ¿Cómo puede una política de seguridad de contenido prevenir el XSS?

8. Skills de React Native de Vercel

Fuente: vercel-labs/agent-skills (ruta: skills/react-native-skills/) Estrellas: 19,487 Licencia: MIT Última actualización: enero de 2026 SKILL.md verificado: Sí

La UI/UX móvil tiene sus propias limitaciones de rendimiento y patrones de interacción. Las aplicaciones de React Native y Expo deben mantener 60 fps en dispositivos con memoria limitada, gestionar la navegación basada en gestos y respetar las convenciones de cada plataforma, que varían entre iOS y Android. Esta skill reúne los patrones más importantes para el rendimiento de la UI móvil.

Qué abarca

El rendimiento de listas tiene prioridad crítica porque las listas son el cuello de botella de rendimiento más común en las aplicaciones móviles. Las 8 reglas cubren: usar FlashList en lugar de FlatList, memorizar los elementos de la lista, estabilizar las referencias de las funciones callback, evitar objetos de estilo en línea, extraer funciones fuera del renderizado, optimizar las imágenes de las listas, trasladar el trabajo costoso fuera de los elementos y usar tipos de elemento para listas heterogéneas.

Los patrones de UI incluyen 10 reglas específicas para dispositivos móviles:

• Usa expo-image para todas las imágenes (no el componente Image integrado de React Native)

• Usa Pressable en lugar de TouchableOpacity

• Gestiona las áreas seguras en ScrollViews

• Usa contentInset para los encabezados en las vistas de desplazamiento

• Usa menús contextuales y ventanas modales nativas

• Usa onLayout en lugar de measure() para medir vistas

• Usa StyleSheet.create o NativeWind para aplicar estilos

Las reglas de Animación se enfocan en propiedades aceleradas por GPU: anima solo la transformación y la opacidad, usa useDerivedValue para las animaciones calculadas y usa Gesture.Tap en lugar de Pressable para las interacciones controladas por gestos.

Instalación

git clone https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/react-native-skills ~/.claude/skills/

Uso

Why is this FlatList scrolling slowly?
Optimize the performance of this React Native list
Implement a smooth page transition animation
Review this Expo app for performance issues

Para quién es: Desarrolladores de React Native y Expo que crean aplicaciones móviles donde el rendimiento de la UI es importante. Ingenieros de sistemas de diseño que mantienen bibliotecas de componentes multiplataforma.

Dónde encontrar e instalar Claude Skills (marketplace, GitHub y directorios de la comunidad)

Anthropic presentó Agent Skills en octubre de 2025 y no existe un único sitio web oficial de marketplace. Quienes diseñan con la aplicación Claude.ai pueden descubrir skills en Customize, Skills, Browse skills, donde aparecen skills de Anthropic y de socios como Notion, Figma y Atlassian, y donde puedes subir las tuyas. Anthropic también publica skills de ejemplo en github.com/anthropics/skills, incluidas algunas relevantes para diseño, como frontend-design.

Además de los repositorios oficiales, miles de skills de la comunidad están distribuidas por GitHub en listas seleccionadas como travisvn/awesome-claude-skills y VoltAgent/awesome-agent-skills, así como en sitios de directorio no oficiales que las recopilan. Como una skill es una carpeta SKILL.md con scripts opcionales que Claude ejecuta, una maliciosa puede ocultar un shell inverso en esas instrucciones y activarlo apenas se carga la skill. La investigación sobre marketplaces de skills envenenadas también descubrió que los analizadores automatizados de skills generan una falsa sensación de seguridad, ya que instrucciones que parecen inofensivas pueden encadenarse hasta obtener acceso al shell. Revisa cualquier skill de una fuente no oficial antes de instalarla y limita los recursos a los que puede acceder.

Seguridad al instalar skills

Hay cierta ironía en usar skills de IA para mejorar tu flujo de trabajo de diseño cuando el propio ecosistema de skills tiene riesgos de seguridad. El estudio ToxicSkills de Snyk descubrió que el 13 % de las skills evaluadas contenían fallas de seguridad críticas y que algunas intentaban activamente exfiltrar credenciales. La investigación SKILL.md to Shell Access demostró cómo tres líneas de Markdown en un archivo de skill pueden darle a un atacante acceso al shell de tu equipo.

Antes de instalar cualquier skill:

1. Lee el archivo SKILL.md y los scripts incluidos. Las skills son archivos de Markdown y scripts de shell, no binarios compilados. Puedes leer cada línea.

2. Comprueba la fuente. Las skills de organizaciones establecidas (Anthropic, Vercel) y de responsables de mantenimiento conocidos conllevan menos riesgos. Las skills de la comunidad requieren un análisis más minucioso.

3. Revisa los permisos. El campo de encabezado allowed-tools indica qué herramientas puede usar una skill. Una skill que necesita acceso a Bash requiere más revisión que una que solo usa Read y Grep.

4. Analiza con Snyk. Si ya usas Snyk Code o la integración de Snyk MCP, puedes analizar los scripts de las skills igual que cualquier otro código.

5. Ten especial cuidado con las skills que incluyen scripts de Python. UI/UX Pro Max (#5) incluye una herramienta de búsqueda en Python. Lee scripts/search.py antes de ejecutarla. En este caso, la herramienta consulta datos CSV locales y es segura, pero el principio general sigue siendo válido.

Las skills de esta lista provienen de fuentes confiables con licencias claras. Pero el principio general sigue siendo válido: confía, pero verifica.

Play Video: YouTube Video: ky6o6PXCXos

Brian Clark, de Snyk, muestra cómo crear una aplicación segura con Claude Code y luego analiza el código generado por IA para detectar vulnerabilidades. Este es el mismo flujo de análisis y corrección que puedes aplicar a los scripts de las skills antes de instalarlas.

Conclusión

Claude Skills ocupan un punto intermedio entre «solo un prompt» y «una integración completa». Para los profesionales de ingeniería UI/UX, resuelven un problema real: los asistentes de programación con IA son potentes, pero tienden a generar resultados genéricos si no les das el contexto adecuado. Una skill bien diseñada aporta ese contexto en un formato que se carga de forma eficiente y se activa cuando corresponde.

El panorama se divide en algunas categorías:

• Para la dirección creativa: la skill Frontend Design de Anthropic y la skill UX Designer de Bencium orientan a Claude hacia diseños distintivos e intencionales, en lugar de los resultados predeterminados de la IA.

• Para la inteligencia de diseño: UI/UX Pro Max ofrece a Claude una base de datos con búsquedas de estilos, paletas, fuentes y pautas de UX que puede consultar.

• Para la calidad y el cumplimiento: Web Design Guidelines de Vercel y AccessLint garantizan que los resultados cumplan los estándares de accesibilidad y las mejores prácticas web.

• Para los patrones de ingeniería: React Best Practices, Composition Patterns y React Native Skills de Vercel codifican los conocimientos de rendimiento y arquitectura que distinguen las bibliotecas de componentes profesionales de los prototipos.

El enfoque más eficaz es combinar habilidades de varias categorías. Instala la habilidad Frontend Design para lograr calidad estética, Web Design Guidelines para cumplir con los requisitos de accesibilidad y React Best Practices para mejorar el rendimiento. No entran en conflicto; se complementan y cada una agrega una capa distinta de calidad a los resultados de Claude.

La comunidad de UI/UX adopta las herramientas de IA no para reemplazar el criterio de diseño, sino para eliminar las fricciones en tareas que los diseñadores y desarrolladores de frontend ya saben realizar, pero que les resultan tediosas: crear estructuras para variantes accesibles de componentes, comprobar las relaciones de contraste, verificar el cumplimiento de listas de buenas prácticas y escribir diseños responsivos. Las habilidades permiten delegar estas tareas de manera estructurada.

Si ya usas Claude Code para trabajar en frontend, instalar algunas de estas habilidades es una inversión de 5 minutos que da frutos la primera vez que Claude genera una página de destino con verdadera personalidad tipográfica, detecta un incumplimiento de accesibilidad antes de que llegue a producción o refactoriza un componente con demasiadas props para convertirlo en un patrón de componentes compuestos más limpio.

Si buscas servidores MCP en lugar de Claude Skills, consulta nuestros 14 servidores MCP para ingenieros de UI/UX.