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+.
Designlang is a Node 20+ CLI and MCP server that points a Playwright-driven headless browser at any live URL and extracts its complete design system into 17 or more structured output files. A single `npx designlang` command produces W3C DTCG tokens split into primitive, semantic, and composite layers, a Tailwind v4 config, shadcn/ui CSS variables, Figma Variables JSON for light and dark modes, motion tokens with easing and spring detection, typed React component anatomy stubs, brand voice metadata, and paste-ready prompts for Claude Artifacts, among others. The MCP server connects directly to Claude Code, Cursor, and Windsurf, letting those agents consume the extracted design payload at inference time. Multi-platform output covers iOS SwiftUI, Android Compose, Flutter, and WordPress block themes via the `--platforms` flag. A standout feature is the graded report card with a shareable SVG badge that developers can drop into any README. WCAG contrast scoring includes a remediation palette suggesting nearest passing color alternatives. The tool targets frontend developers, design engineers, and AI coding agents needing accurate design-system context for code generation.
- ✓Open-source license (MIT)
- ✓Actively maintained (<30d)
- ✓Healthy fork ratio
- ✓Clear description
- ✓Topics declared
git clone https://github.com/Manavarya09/design-extractMCP Servers overview
What people ask about design-extract
What is Manavarya09/design-extract?
+
Manavarya09/design-extract is mcp servers for the Claude AI ecosystem. 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+. It has 4.1k GitHub stars and its last recorded update is dated 2026-09-10.
How do I install design-extract?
+
You can install design-extract by cloning the repository (https://github.com/Manavarya09/design-extract) or following the README instructions on GitHub. ClaudeWave also provides quick install blocks on this page.
Is Manavarya09/design-extract safe to use?
+
Our security agent has analyzed Manavarya09/design-extract and assigned a Trust Score of 97/100 (tier: Verified). See the full breakdown of passed checks and flags on this page.
Who maintains Manavarya09/design-extract?
+
Manavarya09/design-extract is maintained by Manavarya09. The last recorded GitHub activity is dated 2026-09-10, with 23 open issues.
Are there alternatives to design-extract?
+
Yes. On ClaudeWave you can browse similar mcp servers at /categories/mcp, sorted by popularity or recent activity.
Deploy design-extract to your cloud
Ship this repo to production in minutes. Each platform spins up its own environment with editable env vars.
Maintain this repo? Add a badge to your README
Drop the badge into your GitHub README to show it's tracked on ClaudeWave. Each badge links back to this page and reflects the live Trust Score.
[](https://claudewave.com/repo/manavarya09-design-extract)<a href="https://claudewave.com/repo/manavarya09-design-extract"><img src="https://claudewave.com/api/badge/manavarya09-design-extract" alt="Featured on ClaudeWave: Manavarya09/design-extract" width="320" height="64" /></a>More MCP Servers
Fair-code workflow automation platform with native AI capabilities. Combine visual building with custom code, self-host or cloud, 400+ integrations.
User-friendly AI Interface (Supports Ollama, OpenAI API, ...)
An open-source AI agent that brings the power of Gemini directly into your terminal.
Real-time global intelligence dashboard. AI-powered news aggregation, geopolitical monitoring, and infrastructure tracking in a unified situational awareness interface
The fastest path to AI-powered full stack observability, even for lean teams.
🕷️ An adaptive Web Scraping framework that handles everything from a single request to a full-scale crawl!