Design System — Generate & Audit Visual Systems

What problem does it solve?

It resolves confusing, inconsistent UI styling by turning scattered CSS/Tailwind/component styles into a coherent token-based design system or by auditing what’s currently breaking visual consistency and accessibility.

Core Features & Use Cases

• Design system generation: Scans existing CSS/Tailwind/styled-component patterns to extract colors, typography, spacing, radii, shadows, and breakpoints, then outputs a token set plus documentation and a no-dependency HTML preview for stakeholders.
• Visual audit scoring: Evaluates the UI across 10 dimensions (palette consistency, typography hierarchy, spacing rhythm, component consistency, responsive behavior, dark mode completeness, animation intent, accessibility, information density, and polish) and produces actionable fixes with file:line references.
• AI slop detection: Flags common generic/over-styled patterns (e.g., gradient overuse, glass morphism misuse, mismatched rounding, excessive scroll animation, stock-gradient hero) to help you replace “template” design choices with intentional ones.

Quick Start

Run the design-system skill in generate mode to scan your repository and produce DESIGN.md, design-tokens.json, and an interactive design-preview.html.