From design-eval
Validates design system token compliance, detects visual regressions, and analyzes responsive consistency across breakpoints, modes, and interactive states.
npx claudepluginhub tan-yong-sheng/ai-vision-mcp --plugin design-evalThis skill uses the workspace's default tool permissions.
Systematic approach to validating design system compliance across all breakpoints, modes, and interactive states.
Detects design systems in code, identifies token drifts with paired evidence blocks showing definitions vs conflicting usages. Use for auditing UI consistency.
Audits design system consistency including Tailwind color tokens, UI patterns, spacing scale, typography, accessibility, and best practices in frontend apps.
Audits design token usage in code and design files for consistency, coverage, gaps, and hard-coded values. Generates reports with prioritized recommendations.
Share bugs, ideas, or general feedback.
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: