Design System — Generate & Audit Visual Systems
SkillMediaAnswer ten questions about your brand once, and every document your AI converts to HTML will follow the same look. It stores your primary and accent colors, heading and body fonts, a design style, and optional logo or company details. It also checks that body text and links stay readable against the colors you picked.
Available today. Use it from your connected AI after setup.
No other account needed.
After adding it, answer the ten setup questions to record your colors, fonts, and style. Then convert any document to HTML and it will come out matching your brand.
Then ask your AI: use the Design System — Generate & Audit Visual Systems skill
What your AI can do with it
- Set up brand colors, fonts, and style through a ten-question walkthrough
- Apply your primary and accent colors to converted documents
- Use your chosen Google Fonts for headings and body text
- Match one of four design styles: editorial, technical, minimal, or playful
- Check that body text and links are readable against your colors
- Remember your default output folder, syntax theme, and table-of-contents preference
What this skill tells your AI
The instructions your AI receives, as published by affaan-m/ecc in skills/design-system/SKILL.md and read by ahel’s review.
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
Signals
- GitHub stars
- 258k
- Forks
- 39k
- Last commit
- Sep 2026
ahel recommends instead
Advanced
- Catalog kind
- skill
- Gateway key
design-system- Source
- github.com/affaan-m/ecc