Repo Year in Review Limited info

VoltAgent/awesome-design-md

A curated set of ready-to-use DESIGN.md files extracted from real brand websites, so AI coding agents can generate UI matching a chosen design language.

  • 120k GitHub stars
  • ⚖️ MIT
View on GitHub (opens in a new tab) Setup guide
VoltAgent/awesome-design-md preview image

What it is

Awesome DESIGN.md is a collection of DESIGN.md files, plain-text markdown design system documents based on the format introduced by Google Stitch. Each file is extracted from a real website and captures its colors, typography, components, layout and more. You copy one into your project root and tell your AI agent to use it to build UI that follows that design language.

Who it's for

  • Developers using AI coding agents who want generated UI to match a specific brand's look
  • Designers and vibecoders shipping UI with AI coding agents and web builders
  • Users of Google Stitch who want ready-made DESIGN.md references

Requirements

Requirements

  • An AI coding agent or Google Stitch that can read a DESIGN.md file in your project

Setup

  1. Copy a DESIGN.md into your project

    Pick a site's DESIGN.md from the collection and copy it into your project root.

  2. Tell your AI agent to use it

    Instruct your AI agent to use the DESIGN.md, for example by asking it to build a page that looks like the design.

Examples

Basic usage prompt

Prompt
prompt
build me a page that looks like this

Expected output: After copying a DESIGN.md into the project root, this style of instruction tells the agent to generate UI consistent with the design language.

Retro web prompt idea

Prompt
prompt
Build a period-accurate vintage UI using this DESIGN.md

Expected output: The Retro Web series (e.g., Dell 1996, Nintendo.com 2001) is meant to be dropped in with a request for a period-accurate vintage UI. The wording is adapted from the README's description.

Pros & cons

Pros

  • Pro:Large catalog (73 DESIGN.md files per the badge) across categories such as AI platforms, developer tools, fintech, automotive and retro web
  • Pro:Plain markdown format with no Figma exports, JSON schemas or special tooling to configure
  • Pro:Each file follows a structured format covering color palette, typography, component stylings, layout, elevation, do's and don'ts, responsive behavior and an agent prompt guide
  • Pro:Each site includes preview.html and preview-dark.html to visually inspect swatches, type scale, buttons and cards

Cons

  • Con:Files are extracted from public websites, and the README says they are provided "as is" without warranty and do not claim ownership of any site's visual identity
  • Con:Instructions for using a file are minimal (copy it and tell your agent to use it), with no agent-specific setup documented
  • Con:Contributions require opening an issue first to discuss ideas before a PR

Images

VoltAgent/awesome-design-md preview image
VoltAgent/awesome-design-md preview image · VoltAgent/awesome-design-md on GitHub · MIT
VoltAgent/awesome-design-md preview image