DESIGN.md Generator

Create a DESIGN.md from a live website. Enter its URL and the generator builds the file your coding agent reads: color, typography, spacing and component tokens, plus the rules for using them. New to the format? Read what a DESIGN.md is.

How the generator builds a DESIGN.md

  1. Enter a website URL

    Any public page works: a marketing site, a docs site or a web app's landing page. Sign up first; each run spends credits from a prepaid pack.

  2. The generator reads the site

    It opens the site in a real browser and measures the colors, fonts, spacing, corner radii and components it actually uses. A Pro run samples around five pages of the site. Every run takes at least a minute.

  3. You get a DESIGN.md

    Tokens go into YAML front matter, the rules for using them into markdown: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components, and Do's and Don'ts. Copy it, download it or edit it in My extractions.

Sample output: Anthropic’s DESIGN.md

An excerpt of the file the generator made from anthropic.com, cut to a few tokens per group and the start of the Overview. The full file also covers layout, elevation, shapes, components and do’s and don’ts.

DESIGN.md
---
version: alpha
name: Anthropic
colors:
  primary: "#141413"
  on-primary: "#FAF9F5"
  ink: "#141413"
  body-muted: "#5E5D59"
  surface: "#FAF9F5"
  surface-alt: "#F0EEE6"
  hairline: "#D1CFC5"
typography:
  hero-display:
    fontFamily: Anthropic Serif
    fontSize: 68.3429px
    fontWeight: 400
    lineHeight: 1.1
  body:
    fontFamily: Anthropic Serif
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 8px
  md: 12px
  lg: 16px
spacing:
  base: 4px
  section-padding-y: 48px
---

## Overview

Anthropic's site reads like a well-set research journal printed on warm
paper. The canvas is **Parchment** (`surface`, #FAF9F5), text is a
near-black **Ink** (`ink`, #141413), and there is no saturated brand hue
at all.

See the full Anthropic DESIGN.mdBrowse more DESIGN.md examples

FAQ

DESIGN.md generator questions

What the generator makes, what it costs and how to use the file with your coding agent.

One DESIGN.md file that follows Google's DESIGN.md spec. The YAML front matter holds the site's color, typography, spacing, corner radius and component tokens. The markdown body explains how to use them, section by section, so a coding agent can build new UI that matches the site.

Not with the generator: it builds the file from a live, public website. If you are designing from scratch, write the DESIGN.md by hand following the spec and check its structure and tokens with the free DESIGN.md Validator.

Any public website reachable over HTTP or HTTPS, including static sites, single-page apps and server-rendered pages. Pages behind a login, on localhost or on a private network are not supported, and some sites block automated browsers.

You sign up and buy a prepaid credit pack, from $5 for 50 credits. There is no subscription and credits never expire. Each run spends credits, and the pricing page shows the current cost per run. If a run fails on our side, the credits are refunded.

Save it as DESIGN.md in your project root or docs folder and mention it in your prompt. Claude Code, Cursor, GitHub Copilot, Windsurf and other agents with file access read it as a style reference. Agents can also run the generator themselves through the Design Extractor MCP server.

Yes. Every DESIGN.md you generate is saved in My extractions, where you can edit it, download it again or re-extract the site later. It is plain text, so you can also edit it in your own editor.