design-extract

Overview

design-extract is a powerful MCP server that reads design systems directly from live websites, extracting DTCG tokens, Tailwind configurations, Figma variables, and more. It goes beyond basic design extraction by capturing layout patterns, responsive behavior across breakpoints, interaction states, WCAG contrast scores, and component anatomy. The server outputs over 17 files per run and can emit code for multiple platforms including iOS SwiftUI, Android Compose, and Flutter.

Try asking AI

After installing, here are 7 things you can ask your AI assistant:

• extract_design

  Extract design system from a website including colors, typography, spacing, components and more

  Try:Extract the design system from stripe.comTry:Get the design tokens and components from example.com
• clone_design

  Generate a working Next.js starter from extracted design

  Try:Clone the design from stripe.com into a Next.js projectTry:Create a Next.js app with the design system from vercel.com
• grade_design

  Generate a shareable design report card with quality ratings

  Try:Grade the design quality of stripe.comTry:Create a design report card for vercel.com
• battle_designs

  Compare two designs head-to-head with detailed grading

  Try:Compare stripe.com and vercel.com designsTry:Battle the design systems of example.com and test.com
• remix_design

  Restyle a website in a different design vocabulary

  Try:Remix stripe.com in cyberpunk styleTry:Apply brutalist design vocabulary to example.com
• extract_brand

  Create a comprehensive brand guidelines document

  Try:Extract full brand guidelines for stripe.comTry:Generate a brand book for vercel.com
• sync_design

  Update local design tokens from a live website

  Try:Sync design tokens from staging.example.comTry:Update local tokens with live site changes
• apply_design

  Apply extracted design directly to a project

  Try:Apply stripe.com design to my projectTry:Write extracted tokens to my React app
• pack_design

  Bundle all outputs into a polished design system directory

  Try:Pack the extracted design from stripe.comTry:Create a complete design system package for example.com
• theme_swap

  Recolor the extracted design around a new brand primary

  Try:Swap to primary color #ff4800 for stripe.comTry:Apply new color palette to example.com design
• check_drift

  Detect design drift between local tokens and live site

  Try:Check for design drift on example.comTry:Compare local tokens with the live site
• lint_design

  Lint design tokens for issues and best practices

  Try:Lint the design tokens in my projectTry:Check token files for issues

Comparable tools

Installation

# Install globally
npm i -g designlang

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

# Run MCP server directly
designlang mcp

{
  "mcpServers": {
    "design-extract": {
      "command": "npx",
      "args": ["designlang", "mcp"]
    }
  }
}

FAQ

What design systems can it extract?

design-extract can extract DTCG tokens, Tailwind configs, Figma variables, CSS custom properties, component anatomy, motion tokens, brand voice, and more from any website.

Can it extract from authenticated sites?

Yes, it supports authentication via cookies (--cookie, --cookie-file) and custom headers (--header) to extract from protected pages.

What platforms does it support for code generation?

It supports multiple platforms including iOS SwiftUI, Android Compose, Flutter, WordPress, and generic web implementations.

On Hacker News

Recent discussion from the developer community.

• Extract any website's design system as AI-ready tokens (Claude plugin and CLI)▲ 2
  Story by manavarya09 · 2026-04-16

Compare design-extract with