Designlang Design Extract

by reason-machines2384a003145aNo licenseListed Oct 8, 2026Updated Oct 8, 2026

Extract complete design systems from any website — colors, typography, spacing, shadows, and more — using the designlang CLI.

Instructions onlyDesign & Creative

AI-generated overview

Extracts a website's design system — colors, typography, spacing, shadows — into tokens, Tailwind, React, shadcn and Figma files.

What it does: This skill documents the designlang CLI, which crawls a website with a headless browser and extracts computed styles from the live DOM. It produces eight output files, including AI-optimized markdown, an HTML preview, W3C design tokens, a Tailwind config, a React theme, a shadcn/ui theme, Figma variables and CSS custom properties. It also covers scoring, comparing, applying, cloning, watching and syncing designs.
When to use it: Use it when you want to reverse engineer a site's design language, generate theme files from an existing website, or feed a structured design description to an AI agent. It also fits comparing brands' designs or monitoring a site for design changes.
Requirements: Requires Node.js and the designlang CLI, run via npx or installed globally; a headless browser (Playwright, with chromium installed) is needed for crawling. Network access to the target site is required, and cookies or custom headers are needed for protected pages. The skill ships no scripts; it is instructions only.

DESIGNLANG — Design System Extraction

Skill by ara.so — Daily 2026 Skills collection.

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

Installation

bash

# No install needed — run directlynpx designlang https://stripe.com
# Install globallynpm install -g designlang
# Install as an agent skillnpx skills add Manavarya09/design-extract

# No install needed — run directlynpx designlang https://stripe.com
# Install globallynpm install -g designlang
# Install as an agent skillnpx skills add Manavarya09/design-extract

Core Commands

Basic Extraction

bash

# Extract everything from a sitenpx designlang https://stripe.com
# Extract everything with all captures enablednpx designlang https://stripe.com --full
# Custom output directory and file prefixnpx designlang https://stripe.com --out ./tokens --name stripe
# Wait for SPA to load before extractingnpx designlang https://app.example.com --wait 2000
# Crawl multiple internal pages for site-wide tokensnpx designlang https://stripe.com --depth 3

# Extract everything from a sitenpx designlang https://stripe.com
# Extract everything with all captures enablednpx designlang https://stripe.com --full
# Custom output directory and file prefixnpx designlang https://stripe.com --out ./tokens --name stripe
# Wait for SPA to load before extractingnpx designlang https://app.example.com --wait 2000
# Crawl multiple internal pages for site-wide tokensnpx designlang https://stripe.com --depth 3

Specialized Extraction

bash

# Extract dark mode stylesnpx designlang https://vercel.com --dark
# Capture at 4 responsive breakpointsnpx designlang https://stripe.com --responsive
# Capture hover/focus/active interaction statesnpx designlang https://stripe.com --interactions
# Take component screenshots (buttons, cards, nav, hero)npx designlang https://stripe.com --screenshots
# Everything at oncenpx designlang https://stripe.com --full

# Extract dark mode stylesnpx designlang https://vercel.com --dark
# Capture at 4 responsive breakpointsnpx designlang https://stripe.com --responsive
# Capture hover/focus/active interaction statesnpx designlang https://stripe.com --interactions
# Take component screenshots (buttons, cards, nav, hero)npx designlang https://stripe.com --screenshots
# Everything at oncenpx designlang https://stripe.com --full

Authentication

bash

# With cookies for protected pagesnpx designlang https://internal-app.com --cookie "session=abc123" --cookie "user_id=42"
# With custom headersnpx designlang https://internal-app.com --header "Authorization:Bearer $TOKEN"
# Combinednpx designlang https://app.example.com \  --cookie "session=$SESSION_COOKIE" \  --header "X-API-Key:$API_KEY"

# With cookies for protected pagesnpx designlang https://internal-app.com --cookie "session=abc123" --cookie "user_id=42"
# With custom headersnpx designlang https://internal-app.com --header "Authorization:Bearer $TOKEN"
# Combinednpx designlang https://app.example.com \  --cookie "session=$SESSION_COOKIE" \  --header "X-API-Key:$API_KEY"

