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.comGet everything at once:
npx designlang https://stripe.com --full| 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.
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-extractMost 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 --responsiveResponsive: 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/tokensDetects 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.appGenerates 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 devOne 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 60Checks 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-appDetects 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 --darkOne-command integration with any MCP-aware AI agent (Cursor, Claude Code, Windsurf, and more):
designlang mcp --output-dir ./design-extract-outputLaunches a stdio JSON-RPC server that exposes the extracted design as MCP resources and tools.
Resources:
designlang://tokens/primitive— primitive token layerdesignlang://tokens/semantic— semantic token layer (with DTCG alias references)designlang://regions— classified page regions (nav, hero, pricing, etc.)designlang://components— reusable component clusters with variantsdesignlang://health— CSS health audit
Tools:
search_tokens— query tokens by name, value, or typefind_nearest_color— snap any color to the nearest palette tokenget_region— fetch a classified region by nameget_component— fetch a component cluster by idlist_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 allResulting 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-rulesWrites:
.cursor/rules/designlang.mdc— Cursor rule.claude/skills/designlang/SKILL.md— Claude Code skillCLAUDE.md.fragment— snippet you can paste into your project's CLAUDE.mdagents.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)
!importantcount- Duplicate declarations
- Unused CSS via the Playwright Coverage API
@keyframescatalog- 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:
activeTabonly, plus host access to the hosted extractor. - Install: toggle developer mode at
chrome://extensions, click Load unpacked, pick thechrome-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, PlaywrightstorageState.json, or Netscapecookies.txt(browser extensions, curl exports). Merges cleanly with the existing--cookie name=valueflag.--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| Feature | Flag / Command | Description |
|---|---|---|
| Base extraction | designlang <url> |
Colors, typography, spacing, shadows, radii, CSS vars, breakpoints, animations, components |
| Layout system | automatic | Grid patterns, flex usage, container widths, gap values |
| Accessibility | automatic | WCAG 2.1 contrast ratios for all fg/bg pairs |
| Design scoring | automatic | 7-category quality rating (A-F) with actionable issues |
| Gradients | automatic | Gradient type, direction, stops, classification |
| Z-index map | automatic | Layer hierarchy, z-index wars detection |
| SVG icons | automatic | Deduplicated icons, size/style classification, color palette |
| Font files | automatic | Source detection (Google/self-hosted/CDN/system), @font-face CSS |
| Image styles | automatic | Aspect ratios, shapes, filters, pattern classification |
| Dark mode | --dark |
Extracts dark color scheme + light/dark diff |
| Auth pages | --cookie, --cookie-file, --header |
Extract from authenticated/protected pages; cookie files in JSON / Playwright storageState / Netscape formats |
| Self-signed / dev TLS | --insecure |
Ignore HTTPS/SSL certificate errors |
| User-Agent override | --user-agent <ua> |
Set a custom User-Agent string |
| Chrome extension | chrome-extension/ |
One-click handoff from any tab, MV3, activeTab only |
| Multi-page | --depth <n> |
Crawl N internal pages; emits shared-vs-per-route token reconciliation (*-tokens-shared.json, *-tokens-routes/<slug>.json, *-routes-report.md) |
| Screenshots | --screenshots |
Capture buttons, cards, inputs, nav, hero, full page |
| Responsive | --responsive |
Crawl at 4 viewports, map breakpoint changes |
| Interactions | --interactions |
Capture hover/focus/active state transitions |
| Auto-interact | --deep-interact |
Scroll, open menus/modals/accordions, hover CTAs before extraction |
| Everything | --full |
Enable screenshots + responsive + interactions + deep-interact |
| Apply | designlang apply <url> |
Auto-detect framework and write tokens to your project |
| Clone | designlang clone <url> |
Generate a working Next.js starter with extracted design |
| Score | designlang score <url> |
Rate design quality with visual bar chart breakdown |
| Watch | designlang watch <url> |
Monitor for design changes on interval |
| Diff | designlang diff <A> <B> |
Compare two sites (MD + HTML) |
| Multi-brand | designlang brands <urls...> |
N-site comparison matrix |
| Sync | designlang sync <url> |
Update local tokens from live site |
| History | designlang history <url> |
Track design changes over time |
| MCP server | designlang mcp |
Expose extraction as MCP resources + tools |
| Multi-platform | --platforms <csv> |
Emit iOS / Android / Flutter / WordPress outputs |
| Agent rules | --emit-agent-rules |
Cursor, Claude Code, generic agent rule files |
| Stack fingerprint | automatic | Framework + Tailwind + analytics detection |
| CSS health | automatic | Specificity, !important, unused CSS, keyframes |
| A11y remediation | automatic | Nearest palette color passing AA / AAA for every failing pair |
| Semantic regions | automatic | nav / hero / pricing / testimonials / cta / footer classification |
| Reusable components | automatic | DOM subtree + style-vector clustering with variants |
| DTCG tokens | default | W3C Design Tokens v1 with semantic + composite layers (--tokens-legacy for pre-v7) |
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
- Crawl — Launches headless Chromium via Playwright, waits for network idle and fonts
- 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 - Process — 17 extractor modules parse, deduplicate, cluster, and classify the raw data (including gradients, z-index layers, icons, fonts, and image patterns)
- Format — 8 formatter modules generate output files
- Score — Accessibility extractor calculates WCAG contrast ratios for all color pairs
- 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-extractIn Claude Code, use /extract-design <url>.
design-extract-beta.vercel.app — the brutalist product page.
See CONTRIBUTING.md. PRs welcome!
MIT - Manav Arya Singh
