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

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:

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.

Want to see your logo here? Become a sponsor.