Design system

Skill S3YED/appie-kit/skills/ecc/design-system

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

Install

npx -y skills add S3YED/appie-kit --skill design-system

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.4 KB, 544 tokens by cl100k_base, as published. Nobody here has run it

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

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 6 of the 12 instructions most design systems skills give in 544 tokens

Counted across 501 of the 520 authors here whose files we hold, read 2026-09-06

Extract colors, typography, spacing, radii, shadows, breakpointshere, and in 20 of 501, across 10 files
Create a self-contained dependency-free HTML preview pagehere, and in 20 of 501, across 10 files
Keep touch targets at least 44x44pxin 20 of 501
Score the UI across ten dimensionshere, and in 18 of 501, across 8 files
Animate exclusively via transform and opacityin 18 of 501, across 15 files
Ensure WCAG AA color contrastin 18 of 501, across 13 files
Generate DESIGN.md with rationale for each decisionhere, and in 17 of 501, across 7 files
Ensure proper contrast and readabilityin 15 of 501, across 10 files
Scan the codebase for existing style patternshere, and in 15 of 501, across 6 files
Give every interactive element a visible focus indicatorin 15 of 501, across 13 files
Propose a design token sethere, and in 14 of 501, across 5 files
Create a custom theme when none fitin 14 of 501, across 9 files

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.