Search DevTools

Jump to any tool or page

Design Extract

Trending

Extract any website's complete design system with one command. DTCG tokens, semantic+primitive+composite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20+.

Manavarya093,367 stars305 forksDesign & UX
View source

Install

Terminal

$npx -y design-extract

mcp_config.json

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

Tools exposed1

execute
Invokes exported functions and tools from design-extract.

Documentation

design-extract

Extract any website's complete design system with one command. DTCG tokens, semantic+primitive+composite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20+.

Repository & Author

Installation

npx -y design-extract

Sourced from the repository README.

More in Design & UX