Utility Commands

bash

# Score a site's design quality (A-F rating, 7 categories)npx designlang score https://vercel.com
# Compare two sites side-by-sidenpx designlang diff https://stripe.com https://paddle.com
# Compare N brands in a matrixnpx designlang brands stripe.com vercel.com github.com linear.app
# Apply extracted design directly to your project (auto-detects framework)npx designlang apply https://stripe.com --dir ./my-app
# Generate a working Next.js starter with extracted designnpx designlang clone https://stripe.com
# Monitor a site for design changes hourlynpx designlang watch https://stripe.com --interval 60
# Sync local tokens with live sitenpx designlang sync https://stripe.com --out ./src/tokens
# View design change historynpx designlang history https://stripe.com

# Score a site's design quality (A-F rating, 7 categories)npx designlang score https://vercel.com
# Compare two sites side-by-sidenpx designlang diff https://stripe.com https://paddle.com
# Compare N brands in a matrixnpx designlang brands stripe.com vercel.com github.com linear.app
# Apply extracted design directly to your project (auto-detects framework)npx designlang apply https://stripe.com --dir ./my-app
# Generate a working Next.js starter with extracted designnpx designlang clone https://stripe.com
# Monitor a site for design changes hourlynpx designlang watch https://stripe.com --interval 60
# Sync local tokens with live sitenpx designlang sync https://stripe.com --out ./src/tokens
# View design change historynpx designlang history https://stripe.com

Output Files

Running npx designlang https://stripe.com produces:

File	Purpose
`stripe-com-design-language.md`	AI-optimized markdown with all 19 design sections
`stripe-com-preview.html`	Visual report with swatches, type scale, a11y score
`stripe-com-design-tokens.json`	W3C Design Tokens format
`stripe-com-tailwind.config.js`	Drop-in Tailwind CSS theme
`stripe-com-variables.css`	CSS custom properties
`stripe-com-figma-variables.json`	Figma Variables import (light + dark)
`stripe-com-theme.js`	React/CSS-in-JS theme (Chakra, Stitches, etc.)
`stripe-com-shadcn-theme.css`	shadcn/ui `globals.css` variables

Full CLI Reference

bash

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      --full              Enable all captures      --cookie <val>      Cookie for auth pages (name=value, repeatable)      --header <val>      Custom header (name:value, repeatable)      --framework <type>  Only generate specific theme (react, shadcn)      --no-history        Skip saving to history      --verbose           Detailed progress output

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      --full              Enable all captures      --cookie <val>      Cookie for auth pages (name=value, repeatable)      --header <val>      Custom header (name:value, repeatable)      --framework <type>  Only generate specific theme (react, shadcn)      --no-history        Skip saving to history      --verbose           Detailed progress output

Common Patterns

Pattern 1: Extract and apply to a Tailwind project

bash

# Extract design tokens from a reference sitenpx designlang https://linear.app --out ./design-tokens --name linear
# The generated tailwind.config.js can be merged into your project:# ./design-tokens/linear-tailwind.config.js

# Extract design tokens from a reference sitenpx designlang https://linear.app --out ./design-tokens --name linear
# The generated tailwind.config.js can be merged into your project:# ./design-tokens/linear-tailwind.config.js

Generated tailwind.config.js looks like:

