Manavarya09/design-extract

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.

npx designlang https://stripe.com

Get everything at once:

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

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.

# 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

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

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.

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.

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);

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.

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.

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.

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

Monitor a site for design changes:

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

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

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.

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

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

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

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).

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

Identifies every font source — Google Fonts, self-hosted, CDN, or system — and generates ready-to-use @font-face CSS.

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

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

designlang https://vercel.com --dark

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

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.

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.

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.

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.

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.

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

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)
  --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>)

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

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

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>.

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

See CONTRIBUTING.md. PRs welcome!

MIT - Manav Arya Singh