DesignExtract: Reverse-Engineer Any Website's Design System From a Single URL

DesignExtract (also called designlang) is a CLI tool that crawls any live website and extracts its complete design system. Point it at a URL, and it pulls colors, fonts, grid patterns, hover transitions, responsive breakpoints, and more. The output is ready to drop into a project: a Tailwind config, CSS variables, a shadcn/ui theme, and Figma variables.

What It Does

The tool uses a headless browser to crawl the live DOM. It does not just read the stylesheet. It extracts every computed style, including layout patterns (grids, flexbox, containers), responsive behavior across four breakpoints, interaction states (hover, focus, active), and WCAG accessibility scores.

The DesignExtract GitHub repo README showing the DESIGNLANG heading, Quick Start command, and description of how it crawls the live DOM to generate 8 output files

The output is eight files:

*-design-language.md for feeding to any LLM to recreate the design
*-preview.html with visual swatches, type scale, and shadows
*-design-tokens.json in W3C Design Tokens format
*-tailwind.config.js as a drop-in Tailwind CSS theme
*-variables.css for CSS custom properties
*-figma-variables.json with dark mode support
*-theme.js for React/CSS-in-JS frameworks (Chakra, Stitches, Vanilla Extract)
*-shadcn-theme.css for shadcn/ui globals

Output file table showing all eight generated files with descriptions, and the markdown output's 19 sections listed below

Using It With Claude Code

Install the output as a Claude Code skill, then use a slash command like /extract-design stripe.com. Your agent builds a landing page matching that exact design system on the first try. The tool also supports dark mode extraction, authenticated pages (via cookies or headers), multi-page crawling, screenshots, and responsive analysis.

Full feature table showing all flags and commands: base extraction, layout system, accessibility, dark mode, auth pages, multi-page, screenshots, responsive, interactions, and clone

The Quick Start is a single command:

npx designlang https://stripe.com

Or use --full to get everything at once, including screenshots, responsive analysis, and interaction states.

Key Takeaways

DesignExtract reverse-engineers a full design system from any live website with one command
Output includes Tailwind config, CSS variables, shadcn/ui theme, Figma variables, and more
Pairs directly with Claude Code to let your agent build pages that match an existing design system

Resources

Manavarya09/design-extract -- GitHub repo for the tool (MIT license)