VoltAgent /
awesome-design-md
A curated set of DESIGN.md files that capture the look of well-known websites
- 123k stars
- 3.8k stars since 3 Oct
- Updated 9 days ago
- Beginner friendly
- Design & UI
A DESIGN.md is a plain markdown file that describes how a product should look and feel. The README compares it to AGENTS.md: AGENTS.md tells coding agents how to build the project, and DESIGN.md tells design agents how it should look. The idea comes from Google Stitch.
This repo is a curated index. Each entry links to a DESIGN.md on getdesign.md that was extracted from a real site, with notes on its patterns, tokens and rules. The README lists about 70 brands, grouped by area: AI platforms, developer tools, fintech, retail, media, automotive, and a few retro 1990s and early-2000s pages.
You copy a file into your project root and ask your agent to build a page that looks like it. There is no Figma export, JSON schema or extra tooling, only text the model reads directly. The README also links a form to request new sites, including private requests. It carries sponsor and product promotions, which are separate from the collection.
What it does
Plain markdown design files
Each DESIGN.md is a text file with analyzed patterns, tokens and rules for one site's visual style. No special tools are needed to use it.
Broad brand coverage
The list spans AI companies, developer tools, SaaS, fintech, e-commerce, media and car makers, such as Claude, Vercel, Stripe, Spotify and Tesla.
Short style note per entry
Every listing has a one-line description of the look, such as dark canvas, accent color or typeface, so you can pick one before opening it.
Retro web series
A few files come from 1990s and early-2000s sites, such as Dell (1996) and Nintendo.com (2001), for period-style interfaces.
Request a DESIGN.md
You can ask for a file for a specific website, and private requests are delivered only to you.
What you could build
- Build a landing page that follows the visual style of a site you admire by handing its DESIGN.md to a coding agent.
- Keep AI-generated screens visually consistent by keeping one DESIGN.md in your project root.
- Study how a brand's colors, typography and spacing are written down by reading the files.
- Make a period-accurate 1990s style web page using one of the retro files.
- Write your own DESIGN.md for your product, using these files as examples.
Get started
Browse the collection in the README and open the entry for the style you want on getdesign.md. Copy that DESIGN.md into your project root, then ask your AI coding agent to build a page that looks like it.
Commands are copied from the project's README. Read it on GitHub for the full setup.
Anything better than awesome-design-md?
Strongest pick for copying a known brand's look into a project: it's the biggest, most active collection with broad brand coverage. Look elsewhere if you need a formal token spec with tooling, or want original, non-brand-cloned styles.
-
design.mdUse alongside
You want a real DESIGN.md format with YAML tokens plus rationale, and a CLI that lints, diffs, and exports to Tailwind or W3C tokens.
Trade-off: It's a spec and tooling, not a library of ready-made brand files, so you write or adapt your own.
-
awesome-design-skillsAlternative
You want ready-made design systems installed with one npx command, packaged as agent skills (SKILL.md) alongside a human-readable DESIGN.md.
Trade-off: Only 67 entries and far less popular, with no recent commits since June 2026.
-
impeccableUse alongside
Your agent keeps producing generic Inter-and-purple-gradient UIs; use it with a brand DESIGN.md to add audit, critique, and polish commands.
Trade-off: It supplies rules and commands rather than a specific brand's style, so it won't give you a target look alone.
-
hallmarkAlternative
You want original, non-template-looking pages chosen per brief and checked against anti-pattern gates, instead of copying an existing site's style.
Trade-off: You get a generated look rather than a faithful match to a known brand.
More in Design & UI
open-design
Local-first workspace where coding agents build prototypes, decks, images and motion
diagram-design
A skill that makes on-brand HTML and SVG diagrams from a plain-language request
design.md
A file format that tells coding agents your colors, fonts, and spacing, plus why
pascalorg/editor
Local-first 3D building editor you can use in a browser, a CLI, or through AI agents
openui
A framework and compact language for letting LLMs stream live UI components
awesome-design-skills
A registry of 67 ready-made design system files for AI coding agents