Web Design Extractor

Reverse-Engineer Any Website's UI

The Web Design Extractor is a specialized developer tool that deconstructs the visual identity of any webpage into a structured, reusable design system. It solves the "blank page" problem for front-end developers by capturing the exact design tokens—colors, typography, spacing, and component styles—used by well-designed sites.

How it Works

Using a sophisticated multi-stage JavaScript injection process, the skill meticulously queries the browser's computed styles and CSS variables. It handles the technical limitations of modern browser automation by splitting extraction into discrete chunks, ensuring high-fidelity data capture even on complex, single-page applications (SPAs) or sites using modern frameworks like Tailwind v4 and shadcn/ui.

• Full Token Extraction: Captures CSS variables, hex codes, font families, line heights, and border-radii.
• Component Mapping: Automatically identifies button and card styles to create semantic component tokens.
• Visual Reference: Generates a high-resolution, full-page screenshot paired with the extracted data.
• Ready-to-Use Output: Produces a DESIGN.md file (Google's design specification format) with YAML frontmatter, perfect for seeding new projects or documentation.

Why Developers Need This

Instead of manually inspecting elements one by one, this skill automates the entire design audit process. It doesn't just "guess" colors; it extracts the actual values from the DOM, deduplicates them by usage frequency, and maps them to a standardized design system architecture.