What is design.md?

A README for your UI — readable by humans and AI agents

Your project's visual identity — colors, fonts, spacing, component styles — usually lives in a Figma file, a brand PDF, or a designer's head. An AI coding agent can't read any of those.

A design.md is a plain-text file that describes how your UI should look, so both humans and agents work from the same rules. Same idea as a README, but for design.

design.mdexample output

# Stripe Design System

## Overview
A clean, modern fintech aesthetic with deep purples,
crisp whites, and subtle gray tones. The design
emphasizes clarity, trust, and professionalism.

## Colors
- Primary: #635BFF (Electric Indigo)
- Secondary: #96F7D6 (Mint Green)
- Neutral: #0A2540 (Deep Navy)
- Surface: #FFFFFF

## Typography
- Headlines: Sohne, 32-48px, 600 weight
- Body: Sohne, 16px, 400 weight
- Mono: SF Mono, 14px, 400 weight

## Spacing
- xs: 4px  |  sm: 8px  |  md: 16px
- lg: 32px  |  xl: 64px  |  2xl: 128px

## Components
- Button Primary: indigo bg, white text, 4px radius
- Button Secondary: white bg, indigo border, 4px radius
- Card: white bg, subtle shadow, 8px radius

What gets extracted

ColorsFull palette with HEX, RGB, HSL, and usage labels

TypographyFont families, weights, styles, and complete type scale

SpacingTokenized spacing scale from xs to 2xl

BordersBorder radius values and their common uses

ShadowsElevation tokens and where they apply

ComponentsButton, card, input, and chip style definitions

How it works

Paste a URL

Drop in any live website — competitor, client, or inspiration.

Screenshot & Extract

We capture the page and pull the real CSS tokens behind it.

Get design.md

Download a structured markdown file your AI agent can read.

When to use it

1You're starting a project and want to clone another site's visual language as a starting point
2You use Cursor, Claude Code, or Copilot and want them to stop guessing your design
3A client sent you a URL instead of a brand guide and you need to hand something to your dev team
4You want to see how a competitor's design system is actually structured

Common questions

Ready to extract?

Try Stripe, Vercel, or any URL you want to learn from.

Try it now →