DESIGN.md library

A growing library of free DESIGN.md files for AI coding agents.
319 websites so far, measured by Sitepeel and updated every day.

Generate a DESIGN.md · Browse with style guides · MCP server · Chrome extension · sitepeel.dev

DESIGN.md is a plain-text design system in the format Google published with Stitch. Colors, fonts, spacing and component tokens sit at the top of the file, with short rules underneath. AI coding agents such as Claude Code, Cursor, Codex and Stitch read it to build UI in a set style. This library has 319 of them so far, for sites like Stripe, Linear and Vercel, and it grows as people make new ones on Sitepeel. Each file is measured from the live site. You can browse the same library, with a style guide for every brand, at sitepeel.dev/design-md/examples.

Stripe · DESIGN.md	Linear · DESIGN.md	Vercel · DESIGN.md
Notion · DESIGN.md	Figma · DESIGN.md	Apple · DESIGN.md
Anthropic · DESIGN.md	Cursor · DESIGN.md	Supabase · DESIGN.md

Don't see your site? Generate its DESIGN.md from any link in under a minute, free.

• How to use
• Generate a DESIGN.md for any site
• All brands: AI (26), Developer tools (75), UI and animation libraries (30), SaaS and productivity (53), Fintech and payments (32), Marketing and analytics (17), Design tools and site builders (36), Inspiration (14), E-commerce and brands (12), Media and consumer apps (14), Security and privacy (4), Agencies and studios (6)
• About Sitepeel
• Credit and license
• FAQ

How to use

1. Pick a brand close to what you are building.
2. Save its DESIGN.md in your project's root folder.
3. Tell your agent to follow DESIGN.md for every UI change.

To fetch one from the terminal, for example Linear:

curl -o DESIGN.md https://raw.githubusercontent.com/Josephbadigar/design-md/main/design-md/linear.app/DESIGN.md

Swap linear.app for any folder name in the tables below.

Generate a DESIGN.md for any site

The library grows every day, but not every site is here yet. Sitepeel gives you three ways to make the file yourself:

• The free DESIGN.md generator. Paste a link and it measures the live page, with a visual style guide you can share.

• The free MCP server, so your agent can call get_design_md and search_design_library on its own. Add it to Claude Code with:

  claude mcp add --transport http sitepeel https://sitepeel.dev/mcp
  

• The Chrome extension. It reads the page open in your browser, so it also works on pages behind a login.

All brands

319 brands in 12 categories so far, with more added as the library on sitepeel.dev grows. Colors are listed background first, then surfaces, text and the accent. Open a brand to see its screenshot. Scripts and agents can read the same list from index.json.

AI

26 brands.

Developer tools

75 brands.

UI and animation libraries

30 brands.

SaaS and productivity

53 brands.

Fintech and payments

32 brands.

Marketing and analytics

17 brands.

Design tools and site builders

36 brands.

Inspiration

14 brands.

E-commerce and brands

12 brands.

Media and consumer apps

14 brands.

Security and privacy

4 brands.

Agencies and studios

6 brands.

About Sitepeel

Sitepeel is a set of free tools for people who build websites. Paste a link and see what the page is made of, then take it into your own project. This library is one part of it.

Website tools (nothing to install):

• Clone prompt: one prompt that rebuilds a page's look and layout in Claude Code, Cursor, Codex, Lovable or v0.
• DESIGN.md generator: the DESIGN.md and a visual style guide of any public page.
• AI slop checker: a 0 to 100 score for how generic a page looks, the tells marked on the page and a prompt that fixes them.
• Asset extractor: every image, SVG, video, font, Lottie and 3D file on a page, in one ZIP.
• Website to HTML: the rendered page as plain HTML, one CSS file and its files.
• Font finder, color palette, tech stack checker, responsive checker and full-page screenshot.

For your AI agent: the Sitepeel MCP server gives Claude Code, Cursor, Codex, VS Code and other agents the same tools, free and without an API key. The quickest setup is to paste this line into your agent:

set up sitepeel mcp - https://sitepeel.dev/setup.md

In your browser: the Sitepeel Chrome extension works on the page you have open, including pages behind a login. Copy an element's HTML and CSS, export a whole page, get its DESIGN.md, colors, fonts and assets, measure spacing, try other fonts and check every screen size.

Credit and license

The files are free to use, change and share under CC BY 4.0. When you share them, credit "Sitepeel (sitepeel.dev)" with a link to https://sitepeel.dev.

Brand names and trademarks belong to their owners. Each file is an independent measurement of the public site, not the brand's official design system.

FAQ

What is DESIGN.md?

A plain-text file that describes a design system for AI coding agents. Google published the format with Stitch. Tokens for colors, type, spacing and components come first, then short written rules. Sitepeel has a short guide to what DESIGN.md is and how it works.

How do I use it with Claude Code or Cursor?

Save the file as DESIGN.md in your project root. In Claude Code, add a line to CLAUDE.md such as "Follow DESIGN.md for all UI work." In Cursor, add the same line to your project rules, or mention @DESIGN.md in the chat. Setup guides: Claude Code, Cursor, Codex.

Are these the brands' official design systems?

No. Each file is an independent measurement of a public page. The brands did not make or approve them. Use them to learn and prototype, and don't copy logos, names or content.

How often is this repo updated?

Every day. A GitHub Action copies the latest files from the Sitepeel library, so new brands show up here soon after they reach sitepeel.dev. Star or watch the repo to see them land.

Can I request a site?

You can make it yourself. Paste the link into the free DESIGN.md generator and you get the file in under a minute.

Made by Sitepeel: free website tools and a Chrome extension for people who build for the web.