DesignMD
Discover
The format

What is DESIGN.md?

DESIGN.md is a plain-Markdown file that captures a product's design system (colors, typography, spacing, and components) in one portable document that both people and AI coding agents can read.

The format comes from Google Stitch

DESIGN.md is the design-system format introduced by Google Stitch, Google's AI design tool. Read the official spec on the Stitch docs

The idea

A design system in a single file

Design decisions usually live scattered across Figma files, token JSON, and screenshots. DESIGN.md gathers them into one Markdown file that sits next to your code.

Because it is just Markdown, designers, developers, and AI assistants can all read it, and it versions cleanly in git, so your design system evolves like any other part of the codebase.

Contents

What goes inside a DESIGN.md?

Colors

The palette with hex values and semantic roles such as primary, background, text, and borders.

Typography

Font families, the type scale, weights, and line heights.

Spacing & shape

The spacing scale, border radii, and border widths.

Elevation

Shadow and effect definitions for each elevation level.

Components

Common patterns with their variants and states.

Principles

Plain-language guidance so the intent behind the tokens is not lost.

Why it matters

Why teams use it

AI-native

LLMs read Markdown well. Drop a DESIGN.md into your agent's context and it builds UI with your exact tokens instead of guessing.

Version-controlled

It is plain text, so it diffs, reviews, and merges alongside your code in git.

Tool-agnostic

Works with Claude Code, Cursor, Copilot, or any assistant that reads files in your project.

Human-readable

One source of truth that designers and engineers can both read at a glance.

How to use it

From file to UI in three steps

  1. 1
    Get a DESIGN.md

    Generate one from any website with DesignMD, or write your own.

  2. 2
    Drop it in your project

    Put it in the repo root, or reference it from CLAUDE.md or .cursor/rules.

  3. 3
    Build on-brand

    Ask your AI agent to build UI following the spec, and it uses your real tokens.

Example

What a DESIGN.md looks like

DESIGN.md
# Acme Design System

## Colors
- Primary: #2563EB (buttons, links, focus rings)
- Background: #0A0A0B
- Text: #F4F4F5, muted #A1A1AA
- Border: #26262C

## Typography
- Family: Inter, sans-serif
- Scale: 12 / 14 / 16 / 20 / 28 / 40 px
- Weights: 400 body, 600 headings

## Spacing & shape
- Scale: 4 / 8 / 12 / 16 / 24 / 32 px
- Radius: sm 6px, md 10px, lg 16px

## Elevation
- shadow/md: 0 4px 10px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.4)

## Components
- Button: solid primary bg, white text, radius md, 8px/16px padding
- Card: bg #141417, 1px border, radius lg

Turn any website into a DESIGN.md

DesignMD reads the real design system behind any live site and writes a ready-to-use DESIGN.md with its colors, type, spacing, shadows, and components in seconds.

  • Exact tokens from any URL
  • Optional HTML preview and Figma import
  • No card required to start
Generate one CLI reference