Design Auditor
Bewertetes UI/UX-Audit nach 19 Regeln mit echter WCAG-Kontrastberechnung und Code-Diffs
Getestet · Funktioniert
Was es kann
Prüft Designs und Front-End-Code (HTML/CSS/React/Vue/Tailwind) oder Figma-Dateien anhand von 19 Kategorien, erstellt einen 0-100-Score, WCAG-Kontrastverhältnisse, nach Schweregrad gestufte Probleme und Vorher/Nachher-Fix-Diffs. Triggert bei Anfragen zur Überprüfung einer UI, zur Barrierefreiheitsprüfung, zur Verifizierung des Farbkontrasts oder zur Durchführung eines Design-/heuristischen Audits. English und Korean.
Testbericht
Fütterte es mit einer Anmeldekarte mit drei fehlerhaften Farbkombinationen, und es berechnete die exakten WCAG-Verhältnisse (#999/#fff = 2.85, #aaa/#fff = 2.32, white/#7c9fe0 = 2.66), die alle mit einer unabhängigen Python-Luminanzprüfung auf zwei Dezimalstellen übereinstimmten. Wo eine einfache Überprüfung ohne Skill nur sagte, der Text 'sieht hell aus', lieferte der Skill einen bewerteten 0-100-Bericht, der auch das 13px Off-Grid-Padding, den Body-Text unter 12px, fehlende Bild-Alts, unbeschriftete Eingaben und die Entfernung des outline:none-Fokus erfasste, jeweils mit einem Copy-Paste-Fix-Diff.
Getestet am: 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
Befehle & Beispiel-Prompts
/design-auditorBewertetes UI/UX-Audit nach 19 Regeln mit echter WCAG-Kontrastberechnung und Code-Diffs
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
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