Skip to content
New — DESIGN.md generation

On-brand UI for every AI coding agent.

Every ExtractVibe extraction now generates a DESIGN.md file. Drop it into your project root and Cursor, Claude Code, v0, Lovable, and Bolt instantly know how to build UI that matches the brand.

Generate DESIGN.mdView spec

What is DESIGN.md?

Open-sourced by Google Labs, DESIGN.md is to design what AGENTS.md is to dev workflow — a single Markdown file at the project root that AI coding agents read to understand the brand.

Frontmatter holds machine-readable design tokens (colors, typography, spacing, components). Markdown sections give agents the context they need: do's and don'ts, voice, sample copy, comparable brands.

Tools that read it include Cursor, Claude Code, Copilot, Windsurf, Lovable, v0, Bolt, and Google Stitch. The official CLI exports straight to W3C Design Tokens or Tailwind theme config.

Spec
github.com/google-labs-code/design.md
Open-sourced April 2026 · 8.4k+ stars · version alpha
Community
github.com/VoltAgent/awesome-design-md
65k+ stars · curated examples from Vercel, Linear, Stripe, Notion, Figma
Schema source
W3C Design Tokens (DTCG)
Frontmatter exports cleanly to tokens.json and Tailwind theme.

Live preview

A real DESIGN.md generated by ExtractVibe — ready to drop into a project.

Full file
linear.app / DESIGN.md
Lint OK
<!-- Generated by ExtractVibe -->
---
version: alpha
name: "Linear"
description: "The system for product development."
colors:
  primary: "#5e6ad2"
  surface: "#f5f5f6"
  on-surface: "#101012"
  border: "#1f1f25"
  primary-dark: "#7e85e3"
  surface-dark: "#0e0e10"
typography:
  display-lg:
    fontFamily: "Inter Variable"
    fontSize: "56px"
    fontWeight: "590"
    lineHeight: "1.1"
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Inter Variable"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "1.5"
rounded:
  sm: "4px"
  md: "8px"
  full: "9999px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    rounded: "{rounded.md}"
    padding: "8px 16px"
---

# Linear — Design System

## Overview

Linear projects a sophisticated, high-performance, and forward-thinking image,
emphasizing efficiency and cutting-edge technology. The aesthetic is clean,
modern, and understated, designed for serious product development teams.

**Key Characteristics:**
- Vibe — modern, efficient, AI-driven, performance, sleek
- Comparable to — Notion, Figma, Vercel
- Design era — contemporary

## Colors

The palette is restrained and high-contrast, signaling precision and focus. A
single accent (#5e6ad2) carries the entire interface; everything else is
grayscale.
…

Picked up automatically.

DESIGN.md is the standard. Drop it at your project root once and every AI tool you use reads it.

Claude Code
Anthropic CLI
Cursor
AI IDE
GitHub Copilot
VS Code agent
Windsurf
Codeium IDE
Google Stitch
Native consumer
Lovable
App generator
v0
Vercel
Bolt
StackBlitz
Magic Patterns
UI generator

Generate one in 30 seconds.

  1. 01

    Extract

    Run an extraction on any URL — through the dashboard, API, or LLM agent bootstrap.
    curl -X POST https://extractvibe.com/api/extract \
  -H "x-api-key: ev_..." \
  -H "Content-Type: application/json" \
  -d '{"url": "https://stripe.com"}'
  2. 02

    Get the DESIGN.md

    The file is generated automatically alongside the JSON kit and cached at the public URL.
    curl https://extractvibe.com/api/brand/stripe.com/design.md > DESIGN.md
  3. 03

    Drop it in

    Save as DESIGN.md at your project root, sibling to README.md. Every supported agent picks it up automatically.
  4. 04

    Validate (optional)

    Use the official Google CLI to lint and export tokens.
    npx @google/design.md lint DESIGN.md
npx @google/design.md export --format dtcg DESIGN.md > tokens.json
npx @google/design.md export --format tailwind DESIGN.md

What ExtractVibe puts in your DESIGN.md

Frontmatter tokens
Hex colors, type scale, rounded, spacing, components — exportable to W3C Design Tokens and Tailwind theme.
Overview
LLM-generated atmosphere prose: archetype, comparable brands, emotional register.
Colors
Light + dark mode tables with semantic roles. Dark variants suffixed with -dark.
Typography
Family list (with weights + source) and full type scale (size / weight / line-height / letter-spacing).
Layout & Shapes
Base unit, container max-width, grid, border-radius scale.
Elevation & Depth
All detected shadow stacks and gradients.
Components
Button styles per variant — background, text, radius, padding, font.
Do's and Don'ts
Inferred + (when discovered) extracted from the brand's own guidelines page.
Voice
Tone spectrum (1–10 axes), copywriting style, sample copy from the actual site.
Logos
Every detected logo variant with format, URL, and confidence.
Sources
Permalink to brand kit, official guidelines URL, screenshot, raw JSON.
Lint-clean
Validated against the Google spec inline. Errors caught before the file ships.

Ship on-brand UI from day one.

Every extraction generates a DESIGN.md. Free tier includes 50 extractions per month.

Get started freeRead the docs