Awesome Design Skills [](https://awesome.re)

June 28, 2026 · View on GitHub

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:

Create a new folder under skills/ with your slug name
Add a SKILL.md file following the existing format
Add a companion DESIGN.md file in the same folder
Add an entry to skills/index.json
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.