# awesome-design-skills

> A registry of 67 ready-made design system files for AI coding agents

- Repository: https://github.com/bergside/awesome-design-skills
- Category: Design & UI
- Stars: 3,310 · Forks: 317 · Language: n/a · License: MIT
- Experience: Beginner friendly
- Page: https://ir.adyog.com/repos/bergside/awesome-design-skills/

AI coding agents often produce interfaces that look generic or inconsistent. This repo gives them a written design system to follow, so the output matches a chosen style instead of the agent's defaults.

Each of the 67 entries is a folder with two files. SKILL.md holds instructions for the agent: design tokens, component rules, accessibility constraints and quality checks. DESIGN.md explains the intent and reasoning for people. You run `npx typeui.sh pull <name>` to copy a style into your project.

The styles range from named looks such as brutalism, glassmorphism, claymorphism and bento to broader moods such as corporate, playful or editorial. The README also shows a preview image for each one, and a gallery on the TypeUI site lets you browse them. The README shown here is cut off partway through the list, so I can't describe the later entries.

## What it does

- **Two files per style**: SKILL.md carries agent instructions (tokens, component rules, accessibility, quality gates). DESIGN.md carries the human-readable rationale and implementation notes.
- **One-command install**: Each style has its own command in the form `npx typeui.sh pull <name>`, for example `npx typeui.sh pull agentic`.
- **67 distinct styles**: Entries include Brutalism, Glassmorphism, Claymorphism, Bento, Editorial, Enterprise, Futuristic, Dithered and more.
- **Visual previews**: Every style has a marketing screenshot in the README and a page on typeui.sh, so you can judge the look before pulling it.
- **Works across agent tools**: Aimed at Claude Code, Cursor, Codex, Google Stitch and similar agentic tools.

## What you could build

- Pick a style and pull it into a new project so an agent builds a landing page that looks consistent.
- Compare several visual directions by pulling different skills and asking your agent to build the same screen with each.
- Read a DESIGN.md to learn how a style such as brutalism or glassmorphism is defined in tokens and component rules.
- Use an existing skill as a template when writing your own SKILL.md for your team's design system.
- Add accessibility and quality-gate rules to an agent's workflow for front-end work.

## Who it's for

Developers and designers who build interfaces with AI coding agents; you should know how to run npx and where your agent reads skill files.

## Get started

Browse the styles in the README or on typeui.sh, then run the pull command for the one you like inside your project. Your agent can then use the SKILL.md and DESIGN.md when it builds UI.

```
npx typeui.sh pull agentic
```

Tags: design-system, agent-skills, ui, claude-code, cursor