Repolode
Enviar
plugin87

plugin87/ux-ui-agent-skills

Um kit de instruções e conhecimento que transforma Claude e outros agentes de programação em especialistas em design UX/UI, com tokens DTCG, especificações de componentes, 138 sistemas de design e 52 verificações objetivas.

Ver no GitHubSite
Estrelas
2,375
Forks
253
Issues abertas
11
Último commit
há 10 horas

O que é?

UX/UI Agent Skills é um kit de instruções estruturadas, tokens de design, skills executáveis e sistemas de design de referência que orientam um agente de programação com IA durante o trabalho de design. Ele gera tokens no formato DTCG, organizados em três níveis — Primitive, Semantic e Component —, cria componentes de átomos a templates com especificações de anatomia, estados e acessibilidade, e produz código para diversas frameworks por meio de um protocolo de adapters, incluindo React com Tailwind, Next.js, SwiftUI, Vue, Svelte e Flutter.

O projeto inclui 52 verificações que avaliam os resultados de forma objetiva. Cerca de 34 delas abrem um navegador headless para medir o HTML renderizado quanto ao contraste WCAG em cada estado, aos roles do axe-core, à operação por teclado, ao tamanho dos alvos, ao movimento reduzido e ao overflow horizontal em larguras estreitas. As demais verificações analisam arquivos de tokens, especificações de componentes e código-fonte em busca de valores hardcoded, emojis e controles destrutivos declarados sem intenção. O projeto também inclui uma biblioteca com 138 sistemas de design e um servidor MCP que disponibiliza as verificações, a doutrina e os tokens para qualquer cliente MCP.

As opções de instalação incluem um plugin do Claude Code, um comando npx, Homebrew e uma interface AGENTS.md para Codex, Cursor, Copilot e Aider. Os hooks que aplicam regras automaticamente estão disponíveis apenas no caminho do Claude Code.

Recursos principais

  • 01Gera tokens de design no formato DTCG em uma arquitetura de três níveis: Primitive, Semantic e Component.
  • 02Oferece 52 verificações objetivas, das quais cerca de 34 medem páginas renderizadas em um navegador headless.
  • 03As verificações abrangem contraste WCAG 2.2, operação por teclado, tamanho dos alvos e movimento reduzido.
  • 04Inclui uma biblioteca com 138 sistemas de design identificados pelo nome para consulta.
  • 05Adapta os resultados a frameworks como React, Next.js, SwiftUI, Vue, Svelte e Flutter.
  • 06Disponibiliza verificações, doutrina e tokens por meio de um servidor MCP.

Casos de uso

  • Pedir a um agente de programação que projete e desenvolva uma nova interface com tokens consistentes e verificações de acessibilidade.
  • Auditar uma interface existente em busca de problemas de contraste WCAG, tamanho dos alvos e overflow.
  • Adicionar um pipeline de tokens de design e especificações de componentes ao projeto front-end de uma equipe.
  • Usar um conjunto compartilhado de referências de sistemas de design ao migrar entre sistemas ou mapeá-los.

Início rápido

  1. 1

    Abra o Claude Code e instale o kit como plugin do Claude Code (opção A no README, dois comandos).

  2. 2

    Consulte docs/INSTALL.md para comparar as outras formas de instalação (AGENTS.md para Codex e Cursor, servidor MCP, Homebrew, npx).

Antes de usar

  • Os comandos de instalação do plugin estão cortados no trecho do README, então os comandos exatos não são mostrados aqui.
  • A verificação completa do gate pelo navegador abre um navegador real, o que exige configuração além da instalação do kit.

Tópicos

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

Perguntas frequentes

O que é ux-ui-agent-skills?
Um kit de instruções e conhecimento que transforma Claude e outros agentes de programação em especialistas em design UX/UI, com tokens DTCG, especificações de componentes, 138 sistemas de design e 52 verificações objetivas. UX/UI Agent Skills é um kit de instruções estruturadas, tokens de design, skills executáveis e sistemas de design de referência que orientam um agente de programação com IA durante o trabalho de design. Ele gera tokens no formato DTCG, organizados em três níveis — Primitive, Semantic e Component —, cria componentes de átomos a templates com especificações de anatomia, estados e acessibilidade, e produz código para diversas frameworks por meio de um protocolo de adapters, incluindo React com Tailwind, Next.js, SwiftUI, Vue, Svelte e Flutter.
ux-ui-agent-skills é gratuito? Qual é a licença?
ux-ui-agent-skills é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
ux-ui-agent-skills ainda é mantido?
Manutenção ativa. O último commit de ux-ui-agent-skills foi em 19 de out. de 2026.
Para que posso usar ux-ui-agent-skills?
Pedir a um agente de programação que projete e desenvolva uma nova interface com tokens consistentes e verificações de acessibilidade. Auditar uma interface existente em busca de problemas de contraste WCAG, tamanho dos alvos e overflow. Adicionar um pipeline de tokens de design e especificações de componentes ao projeto front-end de uma equipe. Usar um conjunto compartilhado de referências de sistemas de design ao migrar entre sistemas ou mapeá-los.
Como instalar ux-ui-agent-skills?
Abra o Claude Code e instale o kit como plugin do Claude Code (opção A no README, dois comandos). Consulte docs/INSTALL.md para comparar as outras formas de instalação (AGENTS.md para Codex e Cursor, servidor MCP, Homebrew, npx).
Onde consigo ux-ui-agent-skills?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/plugin87/ux-ui-agent-skills

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados