design-extract

Quick Start

npx designlang https://stripe.com

Get everything at once:

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

What You Get (11+ 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 | | *-motion-tokens.json | (v9) Motion tokens — durations, easings, springs, scroll-linked flag | | *-anatomy.tsx | (v9) Typed React stubs for every detected component + variants | | *-voice.json | (v9) Brand voice fingerprint — tone, CTA verbs, heading style |

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.

In v7 a companion *-mcp.json file is also written alongside the 8 outputs so that designlang mcp can serve regions, components, and health data from disk on later invocations. Opting into --platforms <csv> additively emits ios/, android/, flutter/, and/or wordpress-theme/ directories in the output folder, and --emit-agent-rules adds a .cursor/, .claude/, CLAUDE.md.fragment, and agents.md set.

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:

designlang clone https://stripe.com
cd cloned-design && npm install && npm run dev

One command → a running app with the site's colors, fonts, spacing, and component patterns.

7. Design System Scoring

Rate any site's design quality across 7 categories:

designlang score https://vercel.com

  68/100  Grade: D

  Color Discipline     ██████████░░░░░░░░░░ 50
  Typography           ██████████████░░░░░░ 70
  Spacing System       ████████████████░░░░ 80
  Shadows              ██████████░░░░░░░░░░ 50
  Border Radii         ████████░░░░░░░░░░░░ 40
  Accessibility        ███████████████████░ 94
  Tokenization         ████████████████████ 100

8. Watch Mode

Monitor a site for design changes:

designlang watch https://stripe.com --interval 60

Checks hourly and alerts when colors, fonts, or accessibility scores change.

9. Apply Command (NEW in v5)

Extract a site's design and write tokens directly into your project — auto-detects your framework:

designlang apply https://stripe.com --dir ./my-app

Detects Tailwind, shadcn/ui, or plain CSS and writes to the right config files automatically.

10. Auth Extraction (NEW in v5)

Extract from authenticated or protected pages with cookies and custom headers:

designlang https://internal-app.com --cookie "session=abc123" --header "Authorization:Bearer token"

11. Gradient Extraction (NEW in v5)

Detects all CSS gradients — type (linear/radial/conic), direction, color stops, and classifies them as subtle, brand, bold, or complex.

12. Z-Index Map (NEW in v5)

Builds a layer hierarchy from all z-index values, groups them into layers (base, sticky, dropdown, modal, etc.), and flags z-index wars or excessive values (>9999).

13. SVG Icon Extraction (NEW in v5)

Finds and deduplicates all inline SVGs, classifies them by size and style (outline/solid/duotone), and extracts the icon color palette.

14. Font File Detection (NEW in v5)

Identifies every font source — Google Fonts, self-host