List of 67 awesome DESIGN.md and SKILL.md design skill files for agentic tools like Claude Design, Google Stitch, Codex, Cursor, and other AI tools

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](./registry-examples/agentic-marketing.png)](https://typeui.sh/design-skills/agentic)  

  [Agentic](https://typeui.sh/design-skills/agentic)  

  npx typeui.sh pull agentic




  [![Ant](./registry-examples/ant-marketing.png)](https://typeui.sh/design-skills/ant)  

  [Ant](https://typeui.sh/design-skills/ant)  

  npx typeui.sh pull ant




  [![Roku](./registry-examples/roku-marketing.png)](https://typeui.sh/design-skills/roku)  

  [Roku](https://typeui.sh/design-skills/roku)  

  npx typeui.sh pull roku








  [![Artistic](./registry-examples/artistic-marketing.png)](https://typeui.sh/design-skills/artistic)  

  [Artistic](https://typeui.sh/design-skills/artistic)  

  npx typeui.sh pull artistic




  [![Bento](./registry-examples/bento-marketing.png)](https://typeui.sh/design-skills/bento)  

  [Bento](https://typeui.sh/design-skills/bento)  

  npx typeui.sh pull bento




  [![Bold](./registry-examples/bold-marketing.png)](https://typeui.sh/design-skills/bold)  

  [Bold](https://typeui.sh/design-skills/bold)  

  npx typeui.sh pull bold








  [![Brutalism](./registry-examples/brutalism-marketing.png)](https://typeui.sh/design-skills/brutalism)  

  [Brutalism](https://typeui.sh/design-skills/brutalism)  

  npx typeui.sh pull brutalism




  [![Cafe](./registry-examples/cafe-marketing.png)](https://typeui.sh/design-skills/cafe)  

  [Cafe](https://typeui.sh/design-skills/cafe)  

  npx typeui.sh pull cafe




  [![Claymorphism](./registry-examples/claymorphism-marketing.png)](https://typeui.sh/design-skills/claymorphism)  

  [Claymorphism](https://typeui.sh/design-skills/claymorphism)  

  npx typeui.sh pull claymorphism








  [![Claude](./registry-examples/claude-marketing.png)](https://typeui.sh/design-skills/claude)  

  [Claude](https://typeui.sh/design-skills/claude)  

  npx typeui.sh pull claude




  [![Clean](./registry-examples/clean-marketing.png)](https://typeui.sh/design-skills/clean)  

  [Clean](https://typeui.sh/design-skills/clean)  

  npx typeui.sh pull clean




  [![Codex](./registry-examples/codex-marketing.png)](https://typeui.sh/design-skills/codex)  

  [Codex](https://typeui.sh/design-skills/codex)  

  npx typeui.sh pull codex








  [![Colorful](./registry-examples/colorful-marketing.png)](https://typeui.sh/design-skills/colorful)  

  [Colorful](https://typeui.sh/design-skills/colorful)  

  npx typeui.sh pull colorful




  [![Contemporary](./registry-examples/contemporary-marketing.png)](https://typeui.sh/design-skills/contemporary)  

  [Contemporary](https://typeui.sh/design-skills/contemporary)  

  npx typeui.sh pull contemporary




  [![Corporate](./registry-examples/corporate-marketing.png)](https://typeui.sh/design-skills/corporate)  

  [Corporate](https://typeui.sh/design-skills/corporate)  

  npx typeui.sh pull corporate








  [![Cosmic](./registry-examples/cosmic-marketing.png)](https://typeui.sh/design-skills/cosmic)  

  [Cosmic](https://typeui.sh/design-skills/cosmic)  

  npx typeui.sh pull cosmic




  [![Creative](./registry-examples/creative-marketing.png)](https://typeui.sh/design-skills/creative)  

  [Creative](https://typeui.sh/design-skills/creative)  

  npx typeui.sh pull creative




  [![Enterprise](./registry-examples/enterprise-marketing.png)](https://typeui.sh/design-skills/enterprise)  

  [Enterprise](https://typeui.sh/design-skills/enterprise)  

  npx typeui.sh pull enterprise








  [![Dithered](./registry-examples/dithered-marketing.png)](https://typeui.sh/design-skills/dithered)  

  [Dithered](https://typeui.sh/design-skills/dithered)  

  npx typeui.sh pull dithered




  [![Doodle](./registry-examples/doodle-marketing.png)](https://typeui.sh/design-skills/doodle)  

  [Doodle](https://typeui.sh/design-skills/doodle)  

  npx typeui.sh pull doodle




  [![Dramatic](./registry-examples/dramatic-marketing.png)](https://typeui.sh/design-skills/dramatic)  

  [Dramatic](https://typeui.sh/design-skills/dramatic)  

  npx typeui.sh pull dramatic








  [![Editorial](./registry-examples/editorial-marketing.png)](https://typeui.sh/design-skills/editorial)  

  [Editorial](https://typeui.sh/design-skills/editorial)  

  npx typeui.sh pull editorial




  [![Square](./registry-examples/square-marketing.png)](https://typeui.sh/design-skills/square)  

  [Square](https://typeui.sh/design-skills/square)  

  npx typeui.sh pull square




  [![Pulse](./registry-examples/pulse-marketing.png)](https://typeui.sh/design-skills/pulse)  

  [Pulse](https://typeui.sh/design-skills/pulse)  

  npx typeui.sh pull pulse








  [![Stitch](./registry-examples/stitch-marketing.png)](https://typeui.sh/design-skills/stitch)  

  [Stitch](https://typeui.sh/design-skills/stitch)  

  npx typeui.sh pull stitch




  [![Expressive](./registry-examples/expressive-marketing.png)](https://typeui.sh/design-skills/expressive)  

  [Expressive](https://typeui.sh/design-skills/expressive)  

  npx typeui.sh pull expressive




  [![Fantasy](./registry-examples/fantasy-marketing.png)](https://typeui.sh/design-skills/fantasy)  

  [Fantasy](https://typeui.sh/design-skills/fantasy)  

  npx typeui.sh pull fantasy








  [![Fiction](./registry-examples/fiction-marketing.png)](https://typeui.sh/design-skills/fiction)  

  [Fiction](https://typeui.sh/design-skills/fiction)  

  npx typeui.sh pull fiction




  [![Flat](./registry-examples/flat-marketing.png)](https://typeui.sh/design-skills/flat)  

  [Flat](https://typeui.sh/design-skills/flat)  

  npx typeui.sh pull flat




  [![Friendly](./registry-examples/friendly-marketing.png)](https://typeui.sh/design-skills/friendly)  

  [Friendly](https://typeui.sh/design-skills/friendly)  

  npx typeui.sh pull friendly








  [![Futuristic](./registry-examples/futuristic-marketing.png)](https://typeui.sh/design-skills/futuristic)  

  [Futuristic](https://typeui.sh/design-skills/futuristic)  

  npx typeui.sh pull futuristic




  [![Glassmorphism](./registry-examples/glassmorphism-marketing.png)](https://typeui.sh/design-skills/glassmorphism)  

  [Glassmorphism](https://typeui.sh/design-skills/glassmorphism)  

  npx typeui.sh pull glassmorphism




  [![Gradient](./registry-examples/gradient-marketing.png)](https://typeui.sh/design-skills/gradient)  

  [Gradient](https://typeui.sh/design-skills/gradient)  

  npx typeui.sh pull gradient








  [![Immersive](./registry-examples/immersive-marketing.png)](https://typeui.sh/design-skills/immersive)  

  [Immersive](https://typeui.sh/design-skills/immersive)  

  npx typeui.sh pull immersive




  [![Impeccable](./registry-examples/impeccable-marketing.png)](https://typeui.sh/design-skills/impeccable)  

  [Impeccable](https://typeui.sh/design-skills/impeccable)  

  npx typeui.sh pull impeccable




  [![Levels](./registry-examples/levels-marketing.png)](https://typeui.sh/design-skills/levels)  

  [Levels](https://typeui.sh/design-skills/levels)  

  npx typeui.sh pull levels








  [![Lingo](./registry-examples/lingo-marketing.png)](https://typeui.sh/design-skills/lingo)  

  [Lingo](https://typeui.sh/design-skills/lingo)  

  npx typeui.sh pull lingo




  [![Power](./registry-examples/power-marketing.png)](https://typeui.sh/design-skills/power)  

  [Power](https://typeui.sh/design-skills/power)  

  npx typeui.sh pull power




  [![Material](./registry-examples/material-marketing.png)](https://typeui.sh/design-skills/material)  

  [Material](https://typeui.sh/design-skills/material)  

  npx typeui.sh pull material








  [![Matrix](./registry-examples/matrix-marketing.png)](https://typeui.sh/design-skills/matrix)  

  [Matrix](https://typeui.sh/design-skills/matrix)  

  npx typeui.sh pull matrix




  [![Minimal](./registry-examples/minimal-marketing.png)](https://typeui.sh/design-skills/minimal)  

  [Minimal](https://typeui.sh/design-skills/minimal)  

  npx typeui.sh pull minimal




  [![Modern](./registry-examples/modern-marketing.png)](https://typeui.sh/design-skills/modern)  

  [Modern](https://typeui.sh/design-skills/modern)  

  npx typeui.sh pull modern








  [![Mono](./registry-examples/mono-marketing.png)](https://typeui.sh/design-skills/mono)  

  [Mono](https://typeui.sh/design-skills/mono)  

  npx typeui.sh pull mono




  [![Neon](./registry-examples/neon-marketing.png)](https://typeui.sh/design-skills/neon)  

  [Neon](https://typeui.sh/design-skills/neon)  

  npx typeui.sh pull neon




  [![Neobrutalism](./registry-examples/neobrutalism-marketing.png)](https://typeui.sh/design-skills/neobrutalism)  

  [Neobrutalism](https://typeui.sh/design-skills/neobrutalism)  

  npx typeui.sh pull neobrutalism








  [![Neumorphism](./registry-examples/neumorphism-marketing.png)](https://typeui.sh/design-skills/neumorphism)  

  [Neumorphism](https://typeui.sh/design-skills/neumorphism)  

  npx typeui.sh pull neumorphism




  [![Pacman](./registry-examples/pacman-marketing.png)](https://typeui.sh/design-skills/pacman)  

  [Pacman](https://typeui.sh/design-skills/pacman)  

  npx typeui.sh pull pacman




  [![Paper](./registry-examples/paper-marketing.png)](https://typeui.sh/design-skills/paper)  

  [Paper](https://typeui.sh/design-skills/paper)  

  npx typeui.sh pull paper








  [![Perspective](./registry-examples/perspective-marketing.png)](https://typeui.sh/design-skills/perspective)  

  [Perspective](https://typeui.sh/design-skills/perspective)  

  npx typeui.sh pull perspective




  [![Premium](./registry-examples/premium-marketing.png)](https://typeui.sh/design-skills/premium)  

  [Premium](https://typeui.sh/design-skills/premium)  

  npx typeui.sh pull premium




  [![Professional](./registry-examples/professional-marketing.png)](https://typeui.sh/design-skills/professional)  

  [Professional](https://typeui.sh/design-skills/professional)  

  npx typeui.sh pull professional








  [![Basic](./registry-examples/basic-marketing.png)](https://typeui.sh/design-skills/basic)  

  [Basic](https://typeui.sh/design-skills/basic)  

  npx typeui.sh pull basic




  [![Refined](./registry-examples/refined-marketing.png)](https://typeui.sh/design-skills/refined)  

  [Refined](https://typeui.sh/design-skills/refined)  

  npx typeui.sh pull refined




  [![Retro](./registry-examples/retro-marketing.png)](https://typeui.sh/design-skills/retro)  

  [Retro](https://typeui.sh/design-skills/retro)  

  npx typeui.sh pull retro








  [![Riso](./registry-examples/riso-marketing.png)](https://typeui.sh/design-skills/riso)  

  [Riso](https://typeui.sh/design-skills/riso)  

  npx typeui.sh pull riso




  [![Sega](./registry-examples/sega-marketing.png)](https://typeui.sh/design-skills/sega)  

  [Sega](https://typeui.sh/design-skills/sega)  

  npx typeui.sh pull sega




  [![Shadcn](./registry-examples/shadcn-marketing.png)](https://typeui.sh/design-skills/shadcn)  

  [Shadcn](https://typeui.sh/design-skills/shadcn)  

  npx typeui.sh pull shadcn








  [![Geometric](./registry-examples/geometric-marketing.png)](https://typeui.sh/design-skills/geometric)  

  [Geometric](https://typeui.sh/design-skills/geometric)  

  npx typeui.sh pull geometric




  [![Sketch](./registry-examples/sketch-marketing.png)](https://typeui.sh/design-skills/sketch)  

  [Sketch](https://typeui.sh/design-skills/sketch)  

  npx typeui.sh pull sketch




  [![Skeumorphism](./registry-examples/skeumorphism-marketing.png)](https://typeui.sh/design-skills/skeumorphism)  

  [Skeumorphism](https://typeui.sh/design-skills/skeumorphism)  

  npx typeui.sh pull skeumorphism








  [![Sleek](./registry-examples/sleek-marketing.png)](https://typeui.sh/design-skills/sleek)  

  [Sleek](https://typeui.sh/design-skills/sleek)  

  npx typeui.sh pull sleek




  [![Spacious](./registry-examples/spacious-marketing.png)](https://typeui.sh/design-skills/spacious)  

  [Spacious](https://typeui.sh/design-skills/spacious)  

  npx typeui.sh pull spacious




  [![Storytelling](./registry-examples/storytelling-marketing.png)](https://typeui.sh/design-skills/storytelling)  

  [Storytelling](https://typeui.sh/design-skills/storytelling)  

  npx typeui.sh pull storytelling








  [![Terracotta](./registry-examples/terracotta-marketing.png)](https://typeui.sh/design-skills/terracotta)  

  [Terracotta](https://typeui.sh/design-skills/terracotta)  

  npx typeui.sh pull terracotta




  [![Tetris](./registry-examples/tetris-marketing.png)](https://typeui.sh/design-skills/tetris)  

  [Tetris](https://typeui.sh/design-skills/tetris)  

  npx typeui.sh pull tetris




  [![Vibrant](./registry-examples/vibrant-marketing.png)](https://typeui.sh/design-skills/vibrant)  

  [Vibrant](https://typeui.sh/design-skills/vibrant)  

  npx typeui.sh pull vibrant








  [![Vintage](./registry-examples/vintage-marketing.png)](https://typeui.sh/design-skills/vintage)  

  [Vintage](https://typeui.sh/design-skills/vintage)  

  npx typeui.sh pull vintage

Quick Start

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

npx typeui.sh pull

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

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 , 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.