List of awesome design md skill files for agentic tools like Claude, Codex, and Gemini

Awesome Design Skills

A curated registry of design system skill files for AI-powered agentic tools like Claude Code, Gemini, Codex, and others. Pull any skill into your project with a single command.

Each skill is a SKILL.md file containing design tokens, component guidelines, accessibility rules, and implementation-ready specifications that instruct AI agents to follow a specific design system when building interfaces.

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 SKILL.md file that acts as a set of instructions for AI agents and LLMs. Each file 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 gate