Agent skill · design visual · borghei
design-auditor
Audit UI/UX designs for quality, AI-generated slop, and accessibility. Use when reviewing designs, detecting slop patterns, validating WCAG compliance, checking design-token adherence, or reviewing responsive design across breakpoints.
Why this skill is useful
Adds four executable Python scripts for comprehensive UI/UX auditing that extend the AI's capabilities in design quality and accessibility checks.
What it needs
Requires python installed locally. About 3k tokens when loaded. Last updated 2026-07-21. 462 stars on the source repository.
What this skill does
Design Auditor Performs systematic 12-category UI/UX audits, detects AI-generated slop patterns, validates WCAG color contrast, and checks design system token compliance. Produces three independent grades: Design (A-F), AI Slop (A-F), and Accessibility (A-F). Core Capabilities Full design audit — score 12 weighted categories in five passes into a Design grade with prioritized recommendations and baseline comparison. AI slop detection — flag visual, copy, and structural slop in HTML/CSS with confidence scores and per-finding remediation. Accessibility audit — WCAG color-contrast checking (AA/AAA) with closest-compliant-color suggestions. Design-system compliance — detect hardcoded colors, spacing, fonts, radii, shadows, z-indices, and transitions that deviate from tokens; report compliance percentage. Three independent grades — Design (weighted aggregate), AI Slop (inverted), Accessibility (WCAG), each A–F. Operating system — 10 design principles, fix-session rules with a risk accumulator, and CI/CD gating. When to Use Reviewing a UI/UX design for quality, originality, and accessibility. Detecting AI-generated slop patterns in HTML/CSS. Validating WCAG color contrast or design-token adherence. Gating deployments or PRs on minimum compliance scores. Clarify First Before running the audit, confirm these inputs. If any is unknown or vague, ASK — do not assume: [ ] Audit type — full design score, AI-slop detection, contrast check, or token compliance (selects designscorer.py vs aislopdetector.py vs colorcontrastchecker.py vs designsystemvalidator.py) [ ] Input artifacts — the findings JSON, HTML/CSS, color pairs, or design-token file (the input each tool requires) [ ] Conformance level / threshold — WCAG AA vs AAA, slop confidence threshold, and the minimum passing grade (sets --level, --threshold, and the gate) Stop rule: ask only the 2-3 that most change the output. If the user says "just draft it," proceed and list your assumptions at the top of the artifact. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills borghei/design-auditor