{ "markdown": "# Awesome Design Skills [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)\n\n\"awesome-design-skills\"\n\n
\n\n> A curated registry of 67 design system skill files for AI-powered agentic tools like [Claude Code](https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/overview), [Cursor](https://www.cursor.com/), [Codex](https://openai.com/index/codex/), and others. Pull any skill into your project with a single command.\n\nEach skill now ships as a folder with:\n- `SKILL.md` for AI-agent instructions (tokens, component rules, accessibility constraints, quality gates)\n- `DESIGN.md` for human-readable design intent, rationale, and implementation notes\n\n**[Preview all design skills on TypeUI](https://typeui.sh/design-skills)**\n\n## Design Skills\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \"Agentic\"
\n Agentic
\n npx typeui.sh pull agentic\n 		\n \"Ant\"
\n Ant
\n npx typeui.sh pull ant\n 		\n \"Roku\"
\n Roku
\n npx typeui.sh pull roku\n
\n \"Artistic\"
\n Artistic
\n npx typeui.sh pull artistic\n 		\n \"Bento\"
\n Bento
\n npx typeui.sh pull bento\n 		\n \"Bold\"
\n Bold
\n npx typeui.sh pull bold\n
\n \"Brutalism\"
\n Brutalism
\n npx typeui.sh pull brutalism\n 		\n \"Cafe\"
\n Cafe
\n npx typeui.sh pull cafe\n 		\n \"Claymorphism\"
\n Claymorphism
\n npx typeui.sh pull claymorphism\n
\n \"Claude\"
\n Claude
\n npx typeui.sh pull claude\n 		\n \"Clean\"
\n Clean
\n npx typeui.sh pull clean\n 		\n \"Codex\"
\n Codex
\n npx typeui.sh pull codex\n
\n \"Colorful\"
\n Colorful
\n npx typeui.sh pull colorful\n 		\n \"Contemporary\"
\n Contemporary
\n npx typeui.sh pull contemporary\n 		\n \"Corporate\"
\n Corporate
\n npx typeui.sh pull corporate\n
\n \"Cosmic\"
\n Cosmic
\n npx typeui.sh pull cosmic\n 		\n \"Creative\"
\n Creative
\n npx typeui.sh pull creative\n 		\n \"Enterprise\"
\n Enterprise
\n npx typeui.sh pull enterprise\n
\n \"Dithered\"
\n Dithered
\n npx typeui.sh pull dithered\n 		\n \"Doodle\"
\n Doodle
\n npx typeui.sh pull doodle\n 		\n \"Dramatic\"
\n Dramatic
\n npx typeui.sh pull dramatic\n
\n \"Editorial\"
\n Editorial
\n npx typeui.sh pull editorial\n 		\n \"Square\"
\n Square
\n npx typeui.sh pull square\n 		\n \"Pulse\"
\n Pulse
\n npx typeui.sh pull pulse\n
\n \"Stitch\"
\n Stitch
\n npx typeui.sh pull stitch\n 		\n \"Expressive\"
\n Expressive
\n npx typeui.sh pull expressive\n 		\n \"Fantasy\"
\n Fantasy
\n npx typeui.sh pull fantasy\n
\n \"Fiction\"
\n Fiction
\n npx typeui.sh pull fiction\n 		\n \"Flat\"
\n Flat
\n npx typeui.sh pull flat\n 		\n \"Friendly\"
\n Friendly
\n npx typeui.sh pull friendly\n
\n \"Futuristic\"
\n Futuristic
\n npx typeui.sh pull futuristic\n 		\n \"Glassmorphism\"
\n Glassmorphism
\n npx typeui.sh pull glassmorphism\n 		\n \"Gradient\"
\n Gradient
\n npx typeui.sh pull gradient\n
\n \"Immersive\"
\n Immersive
\n npx typeui.sh pull immersive\n 		\n \"Impeccable\"
\n Impeccable
\n npx typeui.sh pull impeccable\n 		\n \"Levels\"
\n Levels
\n npx typeui.sh pull levels\n
\n \"Lingo\"
\n Lingo
\n npx typeui.sh pull lingo\n 		\n \"Power\"
\n Power
\n npx typeui.sh pull power\n 		\n \"Material\"
\n Material
\n npx typeui.sh pull material\n
\n \"Matrix\"
\n Matrix
\n npx typeui.sh pull matrix\n 		\n \"Minimal\"
\n Minimal
\n npx typeui.sh pull minimal\n 		\n \"Modern\"
\n Modern
\n npx typeui.sh pull modern\n
\n \"Mono\"
\n Mono
\n npx typeui.sh pull mono\n 		\n \"Neon\"
\n Neon
\n npx typeui.sh pull neon\n 		\n \"Neobrutalism\"
\n Neobrutalism
\n npx typeui.sh pull neobrutalism\n
\n \"Neumorphism\"
\n Neumorphism
\n npx typeui.sh pull neumorphism\n 		\n \"Pacman\"
\n Pacman
\n npx typeui.sh pull pacman\n 		\n \"Paper\"
\n Paper
\n npx typeui.sh pull paper\n
\n \"Perspective\"
\n Perspective
\n npx typeui.sh pull perspective\n 		\n \"Premium\"
\n Premium
\n npx typeui.sh pull premium\n 		\n \"Professional\"
\n Professional
\n npx typeui.sh pull professional\n
\n \"Basic\"
\n Basic
\n npx typeui.sh pull basic\n 		\n \"Refined\"
\n Refined
\n npx typeui.sh pull refined\n 		\n \"Retro\"
\n Retro
\n npx typeui.sh pull retro\n
\n \"Riso\"
\n Riso
\n npx typeui.sh pull riso\n 		\n \"Sega\"
\n Sega
\n npx typeui.sh pull sega\n 		\n \"Shadcn\"
\n Shadcn
\n npx typeui.sh pull shadcn\n
\n \"Geometric\"
\n Geometric
\n npx typeui.sh pull geometric\n 		\n \"Sketch\"
\n Sketch
\n npx typeui.sh pull sketch\n 		\n \"Skeumorphism\"
\n Skeumorphism
\n npx typeui.sh pull skeumorphism\n
\n \"Sleek\"
\n Sleek
\n npx typeui.sh pull sleek\n 		\n \"Spacious\"
\n Spacious
\n npx typeui.sh pull spacious\n 		\n \"Storytelling\"
\n Storytelling
\n npx typeui.sh pull storytelling\n
\n \"Terracotta\"
\n Terracotta
\n npx typeui.sh pull terracotta\n 		\n \"Tetris\"
\n Tetris
\n npx typeui.sh pull tetris\n 		\n \"Vibrant\"
\n Vibrant
\n npx typeui.sh pull vibrant\n
\n \"Vintage\"
\n Vintage
\n npx typeui.sh pull vintage\n
\n\n## Quick Start\n\nPull any design skill directly into your project using the [TypeUI CLI](https://github.com/bergside/typeui.sh):\n\n```bash\nnpx typeui.sh pull \n```\n\nFor example, to pull the Glassmorphism design skill:\n\n```bash\nnpx typeui.sh pull glassmorphism\n```\n\nOr browse all available skills interactively:\n\n```bash\nnpx typeui.sh list\n```\n\n## What is a Design Skill?\n\nA design skill is a folder containing `SKILL.md` and `DESIGN.md`.\n\n`SKILL.md` acts as the instruction source for AI agents and LLMs. It contains:\n\n- **Brand & mission** — the design philosophy and visual identity\n- **Style foundations** — typography scale, color palette, spacing system\n- **Component families** — buttons, inputs, cards, modals, navigation, and more\n- **Accessibility rules** — WCAG 2.2 AA compliance, keyboard-first interactions\n- **Writing tone** — content and voice guidelines\n- **Do/Don't rules** — explicit patterns and anti-patterns\n- **Quality gates** — testable acceptance criteria for code review\n\n`DESIGN.md` is a companion document for human readers and maintainers. It captures:\n\n- **Design overview** — concise summary of the visual direction\n- **Rationale and references** — context for why patterns/tokens exist\n- **Maintenance notes** — guidance for keeping design decisions aligned over time\n\nWhen 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.\n\n## Usage\n\n### Pull a skill into your project\n\nUse the [TypeUI CLI](https://github.com/bergside/typeui.sh) to pull any skill by its slug:\n\n```bash\nnpx typeui.sh pull \n```\n\nThe 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.\n\n### Specify providers\n\nTarget specific agentic tools when pulling:\n\n```bash\nnpx typeui.sh pull glassmorphism -p cursor,claude\n```\n\n### Preview before writing\n\nUse `--dry-run` to see what would be written without making changes:\n\n```bash\nnpx typeui.sh pull glassmorphism --dry-run\n```\n\n### Browse and pull interactively\n\nList all available skills with preview links, then pull one:\n\n```bash\nnpx typeui.sh list\n```\n\n### Generate a custom skill\n\nRun the interactive prompts to create your own design system skill:\n\n```bash\nnpx typeui.sh generate\n```\n\n## Registry Structure\n\nEach skill lives in its own folder under `skills/`:\n\n```\nskills/\n├── index.json # Slug-keyed map for fast CLI lookups\n├── glassmorphism/\n│ ├── SKILL.md # AI-agent instruction file\n│ └── DESIGN.md # Human-readable design companion\n├── brutalism/\n│ ├── SKILL.md\n│ └── DESIGN.md\n├── minimal/\n│ ├── SKILL.md\n│ └── DESIGN.md\n└── ...\n```\n\nThe `index.json` file maps each slug to its skill path:\n\n```json\n{\n \"glassmorphism\": {\n \"slug\": \"glassmorphism\",\n \"name\": \"Glassmorphism\",\n \"skillPath\": \"skills/glassmorphism/SKILL.md\"\n }\n}\n```\n\nWhen 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.\n\n## Contributing\n\nContributions are welcome! If you'd like to add a new design skill to the registry:\n\n1. Create a new folder under `skills/` with your slug name\n2. Add a `SKILL.md` file following the existing format\n3. Add a companion `DESIGN.md` file in the same folder\n4. Add an entry to `skills/index.json`\n5. Submit a pull request\n\nPlease 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.\n\n## License\n\n[MIT License](LICENSE) © Built and maintained by [Bergside](https://github.com/bergside).\n\n## Sponsors\n\nA huge thank you to the companies supporting our open-source work.\n\n\n \n \n \n
\n \n \"Skybridge\"\n
Skybridge\n \n
\n\nWant to see your logo here? [Become a sponsor](https://www.typeui.sh/sponsor).\n", "bytes": 28960, "sha": "44cdba915b42aa94ce5e42b7ed6ce12063701d0b9bf9201aa3b3bfd516545760", "repo_slug": "bergside/awesome-design-skills", "fonte": "repo", "truncated": false, "api": "https://agentalog.com/api/listings/skl_bergside_awesome_design_skills_glassmorp_41e7d82d/readme" }