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>