Design Auditor

Poängsatt UI/UX-revision mot 19 regler med verklig WCAG-kontrastmatematik och kod-diffar

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

Testad · Fungerar ★ 8.8/10

Design Auditor — Poängsatt UI/UX-revision mot 19 regler med verklig WCAG-kontrastmatematik och kod-diffar

Vad den gör

Granskar design och front-end kod (HTML/CSS/React/Vue/Tailwind) eller Figma-filer mot 19 kategorier, producerar en poäng på 0-100, WCAG-kontrastförhållanden, allvarlighetsgradade problem och före/efter fix-diffar. Utlöses av förfrågningar om att granska ett UI, kontrollera tillgänglighet, verifiera färgkontrast eller köra en design/heuristisk revision. English och Korean.

Testrapport

Matade den med ett registreringskort med tre misslyckade färgpar och den beräknade de exakta WCAG-förhållandena (#999/#fff = 2.85, #aaa/#fff = 2.32, white/#7c9fe0 = 2.66), vilka alla matchade en oberoende Python-luminanskontroll till två decimaler. Där en enkel no-skill-granskning bara sa att texten 'looks light', returnerade färdigheten en poängsatt 0-100 rapport som också fångade 13px off-grid padding, sub-12px body text, missing image alt, unlabeled inputs, och outline:none focus removal, var och en med en copy-paste fix diff.

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

Kommandon och exempelprompter

/design-auditorPoängsatt UI/UX-revision mot 19 regler med verklig WCAG-kontrastmatematik och kod-diffar

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

Can you audit this signup form for WCAG contrast and accessibility issues
Score our landing page against design heuristics and flag what's broken
Check our Figma file for accessibility problems before we ship it

Läs hela rapporten →