AUTOMATIONSWITCH
CommunityDesign

Design Extract

by Manavarya09 (community)

Extract any website's complete design system with one command. DTCG tokens, semantic + primitive + composite tiers, Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation. 2,379 GitHub stars and 100 commits on main in the last 30 days.

2,379·7 tools·Released NOV 2025·MIT
npx -y design-extract
Share:

Extract any website's complete design system with one command. DTCG tokens, Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation. 2,379 stars and 100 commits on main in the last 30 days.

Reviewed by M. Nouriel · MAY 2026

INSTALL THIS SERVER

{ "mcpServers": { "design-extract": { "command": "npx", "args": [ "-y", "design-extract" ] } } }
PrereqNPM: `design-extract`. First run downloads Playwright browser binaries (~150MB). Path: ~/Library/Application Support/Claude/claude_desktop_config.json (macOS).
{ "mcpServers": { "design-extract": { "command": "npx", "args": [ "-y", "design-extract" ] } } }
{ "mcpServers": { "design-extract": { "command": "npx", "args": [ "-y", "design-extract" ] } } }
{ "mcpServers": { "design-extract": { "command": "npx", "args": [ "-y", "design-extract" ] } } }
{ "mcpServers": { "design-extract": { "command": "npx", "args": [ "-y", "design-extract" ] } } }

7 TOOLS AVAILABLE

extract_design_system
Extract the complete design system from a URL
Read
get_tokens
Retrieve DTCG-compliant design tokens
Read
export_tailwind
Export the design system as Tailwind v4 config
Read
export_figma
Export tokens as Figma variables JSON
Read
export_shadcn
Export the design system for shadcn/ui consumption
Read
audit_css_health
Run a CSS health audit on the extracted styles
Read

OUR ASSESSMENT

Strengths
  • 2,379 GitHub stars.
  • 100 commits on main in the last 30 days. Top cadence among design MCPs.
  • MIT license.
  • DTCG-compliant token output (semantic + primitive + composite).
  • Multi-platform exporters (Tailwind, Figma, shadcn, SwiftUI, Compose, Flutter, WordPress).
  • CSS health audit plus WCAG remediation in one tool.
Weaknesses
  • Playwright dependency; first run downloads browser binaries (~150MB).
  • Extraction quality depends on target site CSS architecture; opaque CSS-in-JS systems extract less cleanly.
  • Community-maintained.
Security Notes

No authentication. Playwright runs a headless browser against arbitrary URLs; honour the target site's Terms of Service and robots.txt before extracting at scale. WCAG remediation is suggestion-only; manual verification still required for compliance.

Best For

Design teams reverse-engineering competitor design systems; agencies onboarding new clients who want to capture the existing brand system; platform engineering teams standardising on DTCG tokens; accessibility audits where WCAG remediation suggestions accelerate fixes.

TECHNICAL DETAILS

Language
typescript
Transport
stdio
Clients
Claude DesktopClaude CodeCursorVS CodeWindsurf
License
MIT
GitHub
npm
design-extract
Last Release
design-extract (npm latest)MAY 9, 2026
First Released
NOV 1, 2025

ADOPTION METRICS

// GitHub Stars
2,379

// Reading this2,379 stars on Manavarya09/design-extract. 100 commits on main in the last 30 days.

// Popularity Rank
#1
Globally · #1 in Design

// Reading thisPairs with Framelink Figma, Stitch, Excalidraw, Miro in design. Design Extract owns the design-system-extraction-from-URL slot uniquely.

SOURCES & VERIFICATION

We don't take any single directory's word for it. Before scoring, we cross-reference 4 public MCP sources, install the server ourselves against the clients we cover, and record when we last re-verified.

01
Discovered
Manual submission
First indexed MAY 9, 2026
02
Cross-referenced
4 directories
PulseMCP, MCP.so, Glama, Smithery
03
Verified against
Claude Desktop, Cursor
Installed and tested across clients
04
Last re-checked
MAY 9, 2026
Weekly re-verification
// How other directories see it

The same server, 4 different lenses. We reconcile these signals into our editorial score, which is why our number sometimes diverges from a directory-aggregate star count.

SourceTheir ratingTheir star countTheir downloadsLast synced
AutomationSwitch This page4.5editorial2,379MAY 9, 2026
PulseMCP— unratedunavailableunavailableMAY 9, 2026
MCP.so— unratedunavailableunavailableMAY 9, 2026
Glama— unratedunavailableunavailableMAY 9, 2026
Smithery— unratedunavailableunavailableMAY 9, 2026

// Counts are directory-reported; we don't adjust them. Discrepancies usually come from different snapshot times or star-caching.

// Get in touch

DISCUSS YOUR
MCP REQUIREMENTS.

Evaluating a server, scoping an internal deployment, or working out whether MCP is the right fit at all. Start the conversation and we will point you at the right piece of the ecosystem.

Discuss Your MCP Requirements →