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-pla…
Designnpx -y designlang{
"mcpServers": {
"design-extract": {
"command": "npx",
"args": [
"-y",
"designlang"
]
}
}
}design-extract is a community MCP server that connects AI assistants like Claude to extract any website's complete design system with one command. dtcg tokens, semantic+primitive+composite, mcp server for claude code/cursor/windsurf, multi-pla…. It runs locally on your machine, keeping your data private and giving you full control over the connection. Adding it to your setup expands what Claude can do without any extra coding.
About design-extract
Overview
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+.
Links
Topics
accessibility, agent-skill, ai, chrome-extension, claude-code-plugin, cli, css, cursor, design-system, design-to-code, design-tokens, dtcg, figma, mcp-server, npx, playwright, shadcn-ui, skills-sh, tailwind, web-scraping, design-language, extraction, colors, typography, claude-code, plugin, wordpress, vue, svelte, json, ci-cd
Who Should Use design-extract?
- 1Extend Claude and other AI assistants with new capabilities
- 2Automate tasks that previously required manual steps
- 3Connect your existing tools to an AI workflow
- 4Reduce repetitive work by letting AI interact with your services
How to Install design-extract
Before you start
You will need Node.js (v18 or later) installed on your machine — download it from nodejs.org if you haven't already.
- 1Open a terminal (Terminal on Mac, Command Prompt or PowerShell on Windows).
- 2Paste the install command above and press Enter — Node.js will download and run the server automatically.
- 3Add the server to your Claude Desktop config file (see the JSON snippet above) and restart Claude.
The Claude Desktop config snippet above can be copied and pasted directly into your claude_desktop_config.json file — no editing required.