Accessibilité : vérifier un composant

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. Un composant qui survit à un examen d’accessibilité.

Claude Design Auditor (Claude Skill) — Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

18 catégories d'audit — typographie, contraste, espacement, hiérarchie, cohérence, a11y, formes, mouvement, mode sombre, réactif, états, copie, i18n/RTL, élévation, iconographie, navigation, jetons, éthique
Formats d'entrée multiples : Figma, HTML/CSS, React/Vue, captures d'écran, wireframes, prose
Score 0-100, étiquettes de gravité, scores séparés a11y + éthique
Exemples de code avant/après pour chaque correctif
Exportations : Markdown, Canva, transfert du développeur

Démo en direct

Aperçu en pratique

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

0/0

Installation

Dépôt de l’auteur · Documentation officielle des Skills Claude

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.

Déroulement

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

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

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

Outil	Entrées	Quand appeler	Coû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.

Un score vert ≠ un bon design. L'auditeur fait respecter les règles ; L’adéquation produit-marché, la marque et l’émotion sont à vous de juger.
La catégorie éthique/modèle sombre est heuristique. Utilisez-le comme une incitation à discuter, et non comme un verdict dans une salle d'audience.

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

Alternative	Quand l'utiliser	Compromis
claude-code-design-skills	Vous souhaitez passer de Figma au code, pas auditer le travail existant	Couvre l'autre côté du pipeline
ai-friendly-web-design-skill	Vous voulez des conseils généraux en matière de conception Web, pas un auditeur strict	Sortie moins structurée
apple-hig-designer-skill	Vous concevez spécifiquement pour les plates-formes Apple	Spé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