Design Extractor

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.