awesome-design-md (VoltAgent) + DESIGN.md Format

Repo: https://github.com/VoltAgent/awesome-design-md Stars: 58,292 (at time of ingest) Source: Voltagent Awesome Design Md 2026 04 17

A curated collection of 68+ DESIGN.md files reverse-engineered from real websites (Claude, Stripe, Linear, Figma, Notion, Apple, Tesla, Ferrari, and more). Drop one into a project root and any AI coding agent — Claude Code, Cursor, Google Stitch — generates UI that matches that site’s visual identity. DESIGN.md is Google Stitch’s plain-text-markdown design-system-document concept; VoltAgent’s repo is the de facto community library.

Key Takeaways

• DESIGN.md is a Stitch concept. Plain markdown file that describes a design system well enough for AI agents to consistently generate matching UI. No Figma exports, no JSON schemas, no tooling — just markdown, because markdown is what LLMs parse best.
• Complements AGENTS.md, not replaces. Clean mental model: AGENTS.md = how to build the project; DESIGN.md = how it should look and feel. Two files, two concerns.
• 68+ ready-to-use sites across 8 categories. AI & LLM Platforms, Developer Tools, Backend/Database/DevOps, Productivity & SaaS, Design & Creative Tools, Fintech & Crypto, E-commerce & Retail, Media & Consumer Tech, Automotive. Covers Claude itself (warm terracotta + editorial layout), all major AI platforms, fintech (Stripe purple-gradients + weight-300), automotive (Ferrari chiaroscuro + Ferrari Red), etc.
• Structured 9-section format. Visual Theme / Color Palette & Roles / Typography / Component Stylings / Layout Principles / Depth & Elevation / Do’s and Don’ts / Responsive Behavior / Agent Prompt Guide.
• Each site ships three files. DESIGN.md (the spec), preview.html (visual catalog — color swatches, type scale, buttons, cards), preview-dark.html (dark-surface version).
• Anti-slop lever. This is a concrete mechanism for the problem Anti-AI Slop Guide and Frontend Design Deep Dive describe — agents default to generic cream/serif aesthetics. A DESIGN.md imposes a different fixed point the model can’t drift from.
• Custom + private requests available. https://getdesign.md/request for a specific site; private variants available for sponsors.
• Hosted gallery. https://getdesign.md/ browses all 68+ files with visual previews.
• 58k stars, active. Pushed same-day as this ingest (2026-04-17). High-velocity project.
• MIT licensed, no warranty. “Extracted design tokens represent publicly visible CSS values. We do not claim ownership of any site’s visual identity.”

How it fits into the Claude design ecosystem

This is orthogonal to Claude’s own skills (frontend-design, taste-skill, soft-skill). Those skills teach the model how to reason about design. DESIGN.md tells the model what design system to execute. They compose:

• Skills = methodology (“how to make distinctive frontends, avoid AI slop aesthetics”)
• DESIGN.md = target specification (“match Linear’s aesthetic”, “match Ferrari’s aesthetic”)

Per Claude Prompting Best Practices, Opus 4.7 has a strong default house style (cream/off-white + serif + terracotta accent). Generic “don’t use cream” doesn’t break this; the doc says the two working approaches are (a) specify a concrete alternative spec, or (b) have the model propose options before building. DESIGN.md is the canonical way to do (a).

Implementation

• Tool/Service: awesome-design-md (GitHub); getdesign.md (browser gallery); Google Stitch DESIGN.md format
• Setup:
  1. Visit https://github.com/VoltAgent/awesome-design-md or https://getdesign.md/
  2. Pick a site whose aesthetic matches your brief
  3. Copy that site’s DESIGN.md into your project root
  4. Tell Claude Code (or Cursor, or Google Stitch): “Use the DESIGN.md in the project root.”
  5. Generate UI — it will respect colors, typography, component styling, and layout principles from the spec
• Cost: Free (MIT license). Design docs extracted from publicly visible CSS.
• Integration notes:
  • Works with any AI coding agent that reads the project filesystem — not Claude-specific.
  • Compose with Claude design skills: DESIGN.md constrains what; the skills inform how to make it distinctive within that constraint.
  • For Claude Code + routines (Routines): check a DESIGN.md into the repo so every routine run picks up the same design system automatically.

Format reference — DESIGN.md 9-section skeleton

