Design Auditor

Hodnocený UI/UX audit proti 19 pravidlům s reálnou WCAG kontrastní matematikou a code diffs

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

Otestováno · Funguje ★ 8.8/10

Design Auditor — Hodnocený UI/UX audit proti 19 pravidlům s reálnou WCAG kontrastní matematikou a code diffs

Co umí

Audituje designy a front-end kód (HTML/CSS/React/Vue/Tailwind) nebo Figma soubory proti 19 kategoriím, vytváří skóre 0-100, WCAG contrast ratios, severity-tiered issues a before/after fix diffs. Spouští se na požadavky na review UI, check accessibility, verify color contrast, nebo run a design/heuristic audit. Anglicky a korejsky.

Testovací report

Předložil jsem mu signup card se třemi selhávajícími barevnými páry a vypočítal přesné WCAG ratios (#999/#fff = 2.85, #aaa/#fff = 2.32, white/#7c9fe0 = 2.66), z nichž všechny odpovídaly nezávislé Python luminance check na dvě desetinná místa. Kde plain no-skill review jen řekl, že text 'looks light,' skill vrátil scored 0-100 report, který také zachytil 13px off-grid padding, sub-12px body text, missing image alt, unlabeled inputs a outline:none focus removal, každý s copy-paste fix diff.

Testováno: 2026-07-17 · Claude Code 2.x (agent harness)

Instalace

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

Příkazy a ukázkové prompty

/design-auditorHodnocený UI/UX audit proti 19 pravidlům s reálnou WCAG kontrastní matematikou a code diffs

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

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

Kompletní testovací report (anglicky) →