Repolode
Submit
VoltAgent

VoltAgent/awesome-design-md

A curated collection of DESIGN.md files extracted from brand websites, so AI coding agents can generate UI matching those design systems.

View on GitHubWebsite
Stars
126,011
Forks
13,955
Open issues
311
Last commit
10 days ago

What is it?

Awesome DESIGN.md is a collection of plain-text DESIGN.md files, each describing the visual design system of a specific website or brand, including colors, typography, components, layout, depth, and responsive behavior. Each entry is a markdown file that can be dropped into a project root so an AI coding agent can read it and build UI in the same visual language.

The collection covers roughly 84 sites across categories such as AI platforms, developer tools, backend and DevOps products, fintech, e-commerce, media, and automotive, plus a small set of retro web designs from the 1990s and early 2000s. Each site includes a DESIGN.md along with preview HTML pages showing color swatches, type scale, buttons, and cards, in light and dark variants.

The DESIGN.md format originates from Google Stitch. The files are MIT-licensed as a repository, and the maintainers state that the extracted tokens are publicly visible CSS values and that they claim no ownership of any site's visual identity.

Key features

  • 01Provides ready-to-use DESIGN.md files for dozens of brand websites.
  • 02Each file covers colors, typography, components, layout, elevation, and responsive rules.
  • 03Includes preview HTML pages with color swatches, type scale, buttons, and cards.
  • 04Offers light and dark preview variants for each site.
  • 05Follows the Stitch DESIGN.md format, which is plain markdown with no special tooling.

Use cases

  • Copy a brand's DESIGN.md into a project and ask an AI agent to build a page in that style.
  • Study how well-known sites structure their design tokens and component rules.
  • Generate retro-style interfaces from the 1990s and early 2000s collection.
  • Keep AI-generated UI visually consistent across a project.

Quick start

  1. 1

    Pick a DESIGN.md from the collection on getdesign.md

  2. 2

    Copy the DESIGN.md file into your project root, then ask your AI agent to build a page that matches it

In collections

AI coding assistants & agents

Topics

#design-system#design-tokens#ai-coding#ui-generation#awesome-list#css#vibe-coding#design-md#figma#landing-page

FAQ

What is awesome-design-md?
A curated collection of DESIGN.md files extracted from brand websites, so AI coding agents can generate UI matching those design systems. Awesome DESIGN.md is a collection of plain-text DESIGN.md files, each describing the visual design system of a specific website or brand, including colors, typography, components, layout, depth, and responsive behavior. Each entry is a markdown file that can be dropped into a project root so an AI coding agent can read it and build UI in the same visual language.
Is awesome-design-md free to use? What license does it have?
awesome-design-md is open source under the MIT license. Check the license terms before using it in commercial products.
Is awesome-design-md still maintained?
Actively maintained. The last commit to awesome-design-md was on Oct 28, 2026.
What can I use awesome-design-md for?
Copy a brand's DESIGN.md into a project and ask an AI agent to build a page in that style. Study how well-known sites structure their design tokens and component rules. Generate retro-style interfaces from the 1990s and early 2000s collection. Keep AI-generated UI visually consistent across a project.
How do I install awesome-design-md?
Pick a DESIGN.md from the collection on getdesign.md Copy the DESIGN.md file into your project root, then ask your AI agent to build a page that matches it
Where can I get awesome-design-md?
The source code and installation instructions are on GitHub: https://github.com/VoltAgent/awesome-design-md

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects