Learn more

How Design Extractor works

Paste a URL, get a structured design spec. Colors, typography, spacing, and components in a DESIGN.md you can drop into a repo.

What is a DESIGN.md?

A DESIGN.md is a plain-text design system document that both humans and AI agents can read. Think of it as the design counterpart to AGENTS.md. Where AGENTS.md tells agents how to build the project, DESIGN.md tells them how it should look and feel.

Under the hood, every DESIGN.md has two layers: YAML front matter with machine-readable design tokens, and a markdown body that explains the design rationale. Tokens give agents precise values. Prose tells them why those values exist.

Read the full DESIGN.md specification ->

Canonical sections

Overview
Colors
Typography
Layout
Elevation & Depth
Shapes
Components
Do's and Don'ts

How it works

Input
Paste a public URL (e.g., design-extractor.com).
Extraction
The system crawls the page, analyzes its visual properties: colors, typography, spacing, component patterns, and overall design language.
3
Output
Structured design specs in your choice of format, containing:
- Overview and brand style guidance
- Color palettes with named tokens
- Typography levels and font properties
- Layout, spacing, and shape tokens
- Component guidance and token references
- Do's and don'ts that act as design guardrails

Output

Each extraction produces one DESIGN.md.

Markdown

DESIGN.md . The canonical DESIGN.md format was introduced by Google Stitch. Drop it into any repo for AI agents to consume.

Chrome extension

Extract the page in your current tab without coming back here. The extension reuses your site session and spends the same credits. Read how the extension works ->

The key insight

AI agents produce better design output when given both precise tokens and human-readable rationale. The YAML front matter gives exact values. The markdown body explains how those values should be used in practice.