What is the design-auditor skill?
The design-auditor skill scores a front end on three independent grades, each from A to F: Design, AI Slop and Accessibility. It audits 12 categories and ships four Python scripts for scoring, slop detection, contrast checks and token validation. It reads static HTML and CSS only, not a live browser.
Design-auditor lives in the engineering folder of a repository that holds 385 skills. It audits a UI across 12 categories, checks colour contrast and token use against WCAG, and flags the generic look of AI-made interfaces.
Three grades instead of one score
- Design: the weighted aggregate of 12 weighted categories.
- AI Slop: how much of the interface reads as generic machine output.
- Accessibility: WCAG AA is the floor, and accessibility findings are never rated Low.
Each grade runs from A to F and stands alone: Design is a weighted aggregate, AI Slop is inverted and Accessibility follows WCAG. The report gives all three separately.
How a session starts
The skill opens with a Clarify First step covering audit type, input artifacts and threshold. Its stop rule limits the agent to the 2 to 3 questions that matter, so it moves on to the audit quickly.
Who the design-auditor skill is for
Best for
- Auditing HTML and CSS that an AI agent generated, before anyone treats it as finished.
- Checking colour pairs against WCAG AA and getting suggested fixes.
- Teams that want a pass or fail threshold and CI gating on design quality.
Not for
- Rendered layout testing. The skill reads static HTML and CSS and does not run live browsers or render-test layouts.
- A hands-on screenshot review of a running app. See web-design-reviewer.
- A deep accessibility pass on code. Pair it with accessibility-audit.
Use it with UiChemy
Run the audit on the HTML and CSS an agent produced before it becomes a page. UiChemy AI to WordPress imports an AI build, and Composer edits it in Elementor or Gutenberg. Click Get Started on uichemy.com. The grades describe source files, so re-check the imported page. Related: anti-ui-slop.
How to install Design Auditor Skill: UI Audits with Three Grades
git clone https://github.com/borghei/Claude-Skills.gitClone the repository
Run
git clone https://github.com/borghei/Claude-Skills.git. The skill sits in the engineering/design-auditor folder.Copy the skill folder
Copy engineering/design-auditor into the folder your agent loads skills from. Keep the scripts, references and assets folders with SKILL.md.
Check the other routes
The README also describes adding the repo as a plugin in Claude Cowork through Customize and Browse plugins, and docs/INSTALLATION.md covers plugin, MCP server and manual installs.
Run an audit
Ask your agent to audit a page. Answer the few clarifying questions, then supply the HTML and CSS or a findings file.
Check that it loaded
Give the agent one HTML file and its stylesheet. It should ask for audit type and threshold, then report Design, AI Slop and Accessibility grades.
Key features
- 12 category auditThe skill reviews a UI across 12 categories of UI and UX quality and validates the result against WCAG and design tokens.
- Three independent gradesDesign, AI Slop and Accessibility each get their own A to F grade, so a strong result in one area cannot hide a failure in another.
- Scoring scriptdesign_scorer.py takes findings in JSON with --input, writes a report with --output and prints detail with --verbose.
- AI slop detectorai_slop_detector.py reads a page with --input and a stylesheet with --css, and applies a --threshold such as 0.6.
- Contrast checkercolor_contrast_checker.py reads colour pairs from JSON, tests them at a --level such as AA and can --suggest-fixes.
- Token validatordesign_system_validator.py compares a tokens JSON file against the styles under a source folder to check token compliance.
- Clarify First stepBefore auditing, the agent confirms audit type, input artifacts and threshold, and asks only the 2 to 3 questions that matter.
- Accessibility floorWCAG AA is the minimum, and accessibility findings are never rated Low, so they cannot be pushed to the bottom of the report.
- Fix sessions and CI gatingThe skill includes fix session rules with a risk accumulator and guidance for gating on audit results in CI/CD.
- References and assetsReference files cover audit workflows, methodology, AI slop patterns and an accessibility checklist, with a report template and sample audit data.
Frequently asked questions
What is the design-auditor skill?
It is a skill in the engineering folder of borghei's skills repository. It audits a UI across 12 categories, checks contrast and token compliance, detects AI slop and reports three separate grades from A to F for design, AI slop and accessibility.
How do I install the design-auditor skill?
Clone the borghei skills repository and copy engineering/design-auditor into the place your agent loads skills from. The README also describes a Cowork route through Customize and Browse plugins, and docs/INSTALLATION.md covers plugin, MCP server and manual installs.
What do the Python scripts do?
Four scripts sit in scripts/. One scores findings, one detects AI slop in a page and stylesheet, one checks colour contrast at a WCAG level and one validates design tokens against styles. Each supports a json or text format and an output file option.
Can design-auditor test a live site?
No. The skill states its scope as static HTML and CSS. It does not run live browsers or render-test layouts. For a check of a running page, you need another tool or a manual pass alongside the audit, since the grades describe source files.
What counts as AI slop?
The skill has a dedicated detector script and a reference file of AI slop patterns, and it grades slop separately from design and accessibility. The exact pattern list lives in the reference file, so read it in the repository if you need the criteria.
Which AI agents does design-auditor support?
The README lists Claude Code, Codex, Gemini CLI, Cursor, Copilot, Windsurf, Cline and Goose as native platforms, with Aider, Jules and RooCode as compatible. Support still depends on the agent loading a SKILL.md folder, so test it with one audit.
How strict is the accessibility grade?
WCAG AA is treated as the floor, and accessibility findings are never rated Low. That keeps contrast problems from being dismissed as minor polish. The contrast script can also test pairs against a chosen level and suggest fixes.
What license does the design-auditor skill use?
GitHub's license field does not report a recognised license for this repository. The SKILL.md frontmatter and the README both say MIT plus Commons Clause. Read the license in the repository before using it commercially or redistributing it.