# Design Extractor

> Extract any website's design system into a structured DESIGN.md with colors, typography, spacing, and tokens for use by AI coding agents.

Design Extractor is a web tool that crawls any public URL and produces a structured DESIGN.md file containing colors, typography, spacing, and design tokens. It is purpose-built for AI coding agents like Claude Code, Cursor, and GitHub Copilot, giving them both machine-readable token values and human-readable design rationale. The output follows the canonical DESIGN.md specification and is available in four formats: Markdown, Tailwind v4, CSS Variables, and W3C Design Tokens (DTCG).

- **DESIGN.md generation** — *Paste any public URL and receive a structured design spec with eight canonical sections: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, and Do's and Don'ts.*
- **YAML front matter tokens** — *Machine-readable design tokens are embedded in YAML front matter so AI agents can parse exact color, spacing, and typography values programmatically.*
- **Multiple output formats** — *Each extraction produces four formats: DESIGN.md (Markdown), Tailwind v4 `@theme {}` block, CSS Variables `:root {}` block, and W3C DTCG Design Tokens for Figma and Style Dictionary.*
- **AI agent compatibility** — *Drop the DESIGN.md into your project root or docs folder and reference it in prompts for Claude Code, Cursor, GitHub Copilot, or any file-aware coding assistant.*
- **Broad site support** — *Works with static sites, SPAs, and server-rendered pages — any publicly accessible HTTP/HTTPS URL rendered as a live browser page.*
- **Gallery of extractions** — *Browse pre-extracted design systems from popular sites like Airbnb, Linear, Shopify, Stripe, and Supabase to see example outputs before running your own.*
- **Free tier included** — *New users receive 3 free extractions to try the tool without signing up for a paid plan.*

## Features
- Extract design systems from any public URL
- Generate DESIGN.md with YAML front matter tokens
- Output in Tailwind v4, CSS Variables, and W3C DTCG formats
- Eight canonical design sections including Colors, Typography, Layout, and Components
- Gallery of pre-extracted popular websites
- 3 free extractions for new users
- Compatible with Claude Code, Cursor, and GitHub Copilot

## Integrations
Claude Code, Cursor, GitHub Copilot, Tailwind v4, Figma, Style Dictionary, Tokens Studio

## Platforms
WEB, API

## Pricing
Freemium — Free tier available with paid upgrades

## Version
0.1.0

## Links
- Website: https://www.design-extractor.com
- Documentation: https://www.design-extractor.com/docs
- EveryDev.ai: https://www.everydev.ai/tools/design-extractor