Awesome Design Skills

<img width="1200" height="630" alt="awesome-design-skills" src="https://github.com/user-attachments/assets/1691b85b-d920-46dd-af28-068c5f90f304" /> <br>

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

<table> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/agentic"><img src="./registry-examples/agentic-marketing.png" alt="Agentic" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/agentic"><b>Agentic</b></a><br /> _{<code>npx typeui.sh pull agentic</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/ant"><img src="./registry-examples/ant-marketing.png" alt="Ant" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/ant"><b>Ant</b></a><br /> _{<code>npx typeui.sh pull ant</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/roku"><img src="./registry-examples/roku-marketing.png" alt="Roku" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/roku"><b>Roku</b></a><br /> _{<code>npx typeui.sh pull roku</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/artistic"><img src="./registry-examples/artistic-marketing.png" alt="Artistic" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/artistic"><b>Artistic</b></a><br /> _{<code>npx typeui.sh pull artistic</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/bento"><img src="./registry-examples/bento-marketing.png" alt="Bento" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/bento"><b>Bento</b></a><br /> _{<code>npx typeui.sh pull bento</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/bold"><img src="./registry-examples/bold-marketing.png" alt="Bold" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/bold"><b>Bold</b></a><br /> _{<code>npx typeui.sh pull bold</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/brutalism"><img src="./registry-examples/brutalism-marketing.png" alt="Brutalism" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/brutalism"><b>Brutalism</b></a><br /> _{<code>npx typeui.sh pull brutalism</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/cafe"><img src="./registry-examples/cafe-marketing.png" alt="Cafe" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/cafe"><b>Cafe</b></a><br /> _{<code>npx typeui.sh pull cafe</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/claymorphism"><img src="./registry-examples/claymorphism-marketing.png" alt="Claymorphism" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/claymorphism"><b>Claymorphism</b></a><br /> _{<code>npx typeui.sh pull claymorphism</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/claude"><img src="./registry-examples/claude-marketing.png" alt="Claude" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/claude"><b>Claude</b></a><br /> _{<code>npx typeui.sh pull claude</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/clean"><img src="./registry-examples/clean-marketing.png" alt="Clean" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/clean"><b>Clean</b></a><br /> _{<code>npx typeui.sh pull clean</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/codex"><img src="./registry-examples/codex-marketing.png" alt="Codex" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/codex"><b>Codex</b></a><br /> _{<code>npx typeui.sh pull codex</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/colorful"><img src="./registry-examples/colorful-marketing.png" alt="Colorful" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/colorful"><b>Colorful</b></a><br /> _{<code>npx typeui.sh pull colorful</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/contemporary"><img src="./registry-examples/contemporary-marketing.png" alt="Contemporary" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/contemporary"><b>Contemporary</b></a><br /> _{<code>npx typeui.sh pull contemporary</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/corporate"><img src="./registry-examples/corporate-marketing.png" alt="Corporate" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/corporate"><b>Corporate</b></a><br /> _{<code>npx typeui.sh pull corporate</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/cosmic"><img src="./registry-examples/cosmic-marketing.png" alt="Cosmic" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/cosmic"><b>Cosmic</b></a><br /> _{<code>npx typeui.sh pull cosmic</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/creative"><img src="./registry-examples/creative-marketing.png" alt="Creative" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/creative"><b>Creative</b></a><br /> _{<code>npx typeui.sh pull creative</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/enterprise"><img src="./registry-examples/enterprise-marketing.png" alt="Enterprise" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/enterprise"><b>Enterprise</b></a><br /> _{<code>npx typeui.sh pull enterprise</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/dithered"><img src="./registry-examples/dithered-marketing.png" alt="Dithered" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/dithered"><b>Dithered</b></a><br /> _{<code>npx typeui.sh pull dithered</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/doodle"><img src="./registry-examples/doodle-marketing.png" alt="Doodle" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/doodle"><b>Doodle</b></a><br /> _{<code>npx typeui.sh pull doodle</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/dramatic"><img src="./registry-examples/dramatic-marketing.png" alt="Dramatic" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/dramatic"><b>Dramatic</b></a><br /> _{<code>npx typeui.sh pull dramatic</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/editorial"><img src="./registry-examples/editorial-marketing.png" alt="Editorial" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/editorial"><b>Editorial</b></a><br /> _{<code>npx typeui.sh pull editorial</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/square"><img src="./registry-examples/square-marketing.png" alt="Square" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/square"><b>Square</b></a><br /> _{<code>npx typeui.sh pull square</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/pulse"><img src="./registry-examples/pulse-marketing.png" alt="Pulse" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/pulse"><b>Pulse</b></a><br /> _{<code>npx typeui.sh pull pulse</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/stitch"><img src="./registry-examples/stitch-marketing.png" alt="Stitch" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/stitch"><b>Stitch</b></a><br /> _{<code>npx typeui.sh pull stitch</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/expressive"><img src="./registry-examples/expressive-marketing.png" alt="Expressive" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/expressive"><b>Expressive</b></a><br /> _{<code>npx typeui.sh pull expressive</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/fantasy"><img src="./registry-examples/fantasy-marketing.png" alt="Fantasy" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/fantasy"><b>Fantasy</b></a><br /> _{<code>npx typeui.sh pull fantasy</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/fiction"><img src="./registry-examples/fiction-marketing.png" alt="Fiction" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/fiction"><b>Fiction</b></a><br /> _{<code>npx typeui.sh pull fiction</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/flat"><img src="./registry-examples/flat-marketing.png" alt="Flat" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/flat"><b>Flat</b></a><br /> _{<code>npx typeui.sh pull flat</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/friendly"><img src="./registry-examples/friendly-marketing.png" alt="Friendly" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/friendly"><b>Friendly</b></a><br /> _{<code>npx typeui.sh pull friendly</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/futuristic"><img src="./registry-examples/futuristic-marketing.png" alt="Futuristic" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/futuristic"><b>Futuristic</b></a><br /> _{<code>npx typeui.sh pull futuristic</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/glassmorphism"><img src="./registry-examples/glassmorphism-marketing.png" alt="Glassmorphism" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/glassmorphism"><b>Glassmorphism</b></a><br /> _{<code>npx typeui.sh pull glassmorphism</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/gradient"><img src="./registry-examples/gradient-marketing.png" alt="Gradient" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/gradient"><b>Gradient</b></a><br /> _{<code>npx typeui.sh pull gradient</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/immersive"><img src="./registry-examples/immersive-marketing.png" alt="Immersive" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/immersive"><b>Immersive</b></a><br /> _{<code>npx typeui.sh pull immersive</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/impeccable"><img src="./registry-examples/impeccable-marketing.png" alt="Impeccable" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/impeccable"><b>Impeccable</b></a><br /> _{<code>npx typeui.sh pull impeccable</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/levels"><img src="./registry-examples/levels-marketing.png" alt="Levels" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/levels"><b>Levels</b></a><br /> _{<code>npx typeui.sh pull levels</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/lingo"><img src="./registry-examples/lingo-marketing.png" alt="Lingo" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/lingo"><b>Lingo</b></a><br /> _{<code>npx typeui.sh pull lingo</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/power"><img src="./registry-examples/power-marketing.png" alt="Power" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/power"><b>Power</b></a><br /> _{<code>npx typeui.sh pull power</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/material"><img src="./registry-examples/material-marketing.png" alt="Material" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/material"><b>Material</b></a><br /> _{<code>npx typeui.sh pull material</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/matrix"><img src="./registry-examples/matrix-marketing.png" alt="Matrix" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/matrix"><b>Matrix</b></a><br /> _{<code>npx typeui.sh pull matrix</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/minimal"><img src="./registry-examples/minimal-marketing.png" alt="Minimal" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/minimal"><b>Minimal</b></a><br /> _{<code>npx typeui.sh pull minimal</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/modern"><img src="./registry-examples/modern-marketing.png" alt="Modern" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/modern"><b>Modern</b></a><br /> _{<code>npx typeui.sh pull modern</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/mono"><img src="./registry-examples/mono-marketing.png" alt="Mono" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/mono"><b>Mono</b></a><br /> _{<code>npx typeui.sh pull mono</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/neon"><img src="./registry-examples/neon-marketing.png" alt="Neon" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/neon"><b>Neon</b></a><br /> _{<code>npx typeui.sh pull neon</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/neobrutalism"><img src="./registry-examples/neobrutalism-marketing.png" alt="Neobrutalism" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/neobrutalism"><b>Neobrutalism</b></a><br /> _{<code>npx typeui.sh pull neobrutalism</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/neumorphism"><img src="./registry-examples/neumorphism-marketing.png" alt="Neumorphism" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/neumorphism"><b>Neumorphism</b></a><br /> _{<code>npx typeui.sh pull neumorphism</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/pacman"><img src="./registry-examples/pacman-marketing.png" alt="Pacman" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/pacman"><b>Pacman</b></a><br /> _{<code>npx typeui.sh pull pacman</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/paper"><img src="./registry-examples/paper-marketing.png" alt="Paper" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/paper"><b>Paper</b></a><br /> _{<code>npx typeui.sh pull paper</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/perspective"><img src="./registry-examples/perspective-marketing.png" alt="Perspective" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/perspective"><b>Perspective</b></a><br /> _{<code>npx typeui.sh pull perspective</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/premium"><img src="./registry-examples/premium-marketing.png" alt="Premium" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/premium"><b>Premium</b></a><br /> _{<code>npx typeui.sh pull premium</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/professional"><img src="./registry-examples/professional-marketing.png" alt="Professional" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/professional"><b>Professional</b></a><br /> _{<code>npx typeui.sh pull professional</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/basic"><img src="./registry-examples/basic-marketing.png" alt="Basic" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/basic"><b>Basic</b></a><br /> _{<code>npx typeui.sh pull basic</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/refined"><img src="./registry-examples/refined-marketing.png" alt="Refined" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/refined"><b>Refined</b></a><br /> _{<code>npx typeui.sh pull refined</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/retro"><img src="./registry-examples/retro-marketing.png" alt="Retro" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/retro"><b>Retro</b></a><br /> _{<code>npx typeui.sh pull retro</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/riso"><img src="./registry-examples/riso-marketing.png" alt="Riso" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/riso"><b>Riso</b></a><br /> _{<code>npx typeui.sh pull riso</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/sega"><img src="./registry-examples/sega-marketing.png" alt="Sega" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/sega"><b>Sega</b></a><br /> _{<code>npx typeui.sh pull sega</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/shadcn"><img src="./registry-examples/shadcn-marketing.png" alt="Shadcn" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/shadcn"><b>Shadcn</b></a><br /> _{<code>npx typeui.sh pull shadcn</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/geometric"><img src="./registry-examples/geometric-marketing.png" alt="Geometric" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/geometric"><b>Geometric</b></a><br /> _{<code>npx typeui.sh pull geometric</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/sketch"><img src="./registry-examples/sketch-marketing.png" alt="Sketch" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/sketch"><b>Sketch</b></a><br /> _{<code>npx typeui.sh pull sketch</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/skeumorphism"><img src="./registry-examples/skeumorphism-marketing.png" alt="Skeumorphism" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/skeumorphism"><b>Skeumorphism</b></a><br /> _{<code>npx typeui.sh pull skeumorphism</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/sleek"><img src="./registry-examples/sleek-marketing.png" alt="Sleek" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/sleek"><b>Sleek</b></a><br /> _{<code>npx typeui.sh pull sleek</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/spacious"><img src="./registry-examples/spacious-marketing.png" alt="Spacious" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/spacious"><b>Spacious</b></a><br /> _{<code>npx typeui.sh pull spacious</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/storytelling"><img src="./registry-examples/storytelling-marketing.png" alt="Storytelling" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/storytelling"><b>Storytelling</b></a><br /> _{<code>npx typeui.sh pull storytelling</code>} </td> </tr> <tr> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/terracotta"><img src="./registry-examples/terracotta-marketing.png" alt="Terracotta" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/terracotta"><b>Terracotta</b></a><br /> _{<code>npx typeui.sh pull terracotta</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/tetris"><img src="./registry-examples/tetris-marketing.png" alt="Tetris" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/tetris"><b>Tetris</b></a><br /> _{<code>npx typeui.sh pull tetris</code>} </td> <td align="center" width="33%" valign="top"> <a href="https://typeui.sh/design-skills/vibrant"><img src="./registry-examples/vibrant-marketing.png" alt="Vibrant" width="260" /></a><br /> <a href="https://typeui.sh/design-skills/vib

…