What problem does it solve?
Building a consistent design system from scratch is time-consuming, and identifying visual inconsistencies across an existing codebase often requires tedious manual review of every UI component. This Skill eliminates that overhead by automating design system generation, visual auditing, and styling PR reviews.
Core Features & Use Cases
- Design System Generation: Automatically scan your codebase for existing styling patterns (CSS, Tailwind, styled-components) to extract design tokens, research competitor sites for inspiration, and output a complete design system with rationale and an interactive preview page.
- Visual Consistency Auditing: Score your UI across 10 key dimensions (color consistency, typography hierarchy, spacing rhythm, accessibility, etc.) with specific, actionable fixes tied to exact file and line locations.
- AI Slop Detection: Identify generic, low-quality AI-generated design patterns like gratuitous gradients, default purple-blue palettes, unnecessary glass morphism, and excessive scroll animations.
- Use Case: Use this Skill when launching a new product that needs a design system, when your existing UI feels unpolished but you can't pinpoint the issues, or when reviewing PRs that modify styling to catch inconsistencies early.
Quick Start
Use the design-system skill to generate a complete design system for your new SaaS application with a minimal visual style and interactive preview page.
