Acessibilidade - verifique um componente

Você construiu um controle de diálogo/menu/formulário e deseja detectar todos os problemas antecipadamente. Um componente que sobrevive a uma revisão de acessibilidade.

Claude Design Auditor (Claude Skill) — Instalar & Demo ao vivo

Por que usar

Principais recursos

18 categorias de auditoria — tipografia, contraste, espaçamento, hierarquia, consistência, a11y, formulários, movimento, modo escuro, responsivo, estados, cópia, i18n/RTL, elevação, iconografia, navegação, tokens, ética
Vários formatos de entrada: Figma, HTML/CSS, React/Vue, capturas de tela, wireframes, prosa
Pontuação de 0 a 100, rótulos de gravidade, pontuações separadas a11y + ética
Exemplos de código antes/depois para cada correção
Exportações: Markdown, Canva, transferência de desenvolvedor

Demo ao vivo

Como fica na prática

claude-design-auditor-skill.replay ▶ pronto

0/0

Instalação

Repositório do autor · Documentação oficial de Skills do Claude

Casos de uso

Usos do mundo real: Claude Design Auditor

Audite um projeto antes de enviá-lo para a engenharia

👤 Designers de produto preparando a transferência de desenvolvimento ⏱ ~30 min intermediate

Quando usar: O design está ‘pronto’ e você deseja uma varredura final antes que os desenvolvedores comecem a cloná-lo.

Fluxo

Chame o auditor

Audite este link do Figma: <url>. Escopo: completo.✓ Copiado

→ Pontuação + questões classificadas com referências às 18 regras
Corrija os críticos

Aplique as 5 principais correções de alta gravidade no Figma; mostrar antes/depois.✓ Copiado

→ Pré-visualizações antes/depois de cada correção
Exportar a transferência

Exporte uma redução de transferência de desenvolvimento com tokens e notas a11y.✓ Copiado

→ Markdown pronto para cair no ticket

Resultado: O design chega ao dev com seus principais problemas já resolvidos.

Armadilhas

Tratar o placar como gol — A pontuação mede a adesão às regras, não o gosto. Use a lista de descobertas, não apenas o número

Combine com: claude-code-design-skills

Triagem de uma UI legada para prioridades de redesenho

👤 Leads de design possuem um redesenho ⏱ ~60 min advanced

Quando usar: Você está planejando uma reformulação e precisa de dados sobre por onde começar.

Fluxo

Telas de feed ou URLs

Audite as 10 principais telas do aplicativo.<url>. Agregue descobertas por gravidade.✓ Copiado

→ Rollup entre telas com pontos de acesso
Escolha o sequenciamento

Propor um plano de sequenciamento de redesenho agrupado por categoria de regra.✓ Copiado

→ Plano vinculado a descobertas, não a vibrações

Resultado: Um plano de redesenho apoiado em defeitos concretos.

Combinações

Combine com outros MCPs para 10× de alavancagem

claude-design-auditor-skill + claude-code-design-skills

Auditoria → Figma-to-code → auditar novamente o código

Audite o Figma, converta para React e audite novamente o React para verificar a paridade.✓ Copiado

claude-design-auditor-skill + motion-dev-animations-skill

Deixe que os especialistas em movimento adicionem/ajustem animações e, em seguida, executem o escopo de movimento do auditor

Adicione animações de primavera por motion-dev; em seguida, audite o movimento + comportamento de movimento reduzido.✓ Copiado

claude-design-auditor-skill + figma

Extraia ativos Figma via MCP, audite e escreva comentários

Para cada quadro sinalizado, adicione um comentário Figma resumindo a descoberta.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar	Custo
design-audit (SKILL)	asset (Figma URL / image / code) + optional scope	Antes da transferência, na revisão do código ou como parte de um plano de redesenho	0

Custo e limites

O que custa rodar

Cota de API: Nenhum
Tokens por chamada: Grande – capturas de tela e longos blocos de código dominam
Monetário: Livre
Dica: Escopo agressivamente (somente apenas ou apenas tipografia) para iterações rápidas; auditorias completas exigem muitos tokens.

Segurança

Permissões, segredos, alcance

Armazenamento de credenciais: Nenhum; se os URLs do Figma forem privados, compartilhe via exportação de imagem ou use o Figma MCP com escopo adequado.

Saída de dados: Nenhuma saída de rede da habilidade; suas imagens e código permanecem no chat.

Uma pontuação verde ≠ bom design. O auditor aplica regras; A adequação do produto ao mercado, a marca e a emoção são suas para julgar.
A categoria ética/padrão obscuro é heurística. Use como um estímulo para discutir, não como um veredicto de tribunal.

Solução de problemas

Erros comuns e correções

Auditor deixa passar questões óbvias

Aumente o tamanho da entrada ou forneça múltiplas viewports/capturas de tela; heurísticas são melhores com cobertura.

Verificar: Re-run with extra screenshots

Tokens avisando sobre muita produção

Defina o escopo para um subconjunto das 18 regras.

Verificar: Ask for 'scope: typography + contrast + a11y' only

Correções quebram o sistema de design existente

Instrua o auditor a permanecer dentro do seu conjunto de tokens; fornecer tokens.json.

Verificar: Before/after diffs reference token names

Alternativas

Claude Design Auditor vs. outros

Alternativa	Quando usar	Troca
claude-code-design-skills	Você quer ir do Figma para o código, não auditar o trabalho existente	Cobre o outro lado do pipeline
ai-friendly-web-design-skill	Você deseja uma orientação ampla sobre web design, não um auditor estrito	Resultado menos estruturado
apple-hig-designer-skill	Você está projetando especificamente para plataformas Apple	Específico da plataforma em vez de universal

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills