← all repositories
VoltAgent/awesome-claude-design

68 design systems in a markdown file, ready for Claude to unpack

A curated collection of DESIGN.md files that turn a single drop into a full UI scaffold—no blank-page paralysis required.

awesome-claude-design
Velocity · 7d
+51
★ / day
Trend
steady
star history

What it does

This repo houses 68 ready-made DESIGN.md files—plain-text markdown descriptions of real-world design systems (Stripe, Linear, Figma, Apple, etc.). Feed one to Claude Design and it spits out a complete starter package: color tokens, type scale, CSS variables, component previews, and a working UI kit applied to a marketing page. Think of it as a recipe box where someone else already did the measuring.

The interesting bit

The DESIGN.md format itself is the quiet innovation. It keeps tokens, rules, and rationale in one file—specific enough for an agent to act on, but carrying the “why” so it doesn’t drift off-system when it hits an edge case. Figma exports tell you what; brand PDFs waffle about vibes. This sits in the middle.

Key highlights

  • 68 systems across 8 categories: AI platforms, dev tools, fintech, e-commerce, media, and more
  • Each file links to a preview page at getdesign.md for inspection before download
  • Two ingestion paths: upload as a design system seed, or attach to a prototype chat with a single prompt
  • Output includes colors_and_type.css, Google Fonts substitutes for proprietary typefaces, preview/ cards, and a portable SKILL.md for reuse
  • Maintained by the VoltAgent team; actively updated (last-commit badge tracked)

Caveats

  • The actual DESIGN.md files live on getdesign.md, not in this repo directly—this is an index with links and descriptions
  • README is truncated mid-list (Spotify entry cut off), so the full collection may exceed what’s visible in the source

Verdict

Worth bookmarking if you’re using Claude Design and tired of coaxing a coherent system out of chat prompts. Skip it if you’re hand-crafting every pixel in Figma anyway—this is for the “just make it look like Linear” crowd.

heatdrop uses Google Analytics to see which pages get read — nothing else. Your call. How we handle data.