How to Extract a Complete Design System from Any Website in One Command

Have You Ever Wanted to Replicate a Beautiful Site? Extract Its Entire Design System with One Command

Ever stumbled upon a beautifully designed site like Stripe, Linear, or Vercel and thought, "I wish I could just grab their color palette, spacing, and typography directly?" You open DevTools, manually copy CSS variables, screenshot elements, measure spacing, and still end up missing things after hours of work.

Today, I’ll show you how to extract an entire website’s design system with a single command—including colors, fonts, spacing, shadows, radii, motion, component structure, and even WCAG accessibility scores. Once extracted, you can instantly convert it into Tailwind configs, shadcn/ui themes, Figma variables, or multi-platform code for iOS, Android, and Flutter.

The tool is called designlang (GitHub repo: design-extract), and it already has over 3,900 stars on npm/GitHub. Let’s dive in.

Prerequisites

• Node.js 20+ (The tool relies on Playwright, requiring a modern Node version)
• Terminal with npx support
• Basic CSS/frontend knowledge (no design background needed)

If your Node version is outdated, switch via nvm first:

nvm install 20
nvm use 20

Step 1: Install & First Extraction

The best part? Zero installation required. Just run it via npx:

npx designlang https://stripe.com

Here’s what happens under the hood:

1. Launches a headless Chromium browser via Playwright and opens the target URL.
2. Waits for full page load & font rendering, then scans up to 5,000 DOM elements.
3. Collects 25+ computed style properties per element.
4. Runs 17 extractor modules to deduplicate, cluster, and categorize the raw data.
5. Outputs 17+ files into ./design-extract-output/.

The process takes ~30s to 1min depending on page complexity. You’ll see a summary like:

Colors: 27 · Fonts: Geist + Geist Mono · Spacing: 18 (base 2px)
Shadows: 11 · Radii: 10 · CSS vars: 407
→ 17 files written to ./design-extract-output/

Why not npm i -g? You can (npm i -g designlang), but npx guarantees the latest version without polluting your global environment. This tool updates frequently, so npx is much cleaner.

Step 2: Understand the Output Files

The design-extract-output/ folder contains several files, but a few are core:

Core Design Tokens: *-design-tokens.json

Follows the W3C DTCG (Design Tokens Community Group) standard, structured in three layers:

Benefit: Change a primitive value, and all semantic/composite tokens update automatically. This standardizes the classic pain point of "changing one color requires updating 20 hardcoded places."

Tailwind Config: *-tailwind.config.js

If you use Tailwind, simply merge or overwrite this into your project. The theme.extend already includes all extracted colors, fonts, spacing, radii, and shadows.

shadcn/ui Theme: *-shadcn-theme.css

Matches shadcn/ui’s CSS variable format. Replace your globals.css to instantly apply the new theme.

Motion Tokens: *-motion-tokens.json

Includes duration, easing, and spring parameters for all animations. Add --motion-runtime to capture real stagger sequences and scroll-triggered animations.

Step 3: Practical Walkthrough (Vercel → Next.js)

Let’s walk through a complete example: moving Vercel’s design into a local Next.js project.

1. Full Extraction (Screenshots, Responsive, States)

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

--full enables screenshots, 4 responsive breakpoints, hover/focus state capture, and runtime motion recording in one go.

2. View the Design Scorecard

npx designlang grade https://vercel.com --open

Generates an HTML report with an A–F grade and auto-opens it. Vercel typically scores a C or B, as the tool highlights specific issues like low-contrast color pairs for easy fixes.

3. Apply Tokens to Your Next.js App

If you have a local Next.js project:

npx designlang apply https://vercel.com -d ./my-app

apply auto-detects your framework (Next.js, React, Vue, etc.) and writes tokens to the correct locations. No more manual copy-pasting.

4. Multi-Platform Output (iOS / Android / Flutter / WordPress)

For cross-platform teams:

npx designlang https://vercel.com --platforms web,ios,android,flutter

Generates ios/ (SwiftUI), android/ (Compose), and flutter/ directories. One design system, reused everywhere.

Step 4: Configure MCP Server for AI Coding Tools

This is where it gets exciting: designlang includes a built-in MCP Server, feeding extracted tokens directly to AI coding assistants like Claude Code, Cursor, and Windsurf.

Start the MCP Server:

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

Then, install the plugin in Claude Code:

/plugin marketplace add Manavarya09/design-extract
/plugin install designlang@designlang

Once installed, use slash commands in Claude Code:

• /extract <url> — Extract the full design language
• /grade <url> — Generate a scoring report
• /remix <url> --as cyberpunk — Reinterpret a design in a new style
• /pack <url> — Bundle into a complete design system directory

In Cursor or Codex, run npx skills add Manavarya09/design-extract, then use /extract-design <url>.

Why MCP? AI’s biggest weakness is lacking context about your design rules. With an MCP Server, AI reads your tokens directly and generates compliant code without constant prompting like "use that specific blue, and make spacing a multiple of 8px."

Step 5: WCAG Audits & CSS Health Checks

WCAG 2.1 contrast checks run by default, scoring all foreground/background pairs. If a pair fails, it suggests the closest accessible alternative—crucial for compliance projects.

CSS health auditing is also automatic, checking:

• Selector specificity
• !important abuse
• Unused CSS
• Keyframe animations

Results are included in the output files automatically.

Troubleshooting & Pro Tips

1. First run is slow?
Playwright downloads Chromium (~150MB) initially. Subsequent runs are fast. If Chrome is already installed, add --system-chrome to skip the download.

2. SPA content missing?
SPAs need JS execution time before rendering. Add --wait 3000 (ms) to give the tool 3 seconds before extracting.

3. Pages behind login?
Pass cookies or headers:

npx designlang https://app.example.com --cookie "token=abc123" --header "Authorization: Bearer xxx"

Or load a Playwright storageState file: --cookie-file cookies.json

4. Tailwind config conflicts?
apply handles framework detection smartly, but if merging manually, ensure theme.extend doesn’t overwrite existing keys.

5. Node version error?
Requires Node 20+. Verify with node --version.

Summary

Let’s recap what we covered:

1. Used npx designlang <url> to extract a full design system.
2. Explored the 3-layer DTCG token structure (primitive → semantic → composite).
3. Applied tokens to a Next.js project via apply.
4. Generated multi-platform code with --platforms.
5. Set up an MCP Server for AI tool integration.
6. Leveraged built-in WCAG & CSS audits.

Ideal use cases:

• Quickly translating Figma/reference sites into usable tokens
• Handling client requests like "make it feel like Stripe" without guessing
• Reverse-engineering mature design systems for team alignment
• Eliminating repetitive AI prompting by feeding tokens via MCP

Try it on your favorite site today. You’ll uncover design details you never noticed. Feel free to share your findings or ask questions in the comments!