# Design Extractor

> Autonomous web design reverse-engineering suite that extracts computed CSS tokens, variable typography, color geometry, and production-ready DESIGN.md specifications from any live URL in seconds.

- Live Studio: https://designextractor.vercel.app/
- Proof & Telemetry Dashboard: https://designextractor.vercel.app/proof
- Canonical XML Sitemap: https://designextractor.vercel.app/sitemap.xml
- Full System Documentation: https://designextractor.vercel.app/llms-full.txt

## Primary Capabilities

- Autonomous Preloader Dismissal: Waits for full-screen curtains and percentage loaders (opacity < 0.05 or display: none) before capturing styles.
- Progressive Micro-Scroll Walk: Progressively navigates document height (0% -> 35% -> 65% -> 100%) to mount lazy images, Framer Motion whileInView elements, and GSAP ScrollTrigger timelines.
- Autonomous Interactive Click Engine: Safely clicks tabs, accordions, carousels, and pills inside a sandboxed session to uncover hidden panel states and height expansions.
- Multi-Thousand-Line DESIGN.md Engine: Synthesizes live computed CSSOM styles into structured YAML frontmatter, 10-domain architectural prose, and complete HTML/CSS component recipes.
- Evidence-Based Confidence Scoring: Measures score from 4 real DOM metrics (Components Match, Colors Covered, Text Styles Covered, Tokens Seen) with zero AI hallucination.
- 1-Click Design System ZIP Package: Bundles DESIGN.md, tokens.json, tokens.css, tailwind.config.js, and HTML component templates into an instant ZIP download.

## Supported Presets

- Linear (Near-black canvas #010102, lavender-blue accent #5e6ad2)
- Mobbin (Gallery-white canvas #ffffff, Saans variable font weights 652/456)
- Stripe (Deep navy ink #0d253d, crisp light surfaces, electric blurple #635bff)
- Airbnb (Clean hospitality aesthetic, coral accent #ff385c, 20px card radii)
- Notion (Document canvas #ffffff, editorial typography, structured palettes)
- IKEA (Functional Scandinavian minimalism, bold blue #0058a3 and yellow #ffdb00)

## WebMCP Tool Definitions

- Tool: `extract_design_system`
  - Parameter: `target_url` (string, required): The URL of the public website to reverse-engineer.
  - Returns: Complete design system specification with YAML frontmatter, tokens, and component recipes.