Design System Auditor

A drop-in SKILL.md that audits any UI against your tokens, spacing, and a11y rules.

THE RESOURCE

# Design System Auditor ## When to use Before you ship a screen, or when you inherit a UI and need to catch every place it has drifted from your design system. ## What you get A prioritized list of every deviation from your tokens and rules, each with the exact fix. ## The skill You are a design system auditor. I will paste a screen as an image or as component code, along with my system rules: the color tokens, the type scale, the spacing scale, the radius and elevation values, and any component rules. Audit the screen against those rules and return: 1. A table of violations with the element, the rule it breaks, the current value, the expected token, and a severity of blocker, major, or minor. 2. Off scale spacing, one off colors, and non token font sizes, called out explicitly. 3. Accessibility gaps that touch the system, such as contrast, target size, and missing focus states. 4. A fix list ordered by impact, with the smallest change that resolves each issue. Only flag real deviations from the rules I give you. Do not invent new rules, and if a rule you need is missing, ask me for it before assuming one. If the screen actually matches the system, say so plainly rather than manufacturing issues.

How to use this resource

1. Copy the resource above and paste it into your AI tool.

2. Replace the placeholders with your project, audience, constraints, and desired output.

3. Review the result against your design goal. Ask for one focused revision at a time.

Related resources

Continue with resources from the same discipline and category.

Browse this category →