Your AI tools don't know what your brand looks like

Every AI coding agent generates the same UI. Gray backgrounds, blue buttons, Inter font, 8px border radius. It doesn't matter if you're building for a fintech startup or a surf shop. The output looks identical because the agent has zero context about your brand.

Google noticed this too. When they redesigned Stitch in March 2026, they introduced a file format called DESIGN.md. It's a markdown file that encodes your design system (colors, typography, spacing, component styles) in a format that LLMs can read. Drop it in your project root and tools like Claude Code, Cursor, Gemini CLI, and Stitch itself will use it to generate UI that actually matches your brand.

The problem is, nobody wants to write one from scratch.

What a DESIGN.md looks like

It has 5 sections:

1. Visual Theme & Atmosphere - mood, shape language, depth
2. Color Palette & Roles - every color with a semantic role
3. Typography Rules - font families, size scale, weights
4. Component Stylings - buttons, cards, inputs
5. Layout Principles - spacing scale, base grid unit

Here's a snippet from Stripe's:

## 2. Color Palette & Roles
- **White** (\`#FFFFFF\`) — Page background
- **Dark Blue** (\`#533AFD\`) — Accent background
- **Cyan** (\`#00D66F\`) — Accent background
- **Dark Muted Blue** (\`#64748D\`) — Secondary text

## 3. Typography Rules
**Primary font:** sohne-var
- Headings: 26px, 32px, 48px, 56px
- Body / UI: 14px, 16px, 18px, 22px

Writing this by hand means opening DevTools, inspecting every element, noting down colors and fonts, figuring out the spacing scale. For a complex site that's hours of work.

Extracting it automatically

I built a CLI called brandmd that does this in one command:

npx brandmd https://stripe.com

It launches a headless browser, renders the page, scrolls through it to trigger lazy-loaded content, dismisses cookie banners, then extracts computed styles from every visible element. Colors get clustered (so you don't end up with 50 shades of the same gray), fonts and spacing values get grouped into scales, and everything gets templated into the DESIGN.md format.

No LLM calls, no API keys. Runs entirely on your machine.

What it catches

I ran it on a few sites to test:

Linear - picked up Inter Variable as the primary font, Berkeley Mono as secondary, the indigo accent (#5E6AD2), and identified a 4px base grid from the spacing values.

Stripe - found sohne-var (their custom font), the purple (#533AFD) and green (#00D66F) accent colors, and 4 distinct shadow styles for depth.

The output isn't perfect. It can't read your Figma tokens or understand why you chose a specific color for error states. But it gives you a solid starting point that's 90% there, and you can tweak the remaining 10% in a few minutes.

The workflow

# Extract from your current site
npx brandmd https://yoursite.com -o DESIGN.md

# Drop it in your project root
mv DESIGN.md ./

# Now your AI tools generate on-brand UI

Claude Code, Cursor, and Gemini CLI all read markdown files from your project root automatically. No configuration needed.

Try it

npx brandmd https://linear.app

Source: github.com/yuvrajangadsingh/brandmd

Works on any public URL. If you have a site and you use AI coding tools, try it on your own URL. You'll probably be surprised at how much design information is hiding in your computed styles.