One .md file.
Your site stops lkinglooking generic.

The problem

Tell any AI agent to build you a landing page and you already know what comes back: rounded cards, a purple-to-blue gradient, a centered hero, a Get Started button. The result is technically correct. It also looks like every other vibe-coded site on the internet.

This is not the agent's fault. When it builds your page, it averages millions of pages it's seen during training. The average of millions of designs is a generic design.

It has no clue why Vercel uses 1px borders instead of shadows. Why Linear keeps letter-spacing punishingly tight. Why Stripe picks one bright accent and uses it like it's rationed. Those decisions live in the brands' heads not in the agent's training data.

So you're stuck with two bad options:

1. Write a 40-line prompt every time "use #0070f3 for links, -0.02em letter-spacing on headings, 8px corners, no drop shadows just hairline borders…" and still get half wrong.
2. Paste a screenshot and say "make it look like this." The agent copies the pixels but misses the system underneath.

Neither scales. Both burn hours.

What DESIGN.md is

A plain-text file that describes your brand's visual language. The agent reads it before it writes any UI. The format was introduced by Google's design agent, Stitch.

It sits in your repo root, next to the two files you already have:

No Figma plugin. No JSON schema. No CLI. Just one markdown file the agent reads before it writes anything.

What's inside the file

Every DESIGN.md has two layers. The first is YAML at the top of the file the exact values.

---
name: Your Brand
colors:
  primary: "#0039ff"
  ink: "#0a0a0a"
  canvas: "#fafafa"
typography:
  display-lg:
    fontFamily: Geist
    fontSize: 56px
    fontWeight: 500
    letterSpacing: -1.5px
  body-md:
    fontFamily: Geist
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
rounded:
  md: 8px
  lg: 16px
spacing:
  base: 16px
  section: 80px
---

These are tokens. The agent uses them as precise references the primary blue is #0039ff, not something close to it.

The second layer is everything below the closing --- plain markdown, explaining what each token is for and when to use it.

## Overview
Your Brand reads like a serious tool that
respects the user's attention. Display type
stays large but modest in weight. One blue
accent, used scarcely so it never dilutes.

## Colors
- **Primary** (#0039ff): The single brand
  color. Used for primary CTAs and active
  states only. Never as a section background
  it should feel precious.

- **Ink** (#0a0a0a): Body text. Pure black
  is too harsh; this almost-black keeps the
  warmth.

The tokens give the agent what. The prose gives it why. Without the why, the agent has values but no instinct it can't make the right call when the file doesn't explicitly cover the situation.

What this changes

A DESIGN.md is small. Maybe 200 lines of YAML and prose. The effect is disproportionate.

How you use it

1. 01

   Step 01

   Extract

   Paste any public URL on the home page. We crawl the live site, read its colors, typography, spacing, and component patterns, and write a DESIGN.md from what's actually shipping. Try Stripe. Try Linear. Try a competitor.

2. 02

   Step 02

   Drop it in your repo

   Save the file as DESIGN.md at the root of your project, next to README.md and AGENTS.md. Commit it. Treat it like code.

3. 03

   Step 03

   Tell your agent

   "Read DESIGN.md before you write any UI." That's the entire instruction. From this point on, every component the agent generates uses your tokens and follows your rules.

The mental model

You used to hire a designer and say "you know Linear, right? Give me that feel." It worked because the designer already carried Linear in their head. That shared context sat underneath every conversation.

An AI agent doesn't have that shared context.

DESIGN.md writes the context into a file and drops it into the agent's head. The reference pool you spent years building with a designer, you set up with an agent in two minutes.

What it isn't

Not a theme.There's no code inside. You or your agent still build the components. The file describes what a button looks like; the agent still has to write the JSX.

Not a brand PDF.Brand guidelines are written for humans and use phrases like "approachable yet premium." An agent can't act on that. DESIGN.md has to be specific enough to drive the next decision exact hex values, exact font sizes.

Not a Figma export. A tokens.json export tells you the values but skips the reasoning. DESIGN.md is structured so the prose travels with the tokens.

Not static.When the brand evolves, the file evolves. It's versioned, reviewed, merged. It behaves like code, because it is.