Design System

affaan-m/ECC/pi/core/skills/design-system

by affaan-mef648e01899ba3e8dc6371642deaaf64b4477775No license275K starsListed Oct 9, 2026Updated Oct 9, 2026Repository updated 4 days ago

Generate a design system from an existing codebase or audit one for visual consistency: extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties with DESIGN.md rationale and an interactive HTML preview, score the UI across 10 dimensions, and flag AI-slop patterns. Use when starting a design system, auditing visual consistency before a redesign, or reviewing a PR that touches styling.

Instructions onlyDesign & Creative

AI-generated overview

Generates or audits a design system from a codebase, extracting tokens and scoring visual consistency.

What it does: Analyzes an existing codebase to extract colors, typography, spacing, radius, shadows and breakpoints, then proposes design tokens as JSON and CSS custom properties. It produces DESIGN.md with rationale, an interactive self-contained HTML preview, a 10-dimension visual audit with file:line fixes, and flags generic AI-generated design patterns. It is instructions only and ships no scripts.
When to use it: Use when starting a design system for a new project, auditing an existing UI for visual consistency before a redesign, or reviewing a pull request that touches styling.
Requirements: No scripts are included; it relies on the agent reading the codebase. Competitor research uses a browser MCP, and the audit mode can target a running URL such as a local dev server.

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 patterns2. Extract: colors, typography, spacing, border-radius, shadows, breakpoints3. Research 3 competitor sites for inspiration (via browser MCP)4. Propose a design token set (JSON + CSS custom properties)5. Generate DESIGN.md with rationale for each decision6. Create an interactive HTML preview page (self-contained, no deps)

1. Scan CSS/Tailwind/styled-components for existing patterns2. Extract: colors, typography, spacing, border-radius, shadows, breakpoints3. Research 3 competitor sites for inspiration (via browser MCP)4. Propose a design token set (JSON + CSS custom properties)5. Generate DESIGN.md with rationale for each decision6. 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?2. Typography hierarchy — clear h1 > h2 > h3 > body > caption?3. Spacing rhythm — consistent scale (4px/8px/16px) or arbitrary?4. Component consistency — do similar elements look similar?5. Responsive behavior — fluid or broken at breakpoints?6. Dark mode — complete or half-done?7. Animation — purposeful or gratuitous?8. Accessibility — contrast ratios, focus states, touch targets9. Information density — cluttered or clean?10. Polish — hover states, transitions, loading states, empty states

1. Color consistency — are you using your palette or random hex values?2. Typography hierarchy — clear h1 > h2 > h3 > body > caption?3. Spacing rhythm — consistent scale (4px/8px/16px) or arbitrary?4. Component consistency — do similar elements look similar?5. Responsive behavior — fluid or broken at breakpoints?6. Dark mode — complete or half-done?7. Animation — purposeful or gratuitous?8. Accessibility — contrast ratios, focus states, touch targets9. Information density — cluttered or clean?10. 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

- 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:

Audit existing UI:

Check for AI slop:

Source and attribution

Source:affaan-m/ECCinpi/core/skills/design-systemat commitef648e0

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Design System

Design System — Generate & Audit Visual Systems

When to Use

How It Works

Mode 1: Generate Design System

Mode 2: Visual Audit

Mode 3: AI Slop Detection

Examples

Source and attribution

More from affaan-m/ECC

Unified Notifications Ops

Verification Loop

Ui To Vue

Unified Memory

Visa Doc Translate

Team Builder

More in Design & Creative

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design