design-system
affaan-m/ecc
Generate, audit, and maintain cohesive design systems; detect visual inconsistencies and AI-generated design patterns.
What is design-system?
This skill analyzes your codebase to generate design systems from scratch, audits existing UIs for visual consistency across 10 dimensions, and identifies generic AI-generated design patterns. Use it when starting a new project, redesigning, or when your UI feels inconsistent but you can't pinpoint why.
- Generate design token sets (colors, typography, spacing, shadows, breakpoints) from existing CSS/Tailwind/styled-components
- Score your UI across 10 dimensions (color consistency, typography, spacing, responsiveness, accessibility, etc.) with specific file:line fixes
- Extract and propose cohesive design systems with rationale in DESIGN.md format
- Create interactive HTML preview pages for design tokens without dependencies
- Detect generic AI-generated design patterns (gratuitous gradients, glass morphism, excessive animations, etc.)
- Research competitor design systems for inspiration via browser integration
How to install design-system
npx skills add null --skill design-systemHow to use design-system
- 1.Run `/design-system generate --style [minimal|modern|bold] --palette [earth-tones|cool|warm]` to create a new design system from your codebase
- 2.Run `/design-system audit --url http://localhost:3000 --pages / /pricing /docs` to score your UI and get specific fixes
- 3.Run `/design-system slop-check` to identify generic AI-generated design patterns in your codebase
- 4.Review the generated DESIGN.md, design-tokens.json, and design-preview.html files
- 5.Apply the recommended fixes and use the design tokens as your source of truth going forward
Use cases
- Starting a new project and need a design system foundation quickly
- Auditing a legacy codebase to understand visual inconsistencies before a redesign
- Reviewing PRs that touch styling to ensure they maintain design system compliance
- Identifying why a UI feels "off" without clear visual problems
- Detecting and removing AI-generated design clichés from your product
- Product designers and design system leads
- Frontend engineers maintaining design consistency
- Design-focused engineering teams
- Teams preparing for a redesign or visual audit
design-system FAQ
The generate mode scans your existing CSS/Tailwind/styled-components, extracts patterns, researches competitors, and proposes a cohesive system from scratch with rationale for each decision.
Yes, it scans all three and extracts color, typography, spacing, and other design tokens regardless of your styling approach.
You can audit both—pass a local URL (http://localhost:3000) or a live domain, and specify which pages to check.
It identifies common AI-generated design clichés like gratuitous gradients, glass morphism with no purpose, excessive animations, and generic hero sections so you can remove them.
Tokens are output as JSON (design-tokens.json) and CSS custom properties for easy integration into your build pipeline.
Full instructions (SKILL.md)
Source of truth, from affaan-m/ecc.
name: design-system description: Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling. metadata: 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
2. Extract: colors, typography, spacing, border-radius, shadows, breakpoints
3. 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 decision
6. 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 targets
9. 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
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
Related skills
More from affaan-m/ecc and the wider catalog.
dev-team
Agent skill from affaan-m/ecc.
django-celery
Django + Celery async task patterns for background jobs, scheduling, retries, and monitoring.
django-patterns
Production-grade Django architecture patterns, REST APIs, ORM best practices, and scalable app design.
django-security
Django security best practices: authentication, authorization, CSRF, SQL injection and XSS prevention, secure deployment.
django-tdd
Test Django apps with pytest, TDD methodology, factory_boy, and REST Framework testing.
django-verification
Comprehensive Django verification pipeline: migrations, linting, tests, security, and deployment readiness checks.