Can I integrate Design Auditor into my CI/CD pipeline?

Absolutely. The skill includes Python-based tools designed to run as automated checks, allowing you to gate deployments based on minimum design quality or accessibility scores.

Does this skill support WCAG standards?

Yes, it specifically validates color contrast against WCAG AA and AAA standards and suggests the closest compliant hex code alternatives for any failing color pairs.

How does the design system validator work?

It compares your source CSS or SCSS files against a defined JSON token file to identify hardcoded values (colors, spacing, radii) and suggests the nearest approved design system token.

What is 'AI Slop' in the context of this skill?

AI Slop refers to generic, templated, or low-quality patterns often found in AI-generated designs, such as overuse of specific gradients, cookie-cutter feature grids, and vague call-to-actions like 'Get Started' without context.

Design Auditor

Name: Design Auditor
Author: borghei

byborghei

•

101

•

Design Tools

Audits UI/UX designs for quality, accessibility compliance, and AI-generated patterns while validating design system adherence.

The Design Auditor skill provides a comprehensive evaluation framework for frontend interfaces, performing systematic 12-category audits to ensure high-quality user experiences. It specifically targets common 'AI slop' patterns—such as generic layouts and repetitive copy—while validating WCAG 2.1 color contrast accessibility and enforcing design system token compliance through automated Python tools. By generating independent grades for design quality, AI originality, and accessibility, this skill helps developers maintain professional standards and catch visual regressions before they reach production.

Key Features

01Advanced AI slop detection for identifying generic or low-effort generated patterns.

02Prioritized fix recommendations with automated cosmetic remediation capabilities.

0312-category systematic UI/UX auditing with weighted grading (A-F).

04Design system token compliance monitoring for CSS and SCSS files.

05101 GitHub stars

06WCAG accessibility validation including automated batch color contrast checking.

Use Cases

01Auditing AI-generated frontend code to ensure it meets human-centric design standards and brand identity.

02Validating accessibility compliance (WCAG AA/AAA) across large-scale component libraries.

03Automating design quality gates in CI/CD pipelines to prevent visual and token regressions.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add borghei/claude-skills design-auditor

For use in Claude.ai and ChatGPT

Key Features

01Advanced AI slop detection for identifying generic or low-effort generated patterns.

02Prioritized fix recommendations with automated cosmetic remediation capabilities.

0312-category systematic UI/UX auditing with weighted grading (A-F).

04Design system token compliance monitoring for CSS and SCSS files.

05101 GitHub stars

06WCAG accessibility validation including automated batch color contrast checking.

Use Cases

01Auditing AI-generated frontend code to ensure it meets human-centric design standards and brand identity.

02Validating accessibility compliance (WCAG AA/AAA) across large-scale component libraries.

03Automating design quality gates in CI/CD pipelines to prevent visual and token regressions.