Design Auditor
Audit UI/UX noté selon 19 règles avec calcul de contraste WCAG réel et diffs de code
Testé · Fonctionne
Ce que fait
Audite les conceptions et le code front-end (HTML/CSS/React/Vue/Tailwind) ou les fichiers Figma selon 19 catégories, produisant un score de 0 à 100, des rapports de contraste WCAG, des problèmes classés par gravité et des diffs de correction avant/après. Se déclenche sur les demandes de révision d'une interface utilisateur, de vérification de l'accessibilité, de vérification du contraste des couleurs ou d'exécution d'un audit de conception/heuristique. English et Korean.
Rapport de test
Fourni une carte d'inscription avec trois paires de couleurs défaillantes et il a calculé les rapports WCAG exacts (#999/#fff = 2.85, #aaa/#fff = 2.32, white/#7c9fe0 = 2.66), tous correspondant à une vérification indépendante de luminance Python à deux décimales. Là où une simple révision sans compétence disait juste que le texte 'looks light', la compétence a renvoyé un rapport noté de 0 à 100 qui a également détecté le padding de 13px hors grille, le texte de corps inférieur à 12px, l'alt d'image manquant, les entrées non étiquetées et la suppression du focus outline:none, chacun avec un diff de correction à copier-coller.
Testé le: 2026-07-17 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/Ashutos1997/claude-design-auditor-skill mkdir -p ~/.claude/skills cd claude-design-auditor-skill && cp -r . ~/.claude/skills/design-auditor
Commandes et exemples de prompts
/design-auditorAudit UI/UX noté selon 19 règles avec calcul de contraste WCAG réel et diffs de code
Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :
Can you audit this signup form for WCAG contrast and accessibility issuesScore our landing page against design heuristics and flag what's brokenCheck our Figma file for accessibility problems before we ship it