awesome-design-skills: 67 Ready-Made Design Systems for Agentic Tools

Agents build interfaces fine until someone says "make it look designed." bergside/awesome-design-skills is a curated registry of 67 design-system skill files for Claude Code, Cursor, Codex, and other agentic tools — named systems like Agentic, Bento, Brutalism, Claymorphism, Clean, Cosmic, and Enterprise, each one pullable with a single command.

Why This Skill Matters

Every entry ships as a folder with two files aimed at two audiences: SKILL.md carries the agent-facing instructions — design tokens, component rules, accessibility constraints, quality gates — while DESIGN.md carries the human-readable design intent, rationale, and implementation notes. Mind the delivery split: the pull command writes only SKILL.md into your agent's configured paths; the DESIGN.md stays in the registry alongside each entry for your team to read.

This is the same TypeUI ecosystem as design-md-chrome, but the complementary direction: the Chrome extension extracts a design system from a live site, while this registry hands you ready-made systems to build against when there is nothing to extract — greenfield screens, prototypes, or a style you want to try before committing. All 67 are previewable at typeui.sh/design-skills before you pull anything.

Installation

The pull command writes a system's SKILL.md straight into your agent's configured provider paths:

npx typeui.sh pull bento

Browse the visual catalog first — every entry has a rendered preview at typeui.sh/design-skills, so you pick the system the way you'd pick a theme, not by name.

Real Workflow: A Greenfield Screen With a System From Minute One

1. Pick the register that fits the product — Clean for a B2B dashboard, Brutalism for a launch page, Cafe for something warmer — and pull it.
2. Point your agent at the pulled SKILL.md and build normally; it constrains tokens, component rules, and accessibility so the output stays inside the system instead of drifting.
3. For human review, open the companion DESIGN.md in the registry — it documents the intent and rationale in human terms, so critique lands on the design rather than the diff.
4. Swap systems and regenerate when a direction is wrong: at registry prices, throwing one away is cheaper than arguing about taste.

Tips

• The registry pairs naturally with design-md-chrome: extract your company's real system from the live site, or pull a stock one from here for everything that has no system yet.
• Each skill folder is small enough to read — skim the quality gates in SKILL.md to see what the system will enforce before the first build.
• The TypeUI preview site is the fastest way to shortlist; pulling three candidates and regenerating one screen takes minutes.

When Not to Use This

These are stock systems: distinctive exactly until your competitor pulls the same one. For a product with an existing design language, extract and enforce your own system instead — the registry is for the spaces that don't have one yet. And a registry file can't carry your brand's illustrations or voice; those still come from you.

See the leaderboard for more skills.