The gist

design-extract is a CLI and browser extension developed by Manavarya09 that crawls live websites to deeply analyze and extract their full design language. It solves the problem of reverse-engineering complex visual and functional design systems, providing detailed outputs for developers, designers, and AI agents. The tool identifies components, motion, voice, and responsive behaviors.

What it does

Crawls websites to extract computed styles, layout, motion, and brand voice.
Generates design tokens, framework configs, and theme files for various platforms.
Captures responsive behaviors, interaction states, and WCAG accessibility scores.
Audits local design token files and identifies drift between codebases and live sites.
Prepares AI-optimized outputs, including semantic page intent and prompt packs for LLMs.
Compares design patterns across multiple websites or visually diffs two URLs.

How it works

Users invoke design-extract via its command-line interface, pointing it at a target URL. The tool uses a headless browser to crawl the website, extracting design elements, layout, and behaviors from the live DOM. It then processes this data into over 17 structured output files, including design tokens, framework themes, and AI-ready markdown. It is delivered as an open-source CLI utility or a Chrome extension.

Best for

This tool is best for developers and design system engineers who need to thoroughly extract, analyze, and codify the design language of any live website. It's ideal for auditing design quality, identifying inconsistencies, or generating production-ready design system assets.

Watch out for

Activating the advanced "--smart" mode for LLM-enhanced analysis requires providing your own OpenAI or Anthropic API key, although core functionality operates without it.