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 varia
What is Design Extract?
Design Extract is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to 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 comp...
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 varia
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Extract any website's complete design system with one comman
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx design-extractConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Design Extract
Design Extract (the `designlang` CLI and MCP server) scrapes any live website and extracts its complete design system as structured DTCG-format design tokens — colors, typography, spacing, shadows, radii, breakpoints, animations, and more. It emits tokens to multiple platforms including Tailwind v4, iOS SwiftUI, Android Compose, Flutter, and WordPress, and exposes the extracted system as an MCP server so AI coding assistants like Claude Code, Cursor, and Windsurf can use live design context when generating UI code. Teams use it to clone or audit a brand's visual language without manual inspection.
Prerequisites
- Node.js 18+ installed (required to run the designlang CLI via npx)
- An MCP client such as Claude Code, Cursor, or Windsurf to consume the MCP server
- Optional: an Atlas Cloud API key (ATLASCLOUD_API_KEY) for the --smart AI-powered token classification feature
- Optional: a target website URL you have permission to scrape
Run a one-off design extraction
Use npx to extract a website's design system without installing anything globally. The tool visits the URL, collects CSS variables and computed styles, and outputs structured DTCG tokens.
npx designlang https://stripe.comInstall globally for repeated use
For frequent use or to integrate into CI pipelines, install the designlang CLI globally so it's available as a direct command.
npm i -g designlangExtract a full design report
Use the --full flag to run a comprehensive extraction including accessibility scores, responsive behavior across four viewports, interaction states, and component anatomy.
designlang https://linear.app --fullStart the MCP server for AI assistant integration
Launch the MCP server via stdio transport. This exposes the extracted design system as MCP resources and tools that AI coding assistants can query in real time. Optionally specify an output directory for token files.
designlang mcp --output-dir ./tokensConfigure Atlas Cloud for smart AI classification
Set these environment variables to enable the --smart flag, which uses an AI model to classify tokens semantically (e.g., distinguishing brand-primary from interactive-default even if CSS names are ambiguous).
export ATLASCLOUD_API_KEY="<your-atlas-cloud-key>"
export ATLASCLOUD_MODEL="deepseek-ai/deepseek-v4-pro"
designlang https://stripe.com --smartAdd to Claude Code as an agent skill
Install design-extract as a Claude Code plugin skill so it is available as a slash command inside any Claude Code session.
npx skills add Manavarya09/design-extractDesign Extract Examples
Client configuration
Add designlang's MCP server to Claude Desktop or Claude Code so your AI assistant has live access to extracted design tokens.
{
"mcpServers": {
"design-extract": {
"command": "npx",
"args": ["designlang", "mcp", "--output-dir", "./tokens"]
}
}
}Prompts to try
Once the MCP server is connected, use these prompts to leverage extracted design token context in your coding assistant.
- "Extract the design system from https://vercel.com and list all color tokens"
- "Generate a Tailwind v4 theme file using the tokens extracted from stripe.com"
- "Show me the typography scale from the last extraction"
- "Compare the spacing scale of linear.app vs vercel.com and highlight differences"Troubleshooting Design Extract
Extraction returns empty or sparse tokens for a website
Some sites rely heavily on JavaScript-rendered styles. Try adding the --full flag for a deeper scrape, or check if the site blocks headless browsers and requires authentication.
ATLASCLOUD_API_KEY is set but --smart flag errors with authentication failure
Also check ATLAS_CLOUD_API_KEY (underscore-separated alias) as both forms are accepted. Ensure the key is active and the model name matches one available in your Atlas Cloud plan.
MCP server exits immediately when launched from Claude Desktop
Verify that Node.js 18+ is on the PATH used by Claude Desktop (GUI apps may not inherit shell PATH on macOS). Use the full path to npx in the config: `/usr/local/bin/npx` or use `which npx` to find it.
Frequently Asked Questions about Design Extract
What is Design Extract?
Design Extract is a Model Context Protocol (MCP) server that 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 varia It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Design Extract?
Follow the installation instructions on the Design Extract GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with Design Extract?
Design Extract works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Design Extract free to use?
Yes, Design Extract is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
Design Extract Alternatives — Similar Developer Tools Servers
Looking for alternatives to Design Extract? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Design Extract in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Design Extract?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.