Awesome DESIGN.md

Awesome DESIGN.md is a GitHub-hosted directory that curates 73 DESIGN.md design-system documents extracted from real websites, letting AI coding agents generate UI that matches a brand's visual language. The collection was built by VoltAgent and is ranked #150 globally on GitHub, with each file formatted for Google Stitch's DESIGN.md specification so that copying one file into a project root is enough for an agent to adopt that design language.

What is Awesome DESIGN.md?

Awesome DESIGN.md is a free, open-source collection of plain-text design system files, one per popular website, that AI agents read to produce visually consistent user interfaces. Each entry is a single markdown file defining the site's visual theme, color palette, typography, components, layout principles, and more, plus a preview.html and preview-dark.html that show the system rendered as swatches and UI samples. The repository is maintained by VoltAgent and released under the MIT license, and it organizes the files into categories such as AI & LLM Platforms, Developer Tools, Fintech & Crypto, Automotive, and Retro Web.

Key Features

• 73 DESIGN.md files — Covers brands from Claude and Cursor to Stripe, Ferrari, and a 1996 Dell retro file, each with a documented design system.
• Google Stitch format — Every file follows the Stitch DESIGN.md specification with nine sections: visual theme, color palette with hex values, typography hierarchy, component stylings, layout principles, depth, do's and don'ts, responsive behavior, and an agent prompt guide.
• Visual previews — Each site includes preview.html and preview-dark.html so you can see the color swatches, type scale, buttons, and cards before committing to the design.
• Request system — You can request a DESIGN.md for a specific website, including private requests delivered exclusively to you, via getdesign.md/request.
• Category breadth — Files span eleven categories, from AI platforms (Claude, ElevenLabs) and dev tools (Cursor, Vercel) to automotive (BMW, Tesla) and a Retro Web Saturday series with 1990s-era designs.
• Free and open source — MIT-licensed with contribution guidelines, so anyone can improve existing files, report missing tokens, or add new sites.
• No special tooling — DESIGN.md is plain markdown, so there is nothing to parse or configure; any AI coding agent or Google Stitch can read it directly.

Who is it for?

• Vibe coders and pro-coders using AI assistants — Drop a DESIGN.md for a desired brand into a project and prompt an agent like Cursor or Copilot to build pages that match that exact aesthetic.
• Product teams adopting Google Stitch — Use the pre-extracted design systems as a starting point for consistent UI generation without manually writing design tokens.
• Developers building landing pages or internal tools — Copy a file for a well-known SaaS such as Stripe, Linear, or Notion and get a polished, design-consistent result in minutes.
• Designers exploring design language — Study how real brands' design systems are broken down into tokens, typography rules, and component states.

What can you do with it?

• AI coding agents: Copy the Stripe DESIGN.md and ask your agent to build a checkout page with Stripe's signature purple gradients and weight-300 elegance, producing a result that stays on-brand automatically.
• Vibe coders: Use the Retro Web series to generate period-accurate 1990s UI, such as a Dell (1996) catalog page with black frames and hand-cut GIF stickers, or a Nintendo.com (2001) console-chrome homepage.
• Google Stitch users: Feed any of the 73 files directly into Stitch to generate new pages that reuse the same design language without additional setup.
• Open-source contributors: Improve existing DESIGN.md files by fixing wrong colors, adding missing tokens, or strengthening weak descriptions, then submit a pull request through the listed contribution workflow.

How does it work?

Pick a site from the collection, copy its DESIGN.md file into your project root, and tell your AI agent to use it. That is the entire workflow described in the repository: the agent reads the markdown and generates UI that follows the defined visual theme, tokens, and rules. No Figma exports, JSON schemas, or special configuration are required.

Pricing

The repository is free and open source under the MIT license. There is also a sponsorship option for companies that want to feature their product alongside the collection, but using the DESIGN.md files themselves costs nothing.

FAQ

What is a DESIGN.md file?

A DESIGN.md is a plain-text design system document introduced by Google Stitch. It defines how a product should look and feel — colors, typography, components, layout, and responsive rules — in a format that large language models read well. The Awesome DESIGN.md repository provides these files pre-extracted from real websites.

How many DESIGN.md files are in the collection?

The repository currently lists 73 DESIGN.md files, covering brands across eleven categories from AI and developer tools to fintech, e-commerce, media, automotive, and a Retro Web series.

How do I use a DESIGN.md file from this repo?

Copy the DESIGN.md file from a site's folder into your project root, then tell your AI coding agent or Google Stitch to build a page using it. Each site also includes preview.html and preview-dark.html so you can inspect the design system visually before using it.

Is Awesome DESIGN.md free?

Yes, the repository is released under the MIT license, so all DESIGN.md files, previews, and documentation are free to use, modify, and redistribute. The project is community-maintained on GitHub and also accepts sponsorship for product promotion.

What file formats come with each DESIGN.md?

Each site includes three files: DESIGN.md (the design system), preview.html (a light-mode visual catalog of color swatches, type scale, buttons, and cards), and preview-dark.html (the same catalog in dark mode).