JSPM

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

But unlike every other tool out there, it also extracts layout patterns (grids, flexbox, containers), motion language (durations, easings, springs, scroll-linked animations), component anatomy (slots, variant × size × state matrices), brand voice (tone, CTA verbs, heading style), captures responsive behavior across 4 breakpoints, records interaction states (hover, focus, active), scores WCAG accessibility, lints your own token files, and lets you drift-check a codebase against a live site, visual-diff two URLs, compare multiple brands, or sync live sites to local tokens.

What's New in v9 — The Motion & Voice Release

• Motion Language — durations bucketed into semantic tokens (instant/xs/sm/md/lg/xl), easings classified into families (ease-out, spring-overshoot, steps), scroll-linked animation detection (animation-timeline, view-timeline-name), keyframe kind classification (slide / fade / reveal / rotate / scale / pulse), and a feel fingerprint — springy, responsive, smooth, mechanical, or mixed.
• Component Anatomy v2 — every component cluster is now an anatomy tree with slots (label, icon, badge, heading, media), variant × size × state matrices, and an emitted *-anatomy.tsx file of typed React stubs you can wire into your design system.
• Brand Voice — extracts tone (friendly / formal / technical / playful / neutral), pronoun posture (we→you / you-only / we-only / third-person), heading style (Title Case / Sentence case / all-lowercase), top CTA verbs, and a microcopy inventory. Feeds LLMs the voice, not just the paint.
• designlang lint — audit your own design-tokens.json (DTCG or flat) or variables.css for color sprawl, spacing-scale drift, radius/shadow bloat, and WCAG fg/bg contrast fails. Exits non-zero on errors — CI-ready.
• designlang drift — point at a live site, pass your local token file, and get a verdict: in-sync / minor-drift / notable-drift / major-drift. Integrates cleanly with the existing GitHub Action.
• designlang visual-diff — capture two URLs side-by-side and emit a single-file HTML report with component screenshots, file-size deltas, and changed color tokens. No heavy pixel-diff dependencies — runs in pure Node + Playwright.

Quick Start

npx designlang https://stripe.com

Get everything at once:

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

What You Get (11+ Files)

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-hosted, CDN, or system — and generates ready-to-use @font-face CSS.

15. Image Style Patterns (NEW in v5)

Detects image aspect ratios, border treatments, filters, and classifies patterns like avatar, hero, thumbnail, and gallery.

16. Dark Mode Diffing (NEW in v5)

Compare light and dark mode side-by-side — see exactly which colors change and which CSS variables are overridden:

designlang https://vercel.com --dark

17. MCP Server (NEW in v7)

One-command integration with any MCP-aware AI agent (Cursor, Claude Code, Windsurf, and more):

designlang mcp --output-dir ./design-extract-output

Launches a stdio JSON-RPC server that exposes the extracted design as MCP resources and tools.

Resources:

• designlang://tokens/primitive — primitive token layer
• designlang://tokens/semantic — semantic token layer (with DTCG alias references)
• designlang://regions — classified page regions (nav, hero, pricing, etc.)
• designlang://components — reusable component clusters with variants
• designlang://health — CSS health audit

Tools:

• search_tokens — query tokens by name, value, or type
• find_nearest_color — snap any color to the nearest palette token
• get_region — fetch a classified region by name
• get_component — fetch a component cluster by id
• list_failing_contrast_pairs — list every WCAG-failing fg/bg pair with remediation suggestions

18. Multi-Platform Output (NEW in v7)

Emit iOS SwiftUI, Android Compose, Flutter, and WordPress block-theme files in a single run, in addition to the default web output:

designlang https://stripe.com --platforms all

Resulting tree:

design-extract-output/
├── stripe-com-*.{md,json,css,js,html}    (default web output)
├── ios/
│   └── DesignTokens.swift
├── android/
│   ├── Theme.kt
│   ├── colors.xml
│   └── dimens.xml
├── flutter/
│   └── design_tokens.dart               (+ buildDesignlangTheme())
└── wordpress-theme/
    ├── theme.json
    ├── style.css
    ├── functions.php
    ├── index.php
    └── templates/index.html

Values for --platforms are any comma-separated subset of web,ios,android,flutter,wordpress,all. The flag is additive — the default web output is always emitted.

19. Agent Rules Emitter (NEW in v7)

Write agent-facing rule files generated from the resolved semantic tokens:

designlang https://stripe.com --emit-agent-rules

Writes:

• .cursor/rules/designlang.mdc — Cursor rule
• .claude/skills/designlang/SKILL.md — Claude Code skill
• CLAUDE.md.fragment — snippet you can paste into your project's CLAUDE.md
• agents.md — generic, vendor-neutral agent guidance

Each file is templated from the semantic layer of the extracted token set, so the agent sees real token names and values — not placeholders.

20. Stack + Tailwind Fingerprint (NEW in v7)

Automatic framework, utility-class, and analytics detection surfaced on design.stack:

