Sitepeel

DESIGN.md examples

168 brands

Real design systems from 168 product sites, in the DESIGN.md format Google published with Stitch. Pick one and your AI coding agent builds in that style. What is DESIGN.md?

Make one from any site

AI 14

Developer tools 37

UI and animation libraries 7

SaaS and productivity 37

Fintech and payments 13

Marketing and analytics 11

Design tools and site builders 13

Inspiration 7

E-commerce and brands 12

Media and consumer apps 14

Security and privacy 3

Make one from any site

Not listed? Paste any link and get its DESIGN.md and style guide, measured from the live page.

Questions about DESIGN.md examples

What is a DESIGN.md file?

A plain-text design system for AI coding agents: color, type, spacing and component tokens at the top, short rules underneath. Google published the format with Stitch. Read what DESIGN.md is and how it works.

How do I use one of these examples?

Download the file, put it in your project’s root folder and ask your agent to follow it. Setup guides: Claude Code, Cursor, Codex and v0, Lovable and Bolt.

Is there a DESIGN.md template?

Any example here works as one. Pick a site close to what you are building, keep the file’s sections and change the colors, fonts and rules to your own brand.

How do I get a DESIGN.md from a website that isn’t listed?

Paste its link into the DESIGN.md generator. It measures the live page and writes the file in under a minute. Our guide shows how to create a DESIGN.md from a website.

What is the best DESIGN.md file?

The one that matches the product you are making. A developer tool reads best with a dev tool’s file, a shop with a store’s. Good files are short: a clear palette, a type scale and a few rules.

Are these the brands’ official design systems?

No. Each file is an independent measurement of a public page, not made or approved by the brand. Use them to learn and prototype, and don’t copy logos, names or content.

Are the examples free?

Yes. Open, copy or download any of them, with no account.