What problem does it solve? Design work often drifts into inconsistency: random hex colors, arbitrary spacing, and generic AI-generated styling that makes interfaces look off without a clear cause. This Skill generates a cohesive design system from your codebase or audits an existing UI with concrete, file-level fixes. ## Core Features & Use Cases - Design System Generation: Scans CSS, Tailwind, or styled-components to extract colors, typography, spacing, and shadows, then produces DESIGN.md, design-tokens.json, and a self-contained HTML preview page. - Visual Audit: Scores your UI across 10 dimensions including color consistency, typography hierarchy, spacing rhythm, dark mode, accessibility, and polish, each with specific examples and file:line fixes. - AI Slop Detection: Identifies generic AI-generated patterns such as gratuitous gradients, purple-to-blue defaults, and purposeless glass-morphism cards. - Use Case: Before a redesign of a SaaS app, run an audit against localhost pages to get a scored report of visual inconsistencies, then generate a token set with an earth-tones minimal palette as the new foundation. ## Quick Start Ask the AI to audit the visual consistency of your app running at localhost:3000 across the home, pricing, and docs pages.
