Skip to main content
Kodelyth ECC
Skill

design-system

Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.

Invoke via:use design-system
Origin:ECC

Design System — Generate & Audit Visual Systems

When to Use

  • Starting a new project that needs a design system
  • Auditing an existing codebase for visual consistency
  • Before a redesign — understand what you have
  • When the UI looks "off" but you can't pinpoint why
  • Reviewing PRs that touch styling

How It Works

Mode 1: Generate Design System

Analyzes your codebase and generates a cohesive design system:

1. Scan CSS/Tailwind/styled-components for existing patterns

  • Extract: colors, typography, spacing, border-radius, shadows, breakpoints
    • 

  • Research 3 competitor sites for inspiration (via browser MCP)
    • 

  • Propose a design token set (JSON + CSS custom properties)
    • 

  • Generate DESIGN.md with rationale for each decision
    • 

  • Create an interactive HTML preview page (self-contained, no deps)
    •

Output: DESIGN.md + design-tokens.json + design-preview.html

Mode 2: Visual Audit

Scores your UI across 10 dimensions (0-10 each):

1. Color consistency — are you using your palette or random hex values?

  • Typography hierarchy — clear h1 > h2 > h3 > body > caption?
    • 

  • Spacing rhythm — consistent scale (4px/8px/16px) or arbitrary?
    • 

  • Component consistency — do similar elements look similar?
    • 

  • Responsive behavior — fluid or broken at breakpoints?
    • 

  • Dark mode — complete or half-done?
    • 

  • Animation — purposeful or gratuitous?
    • 

  • Accessibility — contrast ratios, focus states, touch targets
    • 

  • Information density — cluttered or clean?
    • 

  • Polish — hover states, transitions, loading states, empty states
    •

Each dimension gets a score, specific examples, and a fix with exact file:line.

Mode 3: AI Slop Detection

Identifies generic AI-generated design patterns:

- Gratuitous gradients on everything

  • Purple-to-blue defaults
    • 

  • "Glass morphism" cards with no purpose
    • 

  • Rounded corners on things that shouldn't be rounded
    • 

  • Excessive animations on scroll
    • 

  • Generic hero with centered text over stock gradient
    • 

  • Sans-serif font stack with no personality
    •

Examples

Generate for a SaaS app: 

/design-system generate --style minimal --palette earth-tones

Audit existing UI: 

/design-system audit --url http://localhost:3000 --pages / /pricing /docs

Check for AI slop: 

/design-system slop-check

← All skills