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 now ships as a folder with:

• SKILL.md for AI-agent instructions (tokens, component rules, accessibility constraints, quality gates)
• DESIGN.md for human-readable design intent, rationale, and implementation notes

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 folder containing SKILL.md and DESIGN.md.

SKILL.md acts as the instruction source for AI agents and LLMs. It 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

DESIGN.md is a companion document for human readers and maintainers. It captures:

• Design overview — concise summary of the visual direction
• Rationale and references — context for why patterns/tokens exist
• Maintenance notes — guidance for keeping design decisions aligned over time

When an AI agent reads a skill file, it follows the SKILL.md 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
Ant	Professional & Corporate	Preview	npx typeui.sh pull ant
Application	Professional & Corporate	Preview	npx typeui.sh pull application
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
Dashboard	Professional & Corporate	Preview	npx typeui.sh pull dashboard
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
Lingo	Creative & Artistic	Preview	npx typeui.sh pull lingo
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.). The companion DESIGN.md remains in this repo alongside each skill for reference and maintenance.

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        # AI-agent instruction file
│   └── DESIGN.md       # Human-readable design companion
├── brutalism/
│   ├── SKILL.md
│   └── DESIGN.md
├── minimal/
│   ├── SKILL.md
│   └── DESIGN.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. DESIGN.md is stored next to each skill for human-facing documentation.

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 a companion DESIGN.md file in the same folder
4. Add an entry to skills/index.json
5. 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