Designlang Design Extract

Crawls any website with Playwright, extracts every computed style from the live DOM, and spits out eight different theme formats: Tailwind config, shadcn/ui variables, React theme object, Figma tokens, W3C design tokens, CSS custom properties, plus AI-optimized markdown and a visual HTML report. The markdown output is legitimately useful for feeding design context to Claude when building UI. Handles auth with cookies and headers, can compare multiple sites side by side, and includes a scoring system that rates design quality across seven categories. The apply command auto-detects your framework and writes tokens directly into your project structure, which saves the tedious copy-paste step when you're reverse engineering a reference site.

skills.sh installs: 318
GitHub stars: 26
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add aradotso/trending-skills --skill designlang-design-extract --agent claude-code

Installs into .claude/skills of the current project.

Files

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

# No install needed — run directly
npx designlang https://stripe.com

# Install globally
npm install -g designlang

# Install as an agent skill
npx skills add Manavarya09/design-extract

Core Commands

Basic Extraction

# Extract everything from a site
npx designlang https://stripe.com

# Extract everything with all captures enabled
npx designlang https://stripe.com --full

# Custom output directory and file prefix
npx designlang https://stripe.com --out ./tokens --name stripe

# Wait for SPA to load before extracting
npx designlang https://app.example.com --wait 2000

# Crawl multiple internal pages for site-wide tokens
npx designlang https://stripe.com --depth 3