Built for AI coding agents

Get a DESIGN.md
from any website

Paste a URL to extract a design system. Get a DESIGN.md plus Tailwind v4, and design tokens for your AI agent. Learn more

Featured

Browse all

Travel & Transportation

Airbnb

Airbnb's design system centers on a warm, accessible interface driven by the iconic Rausch red (#ff385c) as the primary action color. The system employs a generous rounded-corner language (20px default, 32px for buttons) paired with a subtle multi-layer shadow elevation system that creates depth without visual heaviness. Typography is anchored in Airbnb Cereal VF, a custom sans-serif optimized for readability across body, heading, and label roles. The layout favors information-dense card grids with consistent 4–12px spacing rhythms, supporting rapid scanning and discovery of travel accommodations. Color palette is restrained: dark text (#222222), secondary grays (#6a6a6a), and minimal accent usage create a clean, trust-focused aesthetic that prioritizes content (property images) over decoration.

Shopping

IKEA

IKEA's global homepage uses a tightly controlled two-color brand identity — IKEA Yellow (#ffdb00) and IKEA Blue (#0058a3) — against an off-white (#fffefb) base. The entire typographic system is built on a single custom typeface, Noto IKEA, with weight (400 vs 700) and size (16px body up to 51px display) doing all the hierarchical work. Elevation is entirely flat — no shadows anywhere in the CSSOM. Layout follows a max-width 90rem container with 1.5rem desktop gutters and a structured two-column hero split. The design is bold, high-contrast, and unmistakably brand-driven.

Developer Tools

Linear

Linear is a product development system designed for teams and AI-era workflows. The design employs a dark-first interface with minimal rounded corners (2–6px), a strict typographic hierarchy using Inter Variable and Berkeley Mono, and a semantic color system that distinguishes status, priority, and interaction states. The layout prioritizes information density through a sidebar-driven navigation pattern and uses subtle shadows and border treatments to establish depth without visual clutter. The color palette is anchored by neutral grays (#f7f8f8, #08090a, #62666d) with accent colors for status indicators (success, warning, error, info) and a brand-forward accent in blue (#5e6ad2, #6366f1).

Lovable

Lovable is an AI app builder with a light-theme design system centered on a vibrant gradient hero (blue-to-pink-to-orange), minimal rounded corners (8–12px), and a carefully curated semantic color palette. The design emphasizes high contrast between dark text (#1c1c1c) and light surfaces (#fcfbf8–#f7f4ed), with a single brand accent (#1f55f1 blue) for interactive elements. Typography relies on Camera Plain Variable with weight-driven hierarchy (400 for body, 600 for headings) and negative letter-spacing on larger sizes. The system prioritizes accessibility through WCAG-compliant contrast ratios and a structured spacing scale (4–12px base increments).

Business

Shopify

Shopify's marketing homepage uses a near-black (#02090a) hero section with a full-bleed background video, large display typography in NeueHaasGrotesk, and a signature mint-green (#36f4a4) accent against dark surfaces. Navigation sits in a charcoal-black bar. CTAs use fully-rounded pill buttons — one white-filled, one white-outlined — creating a clear primary/secondary hierarchy. The overall system is high-contrast, commerce-forward, and typographically confident, with generous spacing and a restrained radius vocabulary anchored at 12px for cards and 9999px for buttons.

Finance

Stripe

Stripe's marketing homepage uses a tightly controlled design system (HDS — Stripe Design System) built around the variable font "sohne-var" at light weights (300–400), a deep navy-to-indigo brand palette anchored by #533afd (Stripe Indigo), and a signature full-bleed spectral gradient hero. Components are low-radius (4–6px), flat-to-minimal-shadow, and structured around an 8px base spacing grid. The overall tone is authoritative yet approachable — financial infrastructure communicated through confident typography and restrained color use.

Works with your agent

Drop DESIGN.md into your repo. Your agent does the rest.

DESIGN.md pairs YAML design tokens with a markdown rationale, so any AI coding agent can read it. No plugin, no SDK, no integration step.

Extract any site

Paste a URL. Get a DESIGN.md with colors, typography, spacing, shapes, components, and brand rationale.

Save it anywhere

Drop DESIGN.md wherever you like, repo root, docs folder, a Notion page. The path doesn't matter.

Point your agent at it

Tell your AI coding agent to use DESIGN.md as the style guide. That's it.

Works with

Claude
Cursor
GitHub Copilot
Windsurf
Codex
Any other LLM

Coming soon

Something big is brewing.

A major accuracy upgrade is coming, along with new capabilities we can't wait to share. Be the first to know.

FAQ

Common questions about Design Extractor

Short answers to the main questions developers ask before extracting a website's design into a DESIGN.md.

What is a DESIGN.md?

A DESIGN.md is a plain-text design system document that AI coding agents read to generate consistent UI. It is the design counterpart to AGENTS.md: humans and agents can both read it, edit it, and enforce it. Under the hood it has two layers. YAML front matter holds machine-readable design tokens like colors, typography, and spacing. The markdown body explains the design rationale.

What's inside a DESIGN.md?

A DESIGN.md usually includes eight canonical sections in order: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components, and Do's and Don'ts. The YAML front matter encodes the exact token values. The markdown body explains how and why to apply them. Sections can be omitted if they are not relevant, and extra domain-specific sections can be added.

How do I get a DESIGN.md from a URL?

Paste any public website URL into Design Extractor and click extract. In a few seconds you get a DESIGN.md you can copy, plus Tailwind v4, CSS variables, and DTCG design tokens. No signup. Drop the DESIGN.md into your repo and your AI agent reads it as a style reference for Claude, Cursor, Copilot, or Stitch.

Which AI coding tools can use DESIGN.md?

Any AI coding tool that reads markdown files from your project directory can use DESIGN.md. That includes Claude Code, Cursor, GitHub Copilot, and other coding assistants with file access. Drop the DESIGN.md into your project root or a docs folder and reference it in your prompt.

What websites can I extract?

Any publicly accessible website. Design Extractor analyzes the live page as rendered in a browser. It works with static sites, SPAs, and server-rendered pages. The site must be reachable via a standard HTTP/HTTPS URL.

Get a DESIGN.mdfrom any website