Reverse-Engineer Any Web DesignGet a Production-Grade DESIGN.md from Any Website
Paste a URL to extract a complete design system. Get a verified DESIGN.md for Claude, Cursor, and AI coding agents.
Featured
Verified design specifications ready for AI coding agents
Airbnb
11,404 lines verifiedAirbnb's design system is built around a single proprietary variable font (Airbnb Cereal VF), a near-monochrome neutral palette anchored by deep charcoal (#222222) and light grays, with the brand's signature 'Rausch' coral-pink (#ff385c) reserved exclusively for primary CTAs and the logo. The layout is a responsive photo-card grid with generous image-to-text ratios, soft 20px rounded corners on cards, and a multi-layer ambient shadow system.
IKEA
2,515 lines verifiedIKEA's global homepage uses a bold, flat design system anchored by the iconic IKEA Yellow (#ffdb00) as the primary action surface and IKEA Blue (#0058a3) as the brand logo accent. The entire typographic system is built on a single custom typeface (Noto IKEA) spanning weights 400 and 700 across a tightly defined scale from 14px body text to 51px display headings.
Notion
2,515 lines verifiedNotion's marketing homepage pairs a deep navy (#02093a) hero section with a light (#f6f5f4) body, using a custom typeface (NotionInter) across all text roles. The design employs a 12-column grid with 28px gutters, a dual-radius language (8px for cards, 9999px for pills), and a multi-layer progressive shadow system for floating UI elements.
Railway
2,515 lines verifiedRailway's design system is a dark-first developer platform UI anchored in deep near-black navy surfaces (#13111c, #0b0b0f), high-contrast off-white text (#f7f7f8), and a distinctive purple brand accent (#853bce / #553f83). The hero uses IBM Plex Serif for editorial weight, while Inter handles all UI copy and JetBrains Mono serves code contexts.
Shopify
2,515 lines verifiedShopify's marketing homepage uses a dramatic full-bleed video hero with a near-black (#02090a) background that contrasts sharply with the white navigation bar above. The primary brand accent is a vivid mint green (#36f4a4) used sparingly for highlights and interactive states. Typography is split between NeueHaasGrotesk and Inter-Variable.
Stripe
2,515 lines verifiedStripe's marketing homepage uses a tightly controlled design system (HDS: Stripe Design System) built around the variable font 'sohne-var' at light weights (300 to 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 to 6px) with an 8px base spacing grid.
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, or 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.
Autonomous Web Design Telemetry Engine
Zero browser extensions, zero plugins, and zero CLI installation required. Paste any public website URL to reverse-engineer its computed design system in real-time.
Real DOM Inspection & Computed Styles
Our backend renders the target page in a dedicated headless Chromium viewport. It crawls external stylesheets, analyzes CSS custom properties, detects custom and variable fonts, evaluates contrast ratios, and measures real element geometry.
- Zero client installation: Runs 100% in your browser on demand
- Extracts computed font ladders, tracking, and variable font weights
- Samples multi-step surface ladders, card hairlines, and focus rings
- Calculates dynamic evidence-based confidence metrics from DOM telemetry
Instant ZIP Download & AI Agent Specs
Every extraction generates an exhaustive DESIGN.md with verified HTML/CSS component recipes, ready to feed directly to Claude Code, Cursor, Codex, or Copilot for zero-hallucination UI engineering.
curl -X POST http://localhost:3000/api/extract \
-H "Content-Type: application/json" \
-d '{"url": "https://airbnb.com"}'Common questions about our Design Extractor
Clear answers about how our autonomous reverse-engineering engine works, what it extracts, and what you get.
Our tool is an autonomous web design reverse engineering engine. Given any public website URL, our serverless Headless Chromium crawler visits the live page, analyzes the rendered DOM and computed CSS AST styles, and produces an exhaustive, production-grade DESIGN.md document complete with YAML token frontmatter and standalone HTML/CSS component recipes.
Get a DESIGN.md
for the site you need
Paste any public URL. You get its colors, typography, spacing and components in one file your AI agent can follow.