design-extract

DESIGNLANG

Reverse-engineer any website's complete design system in one command.

---

designlang crawls any website with a headless browser, extracts every computed style from the live DOM, and generates 8 output files — including an AI-optimized markdown file, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS custom properties.

But unlike every other tool out there, it also extracts layout patterns (grids, flexbox, containers), captures responsive behavior across 4 breakpoints, records interaction states (hover, focus, active), scores WCAG accessibility, and lets you compare multiple brands or sync live sites to local tokens.

Quick Start

npx designlang https://stripe.com

Get everything at once:

npx designlang https://stripe.com --full

What You Get (8 Files)

File	What it is
*-design-language.md	AI-optimized markdown — feed it to any LLM to recreate the design
*-preview.html	Visual report with swatches, type scale, shadows, a11y score
*-design-tokens.json	W3C Design Tokens format
*-tailwind.config.js	Drop-in Tailwind CSS theme
*-variables.css	CSS custom properties
*-figma-variables.json	Figma Variables import (with dark mode support)
*-theme.js	React/CSS-in-JS theme (Chakra, Stitches, Vanilla Extract)
*-shadcn-theme.css	shadcn/ui globals.css variables

The markdown output has 19 sections: Color Palette, Typography, Spacing, Border Radii, Box Shadows, CSS Custom Properties, Breakpoints, Transitions & Animations, Component Patterns (with full CSS snippets), Layout System, Responsive Design, Interaction States, Accessibility (WCAG 2.1), Gradients, Z-Index Map, SVG Icons, Font Files, Image Style Patterns, and Quick Start.

Install

# Use directly (no install needed)
npx designlang https://example.com

# Or install globally
npm install -g designlang

# As an agent skill (Claude Code, Cursor, Codex, 40+ agents)
npx skills add Manavarya09/design-extract

What Makes This Different

Most design extraction tools give you colors and fonts. That's it. designlang fills 5 market gaps that no other tool addresses:

1. Layout System Extraction

Extracts the structural skeleton — grid column patterns, flex direction usage, container widths, gap values, and justify/align patterns.

Layout: 55 grids, 492 flex containers

Every other tool gives you the paint. designlang gives you the architecture.

2. Responsive Multi-Breakpoint Capture

Crawls the site at 4 viewports (mobile, tablet, desktop, wide) and maps exactly what changes:

designlang https://vercel.com --responsive

Responsive: 4 viewports, 3 breakpoint changes
  375px → 768px: Nav visibility hidden → visible, Hamburger shown → hidden
  768px → 1280px: Max grid columns 1 → 3, H1 size 32px → 48px

No other tool captures how the design adapts, just how it looks at one size.

3. Interaction State Capture

Programmatically hovers and focuses interactive elements, capturing the actual style transitions:

designlang https://stripe.com --interactions

/* Button Hover */
background-color: rgb(83, 58, 253) → rgb(67, 47, 202);
box-shadow: none → 0 4px 12px rgba(83, 58, 253, 0.4);

/* Input Focus */
border-color: rgb(200, 200, 200) → rgb(83, 58, 253);
outline: none → 2px solid rgb(83, 58, 253);

4. Live Site Sync

Treat the deployed site as your source of truth, not Figma:

designlang sync https://stripe.com --out ./src/tokens

Detects design changes and auto-updates your local design-tokens.json, tailwind.config.js, and variables.css.

5. Multi-Brand Comparison

Compare N brands side-by-side:

designlang brands stripe.com vercel.com github.com linear.app

Generates a matrix with color overlap analysis, typography comparison, spacing systems, and accessibility scores. Outputs both brands.md and brands.html.

6. Clone Command

Generate a working Next.js app with the extracted design applied: