Awesome DESIGN.md Collection: AI UI Design Reference
VoltAgent/awesome-design-md
Awesome DESIGN.md is a library of 73 ready-made DESIGN.md files — written style briefs for real brand websites like Stripe, Tesla, and Notion — that you drop into a project so a coding agent has something concrete to copy instead of guessing. It's a library, not a generator: nobody analyzes your own site here. Reach for it when you want an agent to nail a specific brand's look on the first pass; skip it if the brand you need isn't among the 73 covered.
Understanding DESIGN.md and This Collection's Purpose
Awesome DESIGN.md is a repository of 73 pre-written design-system briefs, one per real brand. Read one file and an AI coding agent, or Google Stitch itself, gets a concrete style reference instead of guessing at a brand's look.
Inside Each DESIGN.md: Structure and Content
- ✓Nine tracked sections per file — visual theme, color palette, typography, components, layout, depth/elevation, do's-and-don'ts, responsive behavior, and an agent prompt guide, per the README's own breakdown
- ✓Color entries carry a semantic name, hex code, and functional role instead of just a swatch, so an agent knows which color is a CTA and which is a background
- ✓A full typography hierarchy table (not just "font: Inter") that maps font family to each heading level and body size
- ✓Explicit do's-and-don'ts guardrails per brand, meant to stop an agent from drifting into a generic look mid-project
- ✓Each entry ships three files, not one: DESIGN.md itself, plus preview.html and preview-dark.html, which render the color swatches, type scale, and components as an actual page you can look at before committing to it
- ✓73 brand entries spanning ten categories — AI/LLM platforms, dev tools, fintech, automotive, retail, and a Saturday "Retro Web" series pulling 1990s-2000s sites like Dell (1996) and Nintendo.com (2001)
- ✓A ready-to-use agent prompt baked into every file, so you're not writing your own prompt wrapper around the color values
How to Use DESIGN.md Files with AI Coding Agents
- •Copy a chosen site's DESIGN.md into your project root, then tell your coding agent to build against it — the README describes this as the entire workflow, no config file or build step involved
- •Open the matching preview.html (and preview-dark.html) first to confirm the color palette and type scale actually look right before an agent starts generating pages against it
- •Use it with Google Stitch directly, since DESIGN.md is Stitch's own format and the collection is built to that specification
- •Request a DESIGN.md for a brand that isn't in the collection yet through the linked request form at getdesign.md/request, including a private, non-public delivery option per the README
- •Pair a DESIGN.md with your own AGENTS.md so one file tells the agent how to build the project and the other tells it how the result should look — the README frames these as two different, complementary documents
Strengths
- ✓Each file carries real depth, not just a color hex dump — semantic color roles, a full type hierarchy, do's-and-don'ts, and responsive rules are documented per the README's nine-section breakdown
- ✓The three-file-per-entry format (DESIGN.md, preview.html, preview-dark.html) means you can eyeball a palette before wiring an agent up to it, instead of guessing from raw values
- ✓It's genuinely broad — 73 entries across categories from crypto exchanges to automakers to 1990s throwbacks, so there's a real chance the brand style you want is already covered
- ✓No tooling lock-in: it's a markdown file you copy and paste, so dropping it into an existing project costs nothing beyond the copy
- ✓MIT-licensed, so reuse in a commercial project isn't gated by a separate license check
Considerations for Using DESIGN.md Files
- △The collection only covers 73 brands; if the exact company you want isn't among them, this repo doesn't generate a new DESIGN.md for you — you either write one by hand or use the linked request form, which the README says exists for that gap but is a separate service, not something this repo delivers
- △DESIGN.md itself is a new, single-vendor format defined by Google Stitch — there's no evidence in the README of another coding agent natively parsing it beyond "drop it in and tell your agent to use it," so results depend on how well your specific agent follows a markdown style brief rather than any built-in support
- △The README doesn't document a changelog or update cadence for individual files, so there's no way to tell from the repo itself how current an entry stays after a brand redesigns its site
- △No install or usage tooling exists beyond copy-and-paste — that's expected for a reference collection, but it also means there's no validation step to catch a stale or wrong color value before an agent starts building against it
Related AI Design & Build Tools
Frequently Asked Questions
DESIGN.md is a plain-text design-system file — a concept introduced by Google Stitch — that AI coding agents read to generate UI matching a specific brand's visual language, without Figma exports or JSON schemas.
Copy the DESIGN.md file for a brand into your project root, then tell your AI coding agent to build against it. Awesome DESIGN.md ships a preview.html and preview-dark.html per entry so you can check the palette first.
Awesome DESIGN.md supports requests through a linked form at getdesign.md/request, where you can ask for a specific website's file, including a private option delivered only to you.
Each file in Awesome DESIGN.md covers nine areas: visual theme, color palette with semantic roles, typography hierarchy, component states, layout spacing, shadow/elevation, do's-and-don'ts, responsive breakpoints, and an agent prompt guide.
Awesome DESIGN.md is released under the MIT License, and the README notes the extracted design tokens represent publicly visible CSS values with no claim of ownership over any site's visual identity.
Contributing to Awesome DESIGN.md means fixing wrong colors, missing tokens, or weak descriptions in existing files, per the CONTRIBUTING.md guide — the README asks contributors to open an issue before submitting a pull request.
Who should try it — and who should skip
Try Awesome DESIGN.md if you're prototyping UI with an AI coding agent and want it to stop defaulting to the same rounded-card, indigo-gradient look — pick the closest brand entry to what you're building and hand the agent something concrete. It also suits anyone studying how real production sites structure color roles or type hierarchies, since the files read like case studies as much as specs. Skip it if you need a DESIGN.md for a brand outside the 73 covered and can't wait on the request form, or if your project already has an established design system that a borrowed brand aesthetic would just fight against.