awesome-design-skills

Awesome Design Skills

A curated registry of 67 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

Design Skills

Agentic npx typeui.sh pull agentic	Ant npx typeui.sh pull ant	Roku npx typeui.sh pull roku
Artistic npx typeui.sh pull artistic	Bento npx typeui.sh pull bento	Bold npx typeui.sh pull bold
Brutalism npx typeui.sh pull brutalism	Cafe npx typeui.sh pull cafe	Claymorphism npx typeui.sh pull claymorphism
Claude npx typeui.sh pull claude	Clean npx typeui.sh pull clean	Codex npx typeui.sh pull codex
Colorful npx typeui.sh pull colorful	Contemporary npx typeui.sh pull contemporary	Corporate npx typeui.sh pull corporate
Cosmic npx typeui.sh pull cosmic	Creative npx typeui.sh pull creative	Enterprise npx typeui.sh pull enterprise
Dithered npx typeui.sh pull dithered	Doodle npx typeui.sh pull doodle	Dramatic npx typeui.sh pull dramatic
Editorial npx typeui.sh pull editorial	Square npx typeui.sh pull square	Pulse npx typeui.sh pull pulse
Stitch npx typeui.sh pull stitch	Expressive npx typeui.sh pull expressive	Fantasy npx typeui.sh pull fantasy
Fiction npx typeui.sh pull fiction	Flat npx typeui.sh pull flat	Friendly npx typeui.sh pull friendly
Futuristic npx typeui.sh pull futuristic	Glassmorphism npx typeui.sh pull glassmorphism	Gradient npx typeui.sh pull gradient
Immersive npx typeui.sh pull immersive	Impeccable npx typeui.sh pull impeccable	Levels npx typeui.sh pull levels
Lingo npx typeui.sh pull lingo	Power npx typeui.sh pull power	Material npx typeui.sh pull material
Matrix npx typeui.sh pull matrix	Minimal npx typeui.sh pull minimal	Modern npx typeui.sh pull modern
Mono npx typeui.sh pull mono	Neon npx typeui.sh pull neon	Neobrutalism npx typeui.sh pull neobrutalism
Neumorphism npx typeui.sh pull neumorphism	Pacman npx typeui.sh pull pacman	Paper npx typeui.sh pull paper
Perspective npx typeui.sh pull perspective	Premium npx typeui.sh pull premium	Professional npx typeui.sh pull professional
Basic npx typeui.sh pull basic	Refined npx typeui.sh pull refined	Retro npx typeui.sh pull retro
Riso npx typeui.sh pull riso	Sega npx typeui.sh pull sega	Shadcn npx typeui.sh pull shadcn
Geometric npx typeui.sh pull geometric	Sketch npx typeui.sh pull sketch	Skeumorphism npx typeui.sh pull skeumorphism
Sleek npx typeui.sh pull sleek	Spacious npx typeui.sh pull spacious	Storytelling npx typeui.sh pull storytelling
Terracotta npx typeui.sh pull terracotta	Tetris npx typeui.sh pull tetris	Vibrant npx typeui.sh pull vibrant
Vintage npx typeui.sh pull vintage

Quick Start

Pull any design skill directly into your project using the TypeUI CLI:

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.

Usage

Pull a skill into your project

Use the TypeUI 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 License © Built and maintained by Bergside.

Sponsors

A huge thank you to the companies supporting our open-source work.

Skybridge

Want to see your logo here? Become a sponsor.