Design Auditor

Scoret UI/UX-audit mod 19 regler med ægte WCAG kontrastmatematik og kodediffs

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

Testet · Virker ★ 8.8/10

Design Auditor — Scoret UI/UX-audit mod 19 regler med ægte WCAG kontrastmatematik og kodediffs

Hvad det gør

Auditerer designs og front-end kode (HTML/CSS/React/Vue/Tailwind) eller Figma-filer mod 19 kategorier, producerer en score fra 0-100, WCAG kontrastforhold, alvorlighedsgraduerede problemer og før/efter fix-diffs. Udløses af anmodninger om at gennemgå en UI, tjekke tilgængelighed, verificere farvekontrast eller køre en design/heuristisk audit. Engelsk og koreansk.

Testrapport

Fodrede den et tilmeldingskort med tre fejlende farvepar, og den beregnede de nøjagtige WCAG-forhold (#999/#fff = 2.85, #aaa/#fff = 2.32, white/#7c9fe0 = 2.66), som alle matchede en uafhængig Python luminanskontrol med to decimaler. Hvor en simpel no-skill gennemgang blot sagde, at teksten 'ser lys ud', returnerede færdigheden en scoret 0-100 rapport, der også fangede den 13px off-grid padding, under-12px brødtekst, manglende billed-alt, uetiketterede input og outline:none fokusfjernelse, hver med en copy-paste fix diff.

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

Kommandoer og eksempelprompter

/design-auditorScoret UI/UX-audit mod 19 regler med ægte WCAG kontrastmatematik og kodediffs

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

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 hele rapporten →