/** @type {import('tailwindcss').Config} */module.exports = {  theme: {    extend: {      colors: {        primary: '#5E6AD2',        background: '#FFFFFF',        surface: '#F7F8F9',        // ... all extracted colors      },      fontFamily: {        sans: ['Inter', 'system-ui', 'sans-serif'],      },      fontSize: {        xs: ['11px', { lineHeight: '16px' }],        sm: ['13px', { lineHeight: '20px' }],        base: ['15px', { lineHeight: '24px' }],        // ... full type scale      },      borderRadius: {        sm: '4px',        md: '6px',        lg: '8px',        // ... extracted radii      },      boxShadow: {        card: '0 1px 3px rgba(0,0,0,0.12)',        // ... extracted shadows      },    },  },}

/** @type {import('tailwindcss').Config} */module.exports = {  theme: {    extend: {      colors: {        primary: '#5E6AD2',        background: '#FFFFFF',        surface: '#F7F8F9',        // ... all extracted colors      },      fontFamily: {        sans: ['Inter', 'system-ui', 'sans-serif'],      },      fontSize: {        xs: ['11px', { lineHeight: '16px' }],        sm: ['13px', { lineHeight: '20px' }],        base: ['15px', { lineHeight: '24px' }],        // ... full type scale      },      borderRadius: {        sm: '4px',        md: '6px',        lg: '8px',        // ... extracted radii      },      boxShadow: {        card: '0 1px 3px rgba(0,0,0,0.12)',        // ... extracted shadows      },    },  },}

Pattern 2: Feed the markdown to an LLM

bash

# Extract the AI-optimized markdownnpx designlang https://stripe.com --out ./tokens
# Then use in a prompt:cat ./tokens/stripe-com-design-language.md | \  pbcopy  # macOS: copies to clipboard
# Or reference it directly in Claude/Cursor:# "Use the design language in ./tokens/stripe-com-design-language.md#  to style this component..."

# Extract the AI-optimized markdownnpx designlang https://stripe.com --out ./tokens
# Then use in a prompt:cat ./tokens/stripe-com-design-language.md | \  pbcopy  # macOS: copies to clipboard
# Or reference it directly in Claude/Cursor:# "Use the design language in ./tokens/stripe-com-design-language.md#  to style this component..."

Pattern 3: Compare competitors

bash

npx designlang brands stripe.com braintree.com paddle.com adyen.com
# Generates:# brands.md  — markdown comparison matrix# brands.html — visual side-by-side with color overlap analysis

npx designlang brands stripe.com braintree.com paddle.com adyen.com
# Generates:# brands.md  — markdown comparison matrix# brands.html — visual side-by-side with color overlap analysis

Pattern 4: Apply to a shadcn/ui project

bash

# Auto-detect project structure and write to the right filesnpx designlang apply https://stripe.com --dir ./my-nextjs-app
# Or manually use the generated shadcn theme:# Copy stripe-com-shadcn-theme.css content into app/globals.css

# Auto-detect project structure and write to the right filesnpx designlang apply https://stripe.com --dir ./my-nextjs-app
# Or manually use the generated shadcn theme:# Copy stripe-com-shadcn-theme.css content into app/globals.css

Generated shadcn-theme.css:

css

@layer base {  :root {    --background: 0 0% 100%;    --foreground: 222.2 84% 4.9%;    --primary: 238 72% 57%;    --primary-foreground: 210 40% 98%;    --muted: 210 40% 96.1%;    --muted-foreground: 215.4 16.3% 46.9%;    --border: 214.3 31.8% 91.4%;    --radius: 0.5rem;    /* ... all extracted variables */  }}

@layer base {  :root {    --background: 0 0% 100%;    --foreground: 222.2 84% 4.9%;    --primary: 238 72% 57%;    --primary-foreground: 210 40% 98%;    --muted: 210 40% 96.1%;    --muted-foreground: 215.4 16.3% 46.9%;    --border: 214.3 31.8% 91.4%;    --radius: 0.5rem;    /* ... all extracted variables */  }}

Pattern 5: W3C Design Tokens for tooling

Generated design-tokens.json:

json

{  "$schema": "https://design-tokens.github.io/community-group/format/",  "color": {    "primary": {      "$value": "#0969da",      "$type": "color"    },    "background": {      "default": {        "$value": "#ffffff",        "$type": "color"      }    }  },  "typography": {    "fontFamily": {      "sans": {        "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI'",        "$type": "fontFamily"      }    }  }}

{  "$schema": "https://design-tokens.github.io/community-group/format/",  "color": {    "primary": {      "$value": "#0969da",      "$type": "color"    },    "background": {      "default": {        "$value": "#ffffff",        "$type": "color"      }    }  },  "typography": {    "fontFamily": {      "sans": {        "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI'",        "$type": "fontFamily"      }    }  }}

Pattern 6: React theme object

Generated theme.js:

export const theme = {  colors: {    primary: '#319795',    secondary: '#553C9A',    // ...  },  fonts: {    body: 'Inter, system-ui, sans-serif',    heading: 'Inter, system-ui, sans-serif',  },  space: {    1: '4px',    2: '8px',    4: '16px',    8: '32px',    // ...  },  radii: {    sm: '4px',    md: '6px',    lg: '8px',    full: '9999px',  },}

export const theme = {  colors: {    primary: '#319795',    secondary: '#553C9A',    // ...  },  fonts: {    body: 'Inter, system-ui, sans-serif',    heading: 'Inter, system-ui, sans-serif',  },  space: {    1: '4px',    2: '8px',    4: '16px',    8: '32px',    // ...  },  radii: {    sm: '4px',    md: '6px',    lg: '8px',    full: '9999px',  },}

Pattern 7: Monitor a design system for changes

bash

# Check every 30 minutes, output to a dedicated foldernpx designlang watch https://vercel.com \  --interval 30 \  --out ./design-monitoring
# Useful in CI — run once and diff against stored baselinenpx designlang diff \  https://vercel.com \  ./design-monitoring/vercel-com-design-tokens.json

# Check every 30 minutes, output to a dedicated foldernpx designlang watch https://vercel.com \  --interval 30 \  --out ./design-monitoring
# Useful in CI — run once and diff against stored baselinenpx designlang diff \  https://vercel.com \  ./design-monitoring/vercel-com-design-tokens.json

Pattern 8: Clone a site's design as a Next.js starter

bash

npx designlang clone https://stripe.com
# Creates ./cloned-design/ with:# - Next.js app with extracted colors/fonts/spacing applied# - tailwind.config.js pre-populated# - globals.css with CSS variables# - Basic component stubs styled to match
cd cloned-designnpm installnpm run dev

npx designlang clone https://stripe.com
# Creates ./cloned-design/ with:# - Next.js app with extracted colors/fonts/spacing applied# - tailwind.config.js pre-populated# - globals.css with CSS variables# - Basic component stubs styled to match
cd cloned-designnpm installnpm run dev

What Gets Extracted

The markdown output covers 19 sections:

Color Palette — all unique colors with usage context
Typography — font families, weights, sizes, line heights, letter spacing
Spacing — padding/margin/gap values used across the site
Border Radii — all radius values with component context
Box Shadows — elevation system
CSS Custom Properties — all --var declarations
Breakpoints — detected responsive breakpoints
Transitions & Animations — duration, easing, properties animated
Component Patterns — button, card, input, nav with full CSS snippets
Layout System — grid columns, flex patterns, container widths
Responsive Design — what changes across breakpoints (with --responsive)
Interaction States — hover/focus/active deltas (with --interactions)
Accessibility — WCAG 2.1 contrast scores for all fg/bg pairs
Gradients — type, direction, stops, classification
Z-Index Map — layer hierarchy, z-index wars detection
SVG Icons — deduplicated, size/style classified, color palette
Font Files — source (Google/self-hosted/CDN/system), @font-face CSS
Image Style Patterns — aspect ratios, filters, shape treatments
Quick Start — ready-to-use snippet to recreate the design

Design Scoring

Scores 7 categories on a 0–100 scale with A-F grade:

Color Discipline — palette size, harmony, usage consistency
Typography — scale rationality, weight/size combinations
Spacing System — whether spacing follows a scale
Shadows — elevation system coherence
Border Radii — consistency across components
Accessibility — WCAG 2.1 contrast pass rate
Tokenization — CSS custom property usage

Troubleshooting

Site loads blank or styles are missing

bash

# Add wait time for JavaScript-heavy SPAsnpx designlang https://app.example.com --wait 3000
# Or use a higher viewport for desktop-only layoutsnpx designlang https://example.com --width 1440 --height 900

# Add wait time for JavaScript-heavy SPAsnpx designlang https://app.example.com --wait 3000
# Or use a higher viewport for desktop-only layoutsnpx designlang https://example.com --width 1440 --height 900

Authentication-protected pages

bash

# Get your session cookie from browser DevTools → Application → Cookiesnpx designlang https://app.example.com \  --cookie "auth_token=$AUTH_TOKEN" \  --cookie "csrf=$CSRF_TOKEN"

# Get your session cookie from browser DevTools → Application → Cookiesnpx designlang https://app.example.com \  --cookie "auth_token=$AUTH_TOKEN" \  --cookie "csrf=$CSRF_TOKEN"

Output files are too large

bash

# Only generate a specific framework's themenpx designlang https://stripe.com --framework reactnpx designlang https://stripe.com --framework shadcn
# Single-page only (no depth crawling)npx designlang https://stripe.com --depth 0

# Only generate a specific framework's themenpx designlang https://stripe.com --framework reactnpx designlang https://stripe.com --framework shadcn
# Single-page only (no depth crawling)npx designlang https://stripe.com --depth 0

Too many colors extracted (utility CSS sites)

bash

# Limit to the main page at desktop viewport, no deep crawlnpx designlang https://tailwindcss.com \  --depth 0 \  --width 1280 \  --no-history

# Limit to the main page at desktop viewport, no deep crawlnpx designlang https://tailwindcss.com \  --depth 0 \  --width 1280 \  --no-history

Playwright/browser not found

bash

# Playwright needs browsers installednpx playwright install chromium
# Or if installed globally:npm install -g designlangplaywright install chromium

# Playwright needs browsers installednpx playwright install chromium
# Or if installed globally:npm install -g designlangplaywright install chromium

`apply` command doesn't detect my framework

bash

# Explicitly point to your project root with a tailwind config presentnpx designlang apply https://stripe.com --dir ./my-app
# Ensure ./my-app contains tailwind.config.js or tailwind.config.ts# for Tailwind detection, or components.json for shadcn detection

# Explicitly point to your project root with a tailwind config presentnpx designlang apply https://stripe.com --dir ./my-app
# Ensure ./my-app contains tailwind.config.js or tailwind.config.ts# for Tailwind detection, or components.json for shadcn detection

Integration with AI Agents

The -design-language.md file is specifically structured for LLM consumption. Feed it directly to Claude, GPT-4, or Cursor to:

Recreate UI components matching the extracted design
Generate new components consistent with the design system
Audit your own components against a reference design
Document your own site's design system automatically

bash

# Extract your own site's design language for agent contextnpx designlang https://your-production-site.com \  --out ./docs/design \  --name my-app
# Reference in CLAUDE.md or .cursorrules:# "When creating UI components, follow the design language#  documented in ./docs/design/my-app-design-language.md"

# Extract your own site's design language for agent contextnpx designlang https://your-production-site.com \  --out ./docs/design \  --name my-app
# Reference in CLAUDE.md or .cursorrules:# "When creating UI components, follow the design language#  documented in ./docs/design/my-app-design-language.md"

Source and attribution

Source:reason-machines/trending-skillsinskills/designlang-design-extractat commit2384a00

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Designlang Design Extract

DESIGNLANG — Design System Extraction

Installation

Core Commands

Basic Extraction

Specialized Extraction

Authentication

Utility Commands

Output Files

Full CLI Reference

Common Patterns

Pattern 1: Extract and apply to a Tailwind project

Pattern 2: Feed the markdown to an LLM

Pattern 3: Compare competitors

Pattern 4: Apply to a shadcn/ui project

Pattern 5: W3C Design Tokens for tooling

Pattern 6: React theme object

Pattern 7: Monitor a design system for changes

Pattern 8: Clone a site's design as a Next.js starter

What Gets Extracted

Design Scoring

Troubleshooting

Site loads blank or styles are missing

Authentication-protected pages

Output files are too large

Too many colors extracted (utility CSS sites)

Playwright/browser not found

apply command doesn't detect my framework

Integration with AI Agents

Source and attribution

More from reason-machines/trending-skills

Yourvpndead Vpn Detection

X Mentor Skill Nuwa

Wildworld Dataset

Understand Anything Knowledge Graph

Webphysics Avbd Engine

Ui Ux Pro Max Skill

More in Design & Creative

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design

`apply` command doesn't detect my framework