Design Auditor
Audit UI/UX con punteggio rispetto a 19 regole con calcoli reali di contrasto WCAG e diff di codice
Promosso
Cosa fa
Audita design e codice front-end (HTML/CSS/React/Vue/Tailwind) o file Figma rispetto a 19 categorie, producendo un punteggio da 0 a 100, rapporti di contrasto WCAG, problemi classificati per gravità e diff delle correzioni prima/dopo. Si attiva su richieste di revisione di un'interfaccia utente, verifica dell'accessibilità, verifica del contrasto cromatico o esecuzione di un audit di design/euristico. English and Korean.
Rapporto di test
Fornita una scheda di registrazione con tre coppie di colori non conformi, ha calcolato i rapporti WCAG esatti (#999/#fff = 2.85, #aaa/#fff = 2.32, white/#7c9fe0 = 2.66), tutti corrispondenti a un controllo indipendente di luminanza Python con due decimali. Laddove una semplice revisione senza skill diceva solo che il testo 'looks light', la skill ha restituito un rapporto con punteggio da 0 a 100 che ha anche rilevato il padding di 13px fuori griglia, il testo del corpo inferiore a 12px, l'alt dell'immagine mancante, gli input non etichettati e la rimozione del focus outline:none, ciascuno con un diff di correzione copia-incolla.
Testato il: 2026-07-17 · Claude Code 2.x (agent harness)
Installazione
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
Comandi e prompt di esempio
/design-auditorAudit UI/UX con punteggio rispetto a 19 regole con calcoli reali di contrasto WCAG e diff di codice
Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):
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