How to use awesome-design-md

73+ production DESIGN.md files from real brands. Drop one into your project and let your coding agent build a matching UI.

Extracting a design system takes time and depends on how well a site renders for crawlers. If you already know the aesthetic you want (Vercel's minimal dark, Stripe's clean financial, Figma's playful purple), a pre-made file gets you there in seconds. Each entry in this collection includes the DESIGN.md plus HTML preview catalogs showing colors, typography, and components. You see exactly what you're getting before adding it to your project.

L2L3L4

Before you startWorks best alongside the design.md how-to (/how-to/google-labs-code-design-md), that guide explains custom extraction; this collection is the shortcut when you don't need it.

Steps

Find an aesthetic that matches your vision

Browse the collection of 73 brands, organized by category: AI platforms, developer tools, fintech, e-commerce, media, automotive. Look for a brand whose visual language matches what you want to build toward. You're borrowing spatial rhythm and typographic proportions, not copying identity.

Open and copy the DESIGN.md file

Click the brand entry, open the raw file, copy everything. Save it in your project folder as DESIGN.md. That exact name is what Lovable, Bolt, and Claude Code look for.

Swap out the identity layer

Before using the file, replace what's theirs: swap their color palette for yours, replace premium or brand-specific font names with Google Fonts equivalents of similar character. Keep the spacing scale and component proportions. That rhythm is the part worth borrowing.

I have a DESIGN.md file based on [BRAND] that I want to adapt for my own project. Keep the spacing scale, typographic hierarchy, and component structure exactly as they are. Replace the colors with a palette that works for a [YOUR_ROLE]. Replace any premium or brand-specific font names with Google Fonts alternatives of similar character. Tell me what you changed and why.

[BRAND]Brand you borrowed from e.g. Linear

[YOUR_ROLE]Your role and aesthetic direction e.g. video editor portfolio with a dark, cinematic feel

Use it in your build

Paste the adapted DESIGN.md as the first block in your Lovable or Bolt prompt, or pass it to Claude Code as a reference file. The AI reads the system before making any layout decision. Spacing, hierarchy, and component patterns are set before a single element is placed.

How do you know it worked?

You have a DESIGN.md file in your project folder with values that feel right for your portfolio direction
The color values in the file are yours, not the borrowed brand's
You can name the base spacing unit from the file
The file is saved as DESIGN.md (not design.md.txt or any other variant)

If something looks off

Using the brand's colors without changing them

The color palette is their identity, not a template. A portfolio built on Stripe's exact blue reads as an imitation. Swap the palette first. Keep the structure, own the surface.

Choosing by brand recognition instead of aesthetics

Pick based on how the design feels, not who made it. BMW's dark premium surfaces and Figma's playful purple are completely different design languages. Look at the spacing rhythm and typographic weight. Ask: does this match what I want to say?

Forgetting to update the file when your direction shifts

A stale DESIGN.md sends Claude the wrong brief on every build that follows. When you change direction, update the file first.