Image · oleh admin · 👁 0

Awesome Design

⭐ GitHub Stars: 3.5K

> 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.

https://skills.sh/bergside/awesome-design-skills/glassmorphism ↗

Kegunaan

# Awesome Design Skills [![Awesome](https://awesome.re/badge.svg)](https://awesome.re) <img width="1200" height="630" alt="awesome-design-skills" src="https://github.com/user-attachments/assets/1691b85b-d920-46dd-af28-068c5f90f304" /> > 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. 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](https://typeui.sh/design-skills)** ## 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> <a href="https://typeui.sh/design-skills/agentic">Agentic</a> <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> <a href="https://typeui.sh/design-skills/ant">Ant</a> <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> <a href="https://typeui.sh/design-skills/roku">Roku</a> <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> <a href="https://typeui.sh/design-skills/artistic">Artistic</a> <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> <a href="https://typeui.sh/design-skills/bento">Bento</a> <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> <a href="https://typeui.sh/design-skills/bold">Bold</a> <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> <a href="https://typeui.sh/design-skills/brutalism">Brutalism</a> <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> <a href="https://typeui.sh/design-skills/cafe">Cafe</a> <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> <a href="https://typeui.sh/design-skills/claymorphism">Claymorphism</a> <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> <a href="https://typeui.sh/design-skills/claude">Claude</a> <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> <a href="https://typeui.sh/design-skills/clean">Clean</a> <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> <a href="https://typeui.sh/design-skills/codex">Codex</a> <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> <a href="https://typeui.sh/design-skills/colorful">Colorful</a> <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> <a href="https://typeui.sh/design-skills/contemporary">Contemporary</a> <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> <a href="https://typeui.sh/design-skills/corporate">Corporate</a> <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> <a href="https://typeui.sh/design-skills/cosmic">Cosmic</a> <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> <a href="https://typeui.sh/design-skills/creative">Creative</a> <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> <a href="https://typeui.sh/design-skills/enterprise">Enterprise</a> <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> <a href="https://typeui.sh/design-skills/dithered">Dithered</a> <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> <a href="https://typeui.sh/design-skills/doodle">Doodle</a> <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> <a href="https://typeui.sh/design-skills/dramatic">Dramatic</a> <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> <a href="https://typeui.sh/design-skills/editorial">Editorial</a> <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> <a href="https://typeui.sh/design-skills/square">Square</a> <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> <a href="https://typeui.sh/design-skills/pulse">Pulse</a> <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> <a href="https://typeui.sh/design-skills/stitch">Stitch</a> <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> <a href="https://typeui.sh/design-skills/expressive">Expressive</a> <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> <a href="https://typeui.sh/design-skills/fantasy">Fantasy</a> <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> <a href="https://typeui.sh/design-skills/fiction">Fiction</a> <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> <a href="https://typeui.sh/design-skills/flat">Flat</a> <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> <a href="https://typeui.sh/design-skills/friendly">Friendly</a> <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> <a href="https://typeui.sh/design-skills/futuristic">Futuristic</a> <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> <a href="https://typeui.sh/design-skills/glassmorphism">Glassmorphism</a> <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> <a href="https://typeui.sh/design-skills/gradient">Gradient</a> <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> <a href="https://typeui.sh/design-skills/immersive">Immersive</a> <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> <a href="https://typeui.sh/design-skills/impeccable">Impeccable</a> <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> <a href="https://typeui.sh/design-skills/levels">Levels</a> <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> <a href="https://typeui.sh/design-skills/lingo">Lingo</a> <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> <a href="https://typeui.sh/design-skills/power">Power</a> <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> <a href="https://typeui.sh/design-skills/material">Material</a> <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> <a href="https://typeui.sh/design-skills/matrix">Matrix</a> <code>npx typeui.sh pull matrix</code> </td> <td align="center" width="33%" valign="top

Kekurangan

Bervariasi.

Cara Instalasi

npx skills add https://github.com/bergside/awesome-design-skills --skill glassmorphism

Cara Pakai

npx skills add bergside/awesome-design-skills@glassmorphism

★ -

(0 rating)

Komentar (0)

Belum ada komentar.