/ Annuaire / Playground / Claude Design Auditor
← Tous les serveurs ↗ GitHub
● Communauté Ashutos1997 ⚡ Instantané

Claude Design Auditor

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

Examen systématique de la conception — typographie, contraste, espacement, a11y, mouvement, mode sombre, jetons, motifs sombres — noté de 0 à 100 avec le code avant/après.

claude-design-auditor-skill audite les conceptions dans tous les formats (Figma, HTML/CSS, React/Vue, captures d'écran, wireframes, descriptions en prose) par rapport à 18 règles professionnelles. Le résultat est un score de 0 à 100 avec des problèmes classés par gravité, des scores d'accessibilité et d'éthique séparés, des corrections de code avant/après et des rapports exportables (Markdown, Canva, transfert de développement). Utilisez-le pour tester une conception sous pression avant le transfert du développement, pour appliquer une barre de qualité dans les PR ou pour trier une liste de priorités de refonte.

▶ Voir la démo 📦 Installer 💡 Cas d'usage

Pourquoi l'utiliser

Fonctionnalités clés

Démo en direct

Aperçu en pratique

claude-design-auditor-skill.replay ▶ prêt
0/0

Installer

Choisissez votre client

~/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
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.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 utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

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
    }
  }
}

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "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
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.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"
      ]
    }
  ]
}

Continue utilise un tableau d'objets serveur plutôt qu'une 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"
        ]
      }
    }
  }
}

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

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

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : Claude Design Auditor

Auditer une conception avant de l'envoyer à l'ingénierie

👤 Les concepteurs de produits préparent le transfert du développement ⏱ ~30 min intermediate

Quand l'utiliser : La conception est « terminée » et vous souhaitez un dernier balayage avant que les développeurs ne commencent à la cloner.

Prérequis
  • Compétence installée — git clone https://github.com/Ashutos1997/claude-design-auditor-skill ~/.claude/skills/
Déroulement
  1. Invoquer l'auditeur
    Auditez ce lien Figma : <url>. Portée : complète.✓ Copié
    → Score + problèmes classés avec références aux 18 règles
  2. Corriger les critiques
    Appliquez les 5 principaux correctifs de haute gravité dans Figma ; montrer avant/après.✓ Copié
    → Aperçus avant/après pour chaque correctif
  3. Exporter le transfert
    Exportez une démarque de transfert de développement avec des jetons et des notes générales.✓ Copié
    → Markdown prêt à être ajouté au ticket

Résultat : Le design arrive au développement avec ses principaux problèmes déjà résolus.

Pièges
  • Traiter le score comme le but — Le score mesure le respect des règles, pas le goût. Utilisez la liste de résultats, pas seulement le numéro
Combiner avec : claude-code-design-skills

Accessibilité : vérifier un composant

👤 Les ingénieurs frontend expédient un nouveau composant ⏱ ~20 min beginner

Quand l'utiliser : Vous avez créé un contrôle de boîte de dialogue/menu/formulaire et souhaitez détecter tous les problèmes le plus tôt possible.

Déroulement
  1. Collez la source du composant
    Auditez ce composant React Dialog, portée : accessibilité + mouvement.✓ Copié
    → Les résultats citent les critères WCAG avec des lignes exactes à modifier
  2. Appliquer des correctifs
    Corrigez le composant avec les correctifs proposés ; garder l'API inchangée.✓ Copié
    → Diff respecte l'API existante

Résultat : Un composant qui survit à un examen d’accessibilité.

Pièges
  • L'auditeur exagère en matière de goût (par exemple, des pinaillements de style en mode a11y) — Contraindre explicitement la portée à a11y + motion
Combiner avec : motion-dev-animations-skill

Trier une interface utilisateur existante pour les priorités de refonte

👤 Les responsables de la conception possèdent une refonte ⏱ ~60 min advanced

Quand l'utiliser : Vous envisagez une refonte et avez besoin de données pour savoir par où commencer.

Déroulement
  1. Écrans de flux ou URL
    Auditez les 10 premiers écrans de app.<url>. Regroupez les résultats par gravité.✓ Copié
    → Rollup multi-écran avec points chauds
  2. Séquence de sélection
    Proposer un plan de séquençage de refonte regroupé par catégorie de règles.✓ Copié
    → Plan lié aux résultats, pas aux vibrations

Résultat : Un plan de refonte adossé à des défauts concrets.

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

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

Audit → Figma-to-code → ré-auditer le code

Auditez le Figma, convertissez-le en React, puis réauditez le React pour vérifier la parité.✓ Copié
claude-design-auditor-skill + motion-dev-animations-skill

Laissez les experts en mouvement ajouter/ajuster des animations, puis exécuter la portée de mouvement de l'auditeur

Ajouter des animations printanières par motion-dev ; puis auditez le mouvement + le comportement à mouvement réduit.✓ Copié
claude-design-auditor-skill + figma

Extrayez les actifs Figma via MCP, auditez et rédigez des commentaires

Pour chaque image signalée, ajoutez un commentaire Figma résumant le résultat.✓ Copié

Outils

Ce que ce MCP expose

OutilEntréesQuand appelerCoût
design-audit (SKILL) asset (Figma URL / image / code) + optional scope Avant le transfert, lors de la révision du code ou dans le cadre d'un plan de refonte 0

Coût et limites

Coût d'exécution

Quota d'API
Aucune
Tokens par appel
Grand : les captures d'écran et les longs blocs de code dominent
Monétaire
Gratuite
Astuce
Portée agressive (a11y uniquement ou typographie uniquement) pour des itérations rapides ; les audits complets nécessitent beaucoup de jetons.

Sécurité

Permissions, secrets, portée

Stockage des identifiants : Aucun; si les URL Figma sont privées, partagez-les via l'exportation d'images ou utilisez le Figma MCP avec la portée appropriée.
Sortie de données : Aucune sortie réseau de la compétence ; vos images et votre code restent dans le chat.

Dépannage

Erreurs courantes et correctifs

L'auditeur passe à côté de problèmes évidents

Augmentez la taille d'entrée ou fournissez plusieurs fenêtres/captures d'écran ; les heuristiques sont meilleures avec la couverture.

Vérifier : Re-run with extra screenshots
Jetons avertissant d'une production trop importante

Définissez la portée sur un sous-ensemble des 18 règles.

Vérifier : Ask for 'scope: typography + contrast + a11y' only
Les correctifs brisent le système de conception existant

Demandez à l'auditeur de rester dans votre ensemble de jetons ; fournir des jetons.json.

Vérifier : Before/after diffs reference token names

Alternatives

Claude Design Auditor vs autres

AlternativeQuand l'utiliserCompromis
claude-code-design-skillsVous souhaitez passer de Figma au code, pas auditer le travail existantCouvre l'autre côté du pipeline
ai-friendly-web-design-skillVous voulez des conseils généraux en matière de conception Web, pas un auditeur strictSortie moins structurée
apple-hig-designer-skillVous concevez spécifiquement pour les plates-formes AppleSpécifique à la plateforme plutôt qu’universel

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills