Illustration of what awesome-design-skills does: A registry of 67 ready-made design system files for AI coding agents

bergside /

awesome-design-skills

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

  • 3.3k stars
  • 299 stars since 3 Oct
  • Updated 4 months ago
  • Beginner friendly
  • Design & UI
Open on GitHub (opens in a new tab) Website (opens in a new tab)

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.

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

Commands are copied from the project's README. Read it on GitHub for the full setup.

More in Design & UI

See all
awesome-design-md A curated set of DESIGN.md files that capture the look of well-known websites 123k3.8k open-design Local-first workspace where coding agents build prototypes, decks, images and motion 103.4k diagram-design A skill that makes on-brand HTML and SVG diagrams from a plain-language request 60.1k17k design.md A file format that tells coding agents your colors, fonts, and spacing, plus why 28.5k261 pascalorg/editor Local-first 3D building editor you can use in a browser, a CLI, or through AI agents 25.1k542 openui A framework and compact language for letting LLMs stream live UI components 13.1k

    ↑↓ to move, Enter to open, Esc to close