Learn more
How Design Extractor works
Paste a URL, get a structured design spec. Colors, typography, spacing, and tokens in 4 output formats, from markdown you can drop in a repo to code you can paste into a project.
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.
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.
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 formats
Each extraction produces 4 output formats: 1 markdown and 3 code.
Markdown
- DESIGN.md . The canonical DESIGN.md format was introduced by Google Stitch. Drop it into any repo for AI agents to consume.
Code
- Tailwind v4 .
@theme {}block, paste directly into a Tailwind v4 project. - CSS Variables .
:root {}block with standard custom properties. - Design Tokens (DTCG) . W3C standard format for Figma, Style Dictionary, and Tokens Studio.
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.