awesome-design-skills
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 is a registry of 67 design system skill files that teach AI coding assistants how to generate UI code following specific design patterns and visual styles. Each skill contains a SKILL.md file with structured instructions covering typography, color palettes, component rules, accessibility constraints, and quality gates that AI agents can follow, plus a companion DESIGN.md for human reference. Developers can pull any skill into their project using the TypeUI CLI with a single command, enabling AI tools to generate consistent, accessible UI code matching design systems ranging from glassmorphism and neobrutalism to Material Design and minimalist styles. The skills work with Claude Code, Cursor, Codex, Google Stitch, and other AI-powered development tools.
Key Features
Use Cases
- 01Teaching AI coding assistants to generate UI components that match your design system
- 02Ensuring consistent visual styles across AI-generated frontend code in team projects
- 03Adding accessibility guardrails to AI-generated UI through WCAG compliance rules
- 04Rapidly prototyping UIs in specific aesthetic styles (glassmorphism, neobrutalism, etc.)
- 05Onboarding AI tools to corporate or enterprise design standards
- 06Creating custom design skills for proprietary design systems using the generator
Related Skills
View moresuperpowers
An agentic skills framework & software development methodology that works.
skills
Skills for Real Engineers. Straight from my .agents directory.
skills
Public repository for Agent Skills
ponytail
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
awesome-design-skills — FAQ
What is a design skill file?+
A design skill is a folder containing SKILL.md (structured instructions for AI agents with design tokens, component rules, accessibility constraints, and quality gates) and DESIGN.md (human-readable rationale and maintenance notes). AI coding assistants read SKILL.md to generate UI code that follows the specified design system.
How do I install a design skill?+
Run 'npx typeui.sh pull <slug>' (e.g., 'npx typeui.sh pull glassmorphism') to fetch the skill file and write it to your configured provider paths like .cursor/skills/ or .claude/. You can target specific tools with the -p flag (e.g., -p cursor,claude).
Which AI coding tools support these design skills?+
The skills work with Claude Code, Cursor, Codex, Google Stitch, and other AI-powered agentic development tools that can read and follow structured instruction files.
Is Awesome Design Skills free to use?+
Yes, the registry is open source under the MIT License. All 67 design skills are freely available to pull and use in your projects.
Do I need API keys or prerequisites?+
You need Node.js/npx to run the TypeUI CLI. No additional API keys are required for the skill files themselves, though you'll need an AI coding tool (Claude Code, Cursor, etc.) configured separately to actually use the skills.
Can I create my own custom design skill?+
Yes, run 'npx typeui.sh generate' for an interactive prompt to create a custom design system skill, or manually create a folder under skills/ with SKILL.md and DESIGN.md files following the existing format.
How do I install awesome-design-skills?+
Open the source repository on GitHub and follow its README. awesome-design-skills is a skill — MCP Agents Market links you directly to the official repo.
Is awesome-design-skills free?+
awesome-design-skills is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.