Tool: borrow from a brand (awesome-design-md)

What it does

  • A collection of 84 DESIGN.md files. Each describes a real brand's website (Airbnb, Apple, Stripe, Claude and others) so an AI can build in that style.
  • Each file holds the brand's colours, type, corners, spacing and components, plus written rules and a Do's and Don'ts list.

When to reach for it

  • A known brand has solved a problem like yours, and you want to see exactly how.
  • You want real values (font weights, corner sizes, how many accents) instead of guesses.
  • You want a finished DESIGN.md to learn the format from.

How to use it

  • Find the brand's folder under design-md/ in github.com/voltagent/awesome-design-md.
  • The source's way: copy that DESIGN.md into your project root and tell your agent to use it, for example "build me a page that looks like this".
  • Read the Overview's "Key Characteristics" list for a quick summary of the brand.
  • Trust the tokens and the Do's and Don'ts over the Overview. One file (Notion) contradicts itself.
  • Read "Known Gaps" for what the copy couldn't capture, such as animation and hover.
  • Don't trust the README's one-line summaries. Some contradict the files (Cursor, ElevenLabs, Runway).
  • To ask for a brand that isn't there, use getdesign.md.

What happened when we used it

  • We used it: about 15 brands' files were weighed against what the site had to feel like, and three were picked.
  • It borrowed by fit, not fame. It picked the two or three brands whose problem was like ours and took one idea from each:
    • a filterable photo wall from Pinterest;
    • colours taken from real materials, from Starbucks;
    • one accent kept for a single moment, the way Starbucks keeps gold for its rewards.

Source

  • Source: awesome-design-md.

Leads onward

Leads here