Awesome Design Skills

A curated registry of design system skill files for AI-powered agentic tools like Claude Code, Cursor, Codex, and others. Pull any skill into your project with a single command.

Each skill is a SKILL.md file containing design tokens, component guidelines, accessibility rules, and implementation-ready specifications that instruct AI agents to follow a specific design system when building interfaces.

Preview all design skills on typeui.sh

Built and maintained by Bergside. Powered by typeui.sh.

Contents

• Quick Start
• What is a Design Skill?
• Design Skills
• Usage
• Registry Structure
• Contributing
• License

Quick Start

Pull any design skill directly into your project using typeui.sh:

npx typeui.sh pull <slug>

For example, to pull the Glassmorphism design skill:

npx typeui.sh pull glassmorphism

Or browse all available skills interactively:

npx typeui.sh list

What is a Design Skill?

A design skill is a SKILL.md file that acts as a set of instructions for AI agents and LLMs. Each file contains:

• Brand & mission — the design philosophy and visual identity
• Style foundations — typography scale, color palette, spacing system
• Component families — buttons, inputs, cards, modals, navigation, and more
• Accessibility rules — WCAG 2.2 AA compliance, keyboard-first interactions
• Writing tone — content and voice guidelines
• Do/Don't rules — explicit patterns and anti-patterns
• Quality gates — testable acceptance criteria for code review

When an AI agent reads a skill file, it follows these guidelines to generate UI code that is consistent, accessible, and true to the design system.

Design Skills

Browse and preview all design skills at typeui.sh/design-skills before pulling them into your project.

Skill	Category	Preview	Pull Command
Agentic	Themed & Unique	Preview	npx typeui.sh pull agentic
Artistic	Creative & Artistic	Preview	npx typeui.sh pull artistic
Bento	Layout & Structure	Preview	npx typeui.sh pull bento
Bold	Bold & Expressive	Preview	npx typeui.sh pull bold
Brutalism	Bold & Expressive	Preview	npx typeui.sh pull brutalism
Cafe	Creative & Artistic	Preview	npx typeui.sh pull cafe
Claymorphism	Morphism & Effects	Preview	npx typeui.sh pull claymorphism
Clean	Modern & Minimal	Preview	npx typeui.sh pull clean
Colorful	Bold & Expressive	Preview	npx typeui.sh pull colorful
Contemporary	Modern & Minimal	Preview	npx typeui.sh pull contemporary
Corporate	Professional & Corporate	Preview	npx typeui.sh pull corporate
Cosmic	Creative & Artistic	Preview	npx typeui.sh pull cosmic
Creative	Creative & Artistic	Preview	npx typeui.sh pull creative
Dithered	Retro & Nostalgic	Preview	npx typeui.sh pull dithered
Doodle	Creative & Artistic	Preview	npx typeui.sh pull doodle
Dramatic	Bold & Expressive	Preview	npx typeui.sh pull dramatic
Editorial	Creative & Artistic	Preview	npx typeui.sh pull editorial
Elegant	Professional & Corporate	Preview	npx typeui.sh pull elegant
Energetic	Bold & Expressive	Preview	npx typeui.sh pull energetic
Enterprise	Professional & Corporate	Preview	npx typeui.sh pull enterprise
Expressive	Bold & Expressive	Preview	npx typeui.sh pull expressive
Fantasy	Creative & Artistic	Preview	npx typeui.sh pull fantasy
Flat	Modern & Minimal	Preview	npx typeui.sh pull flat
Friendly	Creative & Artistic	Preview	npx typeui.sh pull friendly
Futuristic	Themed & Unique	Preview	npx typeui.sh pull futuristic
Glassmorphism	Morphism & Effects	Preview	npx typeui.sh pull glassmorphism
Gradient	Morphism & Effects	Preview	npx typeui.sh pull gradient
Levels	Layout & Structure	Preview	npx typeui.sh pull levels
Luxury	Professional & Corporate	Preview	npx typeui.sh pull luxury
Material	Professional & Corporate	Preview	npx typeui.sh pull material
Minimal	Modern & Minimal	Preview	npx typeui.sh pull minimal
Modern	Modern & Minimal	Preview	npx typeui.sh pull modern
Mono	Modern & Minimal	Preview	npx typeui.sh pull mono
Neon	Morphism & Effects	Preview	npx typeui.sh pull neon
Neobrutalism	Bold & Expressive	Preview	npx typeui.sh pull neobrutalism
Neumorphism	Morphism & Effects	Preview	npx typeui.sh pull neumorphism
Pacman	Themed & Unique	Preview	npx typeui.sh pull pacman
Paper	Retro & Nostalgic	Preview	npx typeui.sh pull paper
Perspective	Layout & Structure	Preview	npx typeui.sh pull perspective
Premium	Professional & Corporate	Preview	npx typeui.sh pull premium
Professional	Professional & Corporate	Preview	npx typeui.sh pull professional
Publication	Creative & Artistic	Preview	npx typeui.sh pull publication
Refined	Modern & Minimal	Preview	npx typeui.sh pull refined
Retro	Retro & Nostalgic	Preview	npx typeui.sh pull retro
Shadcn	Modern & Minimal	Preview	npx typeui.sh pull shadcn
Simple	Modern & Minimal	Preview	npx typeui.sh pull simple
Skeumorphism	Morphism & Effects	Preview	npx typeui.sh pull skeumorphism
Sleek	Modern & Minimal	Preview	npx typeui.sh pull sleek
Spacious	Layout & Structure	Preview	npx typeui.sh pull spacious
Storytelling	Creative & Artistic	Preview	npx typeui.sh pull storytelling
Tetris	Themed & Unique	Preview	npx typeui.sh pull tetris
Vibrant	Bold & Expressive	Preview	npx typeui.sh pull vibrant
Vintage	Retro & Nostalgic	Preview	npx typeui.sh pull vintage

Usage

Pull a skill into your project

Use the typeui.sh CLI to pull any skill by its slug:

npx typeui.sh pull <slug>

The CLI will fetch the SKILL.md file from this registry and write it to your configured provider paths (e.g., .cursor/skills/, .claude/, etc.).

Specify providers

Target specific agentic tools when pulling:

npx typeui.sh pull glassmorphism -p cursor,claude

Preview before writing

Use --dry-run to see what would be written without making changes:

npx typeui.sh pull glassmorphism --dry-run

Browse and pull interactively

List all available skills with preview links, then pull one:

npx typeui.sh list

Generate a custom skill

Run the interactive prompts to create your own design system skill:

npx typeui.sh generate

Registry Structure

Each skill lives in its own folder under skills/:

skills/
├── index.json          # Slug-keyed map for fast CLI lookups
├── glassmorphism/
│   └── SKILL.md        # Design system skill file
├── brutalism/
│   └── SKILL.md
├── minimal/
│   └── SKILL.md
└── ...

The index.json file maps each slug to its skill path:

{
  "glassmorphism": {
    "slug": "glassmorphism",
    "name": "Glassmorphism",
    "skillPath": "skills/glassmorphism/SKILL.md"
  }
}

When you run npx typeui.sh pull <slug>, the CLI reads this index, resolves the skill path, and fetches the corresponding SKILL.md file.

Contributing

Contributions are welcome! If you'd like to add a new design skill to the registry:

1. Create a new folder under skills/ with your slug name
2. Add a SKILL.md file following the existing format
3. Add an entry to skills/index.json
4. Submit a pull request

Please ensure your skill file includes all required sections: mission, brand, style foundations, component families, accessibility rules, writing tone, do/don't rules, and quality gates.

License

MIT © Bergside