Repolode
Enviar
plugin87

plugin87/ux-ui-agent-skills

Kit de instrucciones y conocimientos que convierte Claude y otros agentes de programación en expertos en diseño UX/UI, con tokens DTCG, especificaciones de componentes, 138 sistemas de diseño y 52 comprobaciones objetivas.

Ver en GitHubSitio web
Estrellas
2,375
Forks
253
Issues abiertos
11
Último commit
hace 11 horas

¿Qué es?

UX/UI Agent Skills es un kit de instrucciones estructuradas, tokens de diseño, skills ejecutables y sistemas de diseño de referencia que guía a un agente de programación con IA en las tareas de diseño. Genera tokens en formato DTCG organizados en tres niveles —Primitive, Semantic y Component—, diseña componentes desde átomos hasta plantillas con especificaciones de anatomía, estados y accesibilidad, y genera código para diversos frameworks mediante un protocolo de adaptadores, incluidos React con Tailwind, Next.js, SwiftUI, Vue, Svelte y Flutter.

El proyecto incluye 52 comprobaciones objetivas de los resultados. Alrededor de 34 abren un navegador headless para medir el HTML renderizado y comprobar el contraste WCAG en cada estado, los roles de axe-core, la navegación con teclado, el tamaño de los objetivos, el movimiento reducido y el desbordamiento horizontal en anchos reducidos. Las comprobaciones restantes analizan archivos de tokens, especificaciones de componentes y código fuente para detectar valores codificados directamente, emojis y controles destructivos declarados sin una intención explícita. También incluye una biblioteca con 138 sistemas de diseño y un servidor MCP que ofrece las comprobaciones, los principios y los tokens a cualquier cliente MCP.

Las opciones de instalación incluyen un plugin de Claude Code, un comando npx, Homebrew y una interfaz AGENTS.md para Codex, Cursor, Copilot y Aider. Los hooks que aplican reglas automáticamente solo están disponibles en la opción de Claude Code.

Funciones clave

  • 01Genera tokens de diseño en formato DTCG con una arquitectura de tres niveles: Primitive, Semantic y Component.
  • 02Ofrece 52 comprobaciones objetivas; alrededor de 34 miden páginas renderizadas en un navegador headless.
  • 03Comprueba el contraste WCAG 2.2, la navegación con teclado, el tamaño de los objetivos y el movimiento reducido.
  • 04Incluye una biblioteca de 138 sistemas de diseño con nombre, como referencia.
  • 05Adapta los resultados a frameworks como React, Next.js, SwiftUI, Vue, Svelte y Flutter.
  • 06Ofrece comprobaciones, principios y tokens mediante un servidor MCP.

Casos de uso

  • Pedir a un agente de programación que diseñe y construya una nueva interfaz con tokens coherentes y comprobaciones de accesibilidad.
  • Auditar una interfaz existente para detectar problemas de contraste WCAG, tamaño de objetivos y desbordamiento.
  • Añadir un pipeline de tokens de diseño y especificaciones de componentes al proyecto front-end de un equipo.
  • Usar un conjunto compartido de referencias de sistemas de diseño al migrar entre sistemas o establecer correspondencias entre ellos.

Inicio rápido

  1. 1

    Abre Claude Code e instala el kit como plugin de Claude Code (opción A del README, dos comandos).

  2. 2

    Consulta docs/INSTALL.md para comparar las otras formas de instalación (AGENTS.md para Codex y Cursor, servidor MCP, Homebrew, npx).

Antes de usarlo

  • Los comandos para instalar el plugin están cortados en el fragmento del README, así que aquí no se muestran los comandos exactos.
  • La verificación completa de la puerta mediante el navegador abre un navegador real, lo que requiere configuración adicional a la instalación del kit.

Temas

#design-system#design-tokens#accessibility#wcag#ai-agents#claude-code#ui#tailwindcss#claude#claude-skills

Preguntas frecuentes

¿Qué es ux-ui-agent-skills?
Kit de instrucciones y conocimientos que convierte Claude y otros agentes de programación en expertos en diseño UX/UI, con tokens DTCG, especificaciones de componentes, 138 sistemas de diseño y 52 comprobaciones objetivas. UX/UI Agent Skills es un kit de instrucciones estructuradas, tokens de diseño, skills ejecutables y sistemas de diseño de referencia que guía a un agente de programación con IA en las tareas de diseño. Genera tokens en formato DTCG organizados en tres niveles —Primitive, Semantic y Component—, diseña componentes desde átomos hasta plantillas con especificaciones de anatomía, estados y accesibilidad, y genera código para diversos frameworks mediante un protocolo de adaptadores, incluidos React con Tailwind, Next.js, SwiftUI, Vue, Svelte y Flutter.
¿ux-ui-agent-skills es gratuito? ¿Qué licencia tiene?
ux-ui-agent-skills es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿ux-ui-agent-skills sigue mantenido?
Mantenimiento activo. El último commit de ux-ui-agent-skills fue el 19 oct 2026.
¿Para qué puedo usar ux-ui-agent-skills?
Pedir a un agente de programación que diseñe y construya una nueva interfaz con tokens coherentes y comprobaciones de accesibilidad. Auditar una interfaz existente para detectar problemas de contraste WCAG, tamaño de objetivos y desbordamiento. Añadir un pipeline de tokens de diseño y especificaciones de componentes al proyecto front-end de un equipo. Usar un conjunto compartido de referencias de sistemas de diseño al migrar entre sistemas o establecer correspondencias entre ellos.
¿Cómo se instala ux-ui-agent-skills?
Abre Claude Code e instala el kit como plugin de Claude Code (opción A del README, dos comandos). Consulta docs/INSTALL.md para comparar las otras formas de instalación (AGENTS.md para Codex y Cursor, servidor MCP, Homebrew, npx).
¿Dónde consigo ux-ui-agent-skills?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/plugin87/ux-ui-agent-skills

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados