/ Diretório / Playground / Claude Design Auditor
← Todos os servidores ↗ GitHub
● Comunidade Ashutos1997 ⚡ Instantâneo

Claude Design Auditor

por Ashutos1997 · Ashutos1997/claude-design-auditor-skill

Revisão sistemática de design – tipografia, contraste, espaçamento, a11y, movimento, modo escuro, tokens, padrões escuros – pontuação de 0 a 100 com código antes/depois.

claude-design-auditor-skill audita projetos em vários formatos (Figma, HTML/CSS, React/Vue, capturas de tela, wireframes, descrições em prosa) de acordo com 18 regras profissionais. O resultado é uma pontuação de 0 a 100 com problemas classificados por gravidade, pontuações separadas de acessibilidade + ética, correções de código antes/depois e relatórios exportáveis ​​(Markdown, Canva, transferência de desenvolvimento). Use-o para testar a pressão de um design antes da transferência do desenvolvedor, para impor um padrão de qualidade em PRs ou para fazer a triagem de uma lista de prioridades de redesenho.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por que usar

Principais recursos

Demo ao vivo

Como fica na prática

claude-design-auditor-skill.replay ▶ pronto
0/0

Instalar

Escolha seu cliente

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "claude-design-auditor-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ],
      "_inferred": true
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "claude-design-auditor-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ],
      "_inferred": true
    }
  }
}

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "claude-design-auditor-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ],
      "_inferred": true
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "claude-design-auditor-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ],
      "_inferred": true
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "claude-design-auditor-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ]
    }
  ]
}

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json
{
  "context_servers": {
    "claude-design-auditor-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/Ashutos1997/claude-design-auditor-skill",
          "~/.claude/skills/claude-design-auditor"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

claude mcp add claude-design-auditor-skill -- git clone https://github.com/Ashutos1997/claude-design-auditor-skill ~/.claude/skills/claude-design-auditor

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

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.

Pré-requisitos
  • Habilidade instalada — clone git https://github.com/Ashutos1997/claude-design-auditor-skill ~/.claude/skills/
Fluxo
  1. Chame o auditor
    Audite este link do Figma: <url>. Escopo: completo.✓ Copiado
    → Pontuação + questões classificadas com referências às 18 regras
  2. 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
  3. 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

Acessibilidade - verifique um componente

👤 Engenheiros de front-end enviando um novo componente ⏱ ~20 min beginner

Quando usar: Você construiu um controle de diálogo/menu/formulário e deseja detectar todos os problemas antecipadamente.

Fluxo
  1. Cole a fonte do componente
    Audite este componente React Dialog, escopo: acessibilidade + movimento.✓ Copiado
    → As descobertas citam critérios WCAG com linhas exatas para mudança
  2. Aplicar correções
    Corrija o componente com as correções propostas; mantenha a API inalterada.✓ Copiado
    → Diff respeita a API existente

Resultado: Um componente que sobrevive a uma revisão de acessibilidade.

Armadilhas
  • Exagero do auditor no gosto (por exemplo, críticas de estilo no modo a11y) — Restringir o escopo explicitamente a a11y + motion
Combine com: motion-dev-animations-skill

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
  1. 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
  2. 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

FerramentaEntradasQuando chamarCusto
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.

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

AlternativaQuando usarTroca
claude-code-design-skillsVocê quer ir do Figma para o código, não auditar o trabalho existenteCobre o outro lado do pipeline
ai-friendly-web-design-skillVocê deseja uma orientação ampla sobre web design, não um auditor estritoResultado menos estruturado
apple-hig-designer-skillVocê está projetando especificamente para plataformas AppleEspecí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