• Framework: Next.js, Nuxt, Gatsby, Remix, Astro, Shopify, WordPress, Framer, Webflow, and more.
• Tailwind: when Tailwind is in use, records utility-class frequency so you see which utilities drive the design.
• Analytics: inventory of analytics scripts — GA4, Plausible, PostHog, Segment, Mixpanel, Amplitude, and friends.

21. CSS Health Audit (NEW in v7)

A dedicated audit pass surfaced on design.cssHealth:

• Specificity graph (distribution, hotspots)
• !important count
• Duplicate declarations
• Unused CSS via the Playwright Coverage API
• @keyframes catalog
• Vendor-prefix audit

Also contributes a cssHealth dimension to the overall design score.

22. Chrome Extension (NEW in v7.1)

A Manifest-v3 popup lives in chrome-extension/. One click on any tab opens designlang.manavaryasingh.com with the URL prefilled — no copy-paste, no context switch. There is also a Copy CLI button that puts npx designlang <url> in your clipboard.

• Permissions: activeTab only, plus host access to the hosted extractor.
• Install: toggle developer mode at chrome://extensions, click Load unpacked, pick the chrome-extension/ folder.
• Firefox + Edge work with the same MV3 manifest.

24. Motion Language (NEW in v9)

Extracts the full motion fingerprint, not just transition strings:

designlang https://linear.app
# emits linear-app-motion-tokens.json

Motion: feel = springy, 2 spring easings, scroll-linked = yes
Durations: instant (80ms), xs (150ms), sm (220ms), md (380ms)
Easings: ease-out (61%), spring-overshoot (18%), ease-in-out (21%)
Keyframes: fade-up (slide-y, used 18x), scale-in (reveal, used 4x)

25. Component Anatomy v2 (NEW in v9)

Every detected component becomes an anatomy tree with typed React stubs:

designlang https://stripe.com
# emits stripe-com-anatomy.tsx

export interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  leadingIcon?: React.ReactNode;
  badge?: React.ReactNode;
  children?: React.ReactNode;
}

26. Brand Voice (NEW in v9)

Pulls the voice alongside the visual:

designlang https://vercel.com
# emits vercel-com-voice.json + a Brand Voice section in the markdown

Tone: technical · Pronoun: we→you · Headings: Sentence case (tight)
Top CTA verbs: start (14), get (8), deploy (5), try (3)
Sample headings:
  > Develop. Preview. Ship.
  > The React framework for the web.

27. designlang lint — Token Quality Linter (NEW in v9)

Audit your own token file with the same rules the scorer runs against live sites:

designlang lint ./src/tokens/design-tokens.json

Score: 74/100  Grade: C   Tokens: 126

  colorDiscipline      ██████████████░░░░░░ 72
  spacingSystem        ████████████████░░░░ 84
  borderRadii          ████████████░░░░░░░░ 60
  shadows              ██████████░░░░░░░░░░ 50
  accessibility        █████████████████░░░ 88

  WARN  [color-sprawl] 3 near-duplicate color pair(s) within 8 RGB units
  ERROR [contrast-wcag-aa] 2 fg/bg pair(s) fail WCAG AA (4.5:1)

Exits non-zero on any error-level finding — drop into CI.

28. designlang drift — Codebase ↔ Live Site Sync Check (NEW in v9)

Point at a deployed site, pass your local tokens, and get a verdict:

designlang drift https://yourapp.com --tokens ./src/tokens.json --tolerance 8

Verdict: notable-drift (drift ratio: 0.24)

| token          | local    | nearest live       | Δ  |
|----------------|----------|--------------------|----|
| color.primary  | #4338CA  | #5B4CF5 (primary)  | 22 |
| color.border   | #D4D4D8  | #E5E5EA (surface)  | 18 |

Configurable --fail-on <level> for CI: minor-drift / notable-drift / major-drift.

29. designlang visual-diff — Two-URL Side-by-Side (NEW in v9)

Capture screenshots + token deltas for two URLs in a single self-contained HTML report:

designlang visual-diff https://staging.app.com https://app.com

Emits visual-diff-<timestamp>.html with embedded images (base64), file-size deltas, and a changed-color-tokens table. Nothing else to serve — just open the file.

30. Better Auth + Network Control (v7.1)

Extracting from authenticated, self-signed, or non-default environments now takes one flag:

• --cookie-file <path> — loads cookies from JSON array, Playwright storageState.json, or Netscape cookies.txt (browser extensions, curl exports). Merges cleanly with the existing --cookie name=value flag.
• --insecure — ignore HTTPS/SSL certificate errors for self-signed dev servers, corporate staging, or MITM tools.
• --user-agent <ua> — override the browser User-Agent string.

designlang https://staging.internal --cookie-file ./session.json --insecure

All Features

Full CLI Reference

designlang <url> [options]

