Stats
Actions
Tags
From design-eval
Validates design system token compliance, detects visual regressions, and analyzes responsive consistency across breakpoints, modes, and interactive states.
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-eval:visual-consistency-validationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Systematic approach to validating design system compliance across all breakpoints, modes, and interactive states.
Systematic approach to validating design system compliance across all breakpoints, modes, and interactive states.
Every violation must be: (1) mapped to a specific token, (2) quantified, (3) severity-categorized, and (4) provided with remediation. No rationalization allowed.
Every violation follows this template:
Property: [CSS property]
Current: [actual value]
Token: [token name from design system]
Expected: [token value]
Difference: [quantified: pixels, %, hex delta]
Validate everything:
| Level | When |
|---|---|
| CRITICAL | Accessibility/layout failures (WCAG contrast, broken states, layout shifts) |
| HIGH | Token violations with user impact (colors, spacing, typography) |
| MEDIUM | Minor deviations (< 10% difference) |
| LOW | Very minor (< 5% difference) |
Rule: All WCAG failures → CRITICAL (regardless of context).
| Red Flag | What to Do |
|---|---|
| "Close enough" | Measure it. Report every difference. |
| "Desktop is primary" | Analyze all breakpoints equally. |
| "Light mode is primary" | Analyze all modes equally. |
| "Minor refinement" | Categorize by severity and report. |
| "Typical for design systems" | Escalate accessibility failures to CRITICAL. |
| "Not evaluating hover states" | Validate all interactive states. |
| "Acceptable variance" | Quantify and report every deviation. |
Before completing analysis:
Detailed implementation guidance:
npx claudepluginhub tan-yong-sheng/ai-vision-mcp --plugin design-evalAudits frontend code for design consistency, accessibility (WCAG AA), responsive behavior, and UI/UX best practices before deployment or after design system changes.
Generates design systems from codebase patterns, audits visual consistency across 10 dimensions, and detects generic AI-generated design patterns. Useful for new projects, redesigns, or styling PR reviews.
Audits design token usage in code and design files for consistency, coverage, gaps, and hard-coded values. Generates reports with prioritized recommendations.