#	Section	What it captures
1	Visual Theme & Atmosphere	Mood, density, design philosophy
2	Color Palette & Roles	Semantic name + hex + functional role
3	Typography Rules	Font families, full hierarchy table
4	Component Stylings	Buttons, cards, inputs, navigation (with states)
5	Layout Principles	Spacing scale, grid, whitespace philosophy
6	Depth & Elevation	Shadow system, surface hierarchy
7	Do’s and Don’ts	Guardrails and anti-patterns
8	Responsive Behavior	Breakpoints, touch targets, collapsing strategy
9	Agent Prompt Guide	Quick color reference + ready-to-use prompts

Collection highlights (pick one matching your brief)

• Editorial / content: Notion, WIRED, The Verge, Mintlify
• Minimalist dev tool: Linear, Vercel, Cursor, Resend
• Rich data UI: Stripe, Sentry, Kraken, ClickHouse
• Bold / brand-forward: Shopify, Ferrari, Nike, Spotify
• Enterprise trust: Apple, IBM, HashiCorp, Coinbase
• Creative / playful: Figma, Zapier, Airtable, Miro
• Void-black / agent-aesthetic: VoltAgent, Bugatti, SpaceX, Warp

For your own brand the workflow is: request a custom DESIGN.md via https://getdesign.md/request, or extract it manually from your site’s CSS and live style guide.

Related

• Frontend Design Deep Dive — the master Claude design skill; reasons about distinctive frontends. DESIGN.md is the spec to feed that reasoning.
• Anti-AI Slop Guide — DESIGN.md is a concrete mechanism for the banned-pattern problem
• Taste Skill Deep Dive — design dials and Creative Arsenal patterns that compose with a DESIGN.md constraint
• Soft Skill Creative Direction — Absolute Zero directive, vibe archetypes — aligns with DESIGN.md’s “Visual Theme” section
• Design Skills Overview — where DESIGN.md fits in the broader skills landscape
• Design Skills Cheatsheet — quick reference
• Design Skills Workflow — step-by-step workflow; DESIGN.md slots into the “context” and “direction” phases
• Claude Prompting Best Practices — the “specify a concrete alternative” guidance for overriding Opus 4.7’s default cream/serif style; DESIGN.md is that concrete alternative
• Claude Design (Anthropic Labs) — Anthropic’s own design product; different tool-class from DESIGN.md but related problem space
• Claude Design for Prototypes and UX — codebase-linking workflow; a DESIGN.md in the repo would be one of the files Claude Design sees
• Agent Skills Overview — skills are the Claude-native equivalent of “how-to” packages; DESIGN.md is the “how-to-look” equivalent

Open Questions

• Sync with source sites. Sites redesign; DESIGN.md files eventually drift. Does VoltAgent track updates, or are files snapshots at extraction time?
• Claude Design interaction. Anthropic’s Claude Design product has its own design-system connection mechanism (per Claude Design for Presentations). Does a DESIGN.md in the project root get picked up automatically, or is Claude Design’s design system mechanism separate?
• Quality uniformity. 68 DESIGN.md files at different maturity levels — which are highest quality? No explicit ranking in the repo.
• Custom extraction tooling. Is there an automated extractor, or are these hand-crafted from each site’s CSS?
• Stitch DESIGN.md official spec drift. The format extends Stitch’s spec (9 sections vs Stitch’s baseline). What happens if Stitch updates the canonical format?

Try It

1. Pick an aesthetic that matches a current brief. Browse the 68+ options at https://getdesign.md/ — e.g. for an internal dashboard, try Linear or Vercel; for a marketing page, try Stripe or Shopify; for a portfolio, try Notion or Clay.
2. Drop it into one project. Copy that site’s DESIGN.md into a project root. Tell Claude Code: “Use the DESIGN.md in the project root for all UI work.” Generate a new component. Compare to what you’d have gotten without it.
3. Diff with and without. Same prompt, one run with DESIGN.md, one without. This makes the leverage concrete.
4. Combine with skills. Keep your Claude design skills enabled and add a DESIGN.md. The skills still fight generic aesthetics within the DESIGN.md’s style space — a stronger combined constraint than either alone.
5. Consider a custom DESIGN.md for your own brand. Request at https://getdesign.md/request or write one by hand following the 9-section format in the Implementation section above. Check it into every repo where agents generate UI.
6. Evaluate the skill-vs-DESIGN.md split. Notice which constraints are better expressed as methodology (a Claude skill like frontend-design) vs as target spec (a DESIGN.md). The two don’t overlap — they compose.