Options:
  -o, --out <dir>         Output directory (default: ./design-extract-output)
  -n, --name <name>       Output file prefix (default: derived from URL)
  -w, --width <px>        Viewport width (default: 1280)
  --height <px>           Viewport height (default: 800)
  --wait <ms>             Wait after page load for SPAs (default: 0)
  --dark                  Also extract dark mode styles
  --depth <n>             Internal pages to crawl (default: 0)
  --screenshots           Capture component screenshots
  --responsive            Capture at multiple breakpoints
  --interactions          Capture hover/focus/active states
  --deep-interact         Auto-interact pass (scroll, menus, modals, accordions, hover CTAs)
  --full                  Enable all captures (implies --deep-interact)
  --cookie <cookies...>   Cookies for authenticated pages (name=value)
  --cookie-file <path>    Load cookies from JSON / storageState / Netscape cookies.txt
  --header <headers...>   Custom headers (name:value)
  --user-agent <ua>       Override the browser User-Agent string
  --insecure              Ignore HTTPS/SSL certificate errors (self-signed, dev, proxies)
  --selector <css>        Only extract from elements matching this CSS selector (e.g. ".pricing-card")
  --system-chrome         Use the system Chrome install instead of the bundled Chromium (skips 150MB download)
  --json                  Print full extraction as JSON to stdout (for piping into other tools)
  --framework <type>      Only generate specific theme (react, shadcn)
  --platforms <csv>       Additional platforms: web,ios,android,flutter,wordpress,all (additive)
  --emit-agent-rules      Emit Cursor / Claude Code / CLAUDE.md / agents.md rule files
  --tokens-legacy         Emit pre-v7 flat design-tokens.json shape (backward compat)
  --no-history            Skip saving to history
  --verbose               Detailed progress output

Commands:
  apply <url>                       Extract and apply design directly to your project
  clone <url>                       Generate a working Next.js starter from extracted design
  score <url>                       Rate design quality (7 categories, A-F, bar chart)
  watch <url>                       Monitor for design changes on interval
  diff <urlA> <urlB>                Compare two sites' design languages
  brands <urls...>                  Multi-brand comparison matrix
  sync <url>                        Sync local tokens with live site
  history <url>                     View design change history
  mcp                               Launch stdio MCP server (--output-dir <dir>)
  lint <file>                       (v9) Audit a local token file (.json/.css) — CI-ready
  drift <url> --tokens <file>       (v9) Check local tokens for drift against a live site
  visual-diff <before> <after>      (v9) Side-by-side HTML diff of two URLs

Example Output

Running designlang https://vercel.com --full:

  designlang
  https://vercel.com

  Output files:
  ✓ vercel-com-design-language.md (32.6KB)
  ✓ vercel-com-design-tokens.json (5.6KB)
  ✓ vercel-com-tailwind.config.js (3.4KB)
  ✓ vercel-com-variables.css (18.6KB)
  ✓ vercel-com-preview.html (31.8KB)
  ✓ vercel-com-figma-variables.json (12.4KB)
  ✓ vercel-com-theme.js (1.4KB)
  ✓ vercel-com-shadcn-theme.css (477B)
  ✓ screenshots/button.png
  ✓ screenshots/card.png
  ✓ screenshots/nav.png
  ✓ screenshots/hero.png
  ✓ screenshots/full-page.png

  Summary:
  Colors: 27 unique colors
  Fonts: Geist, Geist Mono
  Spacing: 18 values (base: 2px)
  Shadows: 11 unique shadows
  Radii: 10 unique values
  Breakpoints: 45 breakpoints
  Components: 11 types detected (with CSS snippets)
  CSS Vars: 407 custom properties
  Layout: 55 grids, 492 flex containers
  Gradients: 4 unique gradients
  Z-Index: 8 layers mapped
  Icons: 23 unique SVGs
  Font Files: 4 font sources detected
  Images: 6 style patterns
  Responsive: 4 viewports, 3 breakpoint changes
  Interactions: 8 state changes captured
  A11y: 94% WCAG score (7 failing pairs)
  Design Score: 68/100 (D) — 4 issues

How It Works

1. Crawl — Launches headless Chromium via Playwright, waits for network idle and fonts
2. Extract — Single page.evaluate() walks up to 5,000 DOM elements collecting 25+ computed style properties, layout data, inline SVGs, font sources, and image metadata
3. Process — 17 extractor modules parse, deduplicate, cluster, and classify the raw data (including gradients, z-index layers, icons, fonts, and image patterns)
4. Format — 8 formatter modules generate output files
5. Score — Accessibility extractor calculates WCAG contrast ratios for all color pairs
6. Capture — Optional: screenshots, responsive viewport crawling, interaction state recording

Install Everywhere

designlang ships surfaces beyond the CLI:

Agent Skill

Works with Claude Code, Cursor, Codex, and 40+ AI coding agents via the skills ecosystem:

npx skills add Manavarya09/design-extract

In Claude Code, use /extract-design <url>.

Website

design-extract-beta.vercel.app — the brutalist product page.

Contributing

See CONTRIBUTING.md. PRs welcome!

License

MIT - Manav Arya Singh