design-extract

About design-extract

DESIGNLANG Reverse-engineer any website's complete design system in one command. designlang crawls any website with a headless browser, extracts every computed style from the live DOM, and generates 8 output files — including an AI-optimized markdown file, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS custom properties.

accessibility agent-skill ai chrome-extension claude-code-plugin cli css cursor design-system design-to-code

Quick Facts

Stars	2,856
Forks	261
Language	JavaScript
Category	MCP Server
License	MIT
Quality Score	56.63/100
Open Issues	19
Last Updated	2026-05-21
Created	2026-04-15
Platforms	browser, claude-code, cli, mcp, node
Est. Tokens	~741k

Compatible Skills

These tools work well together with design-extract for enhanced workflows:

design-system-ops — semantic(0.47)+complementary+rare_topics+similar_pop+shared_platform (66%)
claude-design-auditor-skill — semantic(0.36)+complementary+rare_topics+similar_pop+shared_platform (63%)
design-dna — semantic(0.38)+complementary+rare_topics+similar_pop+shared_platform (62%)
bridge — semantic(0.17)+complementary+rare_topics+same_lang+similar_pop+shared_platform (60%)
styleseed — semantic(0.28)+complementary+rare_topics+similar_pop+shared_platform (59%)

More MCP Server Tools

Explore other popular mcp server tools:

n8n ⭐ 189.3k
ECC ⭐ 187.4k
everything-claude-code ⭐ 186.6k
dify ⭐ 142.3k
open-webui ⭐ 138.2k
gemini-cli ⭐ 104.5k
awesome-mcp-servers ⭐ 86.1k
servers ⭐ 86.1k
ragflow ⭐ 79.0k
lobehub ⭐ 77.5k

View all MCP Server tools →

Popular JavaScript Agent Tools

ECC ⭐ 187.4k · MCP Server
everything-claude-code ⭐ 186.6k · MCP Server
get-shit-done ⭐ 63.6k · Claude Skill
caveman ⭐ 62.7k · Claude Skill
career-ops ⭐ 46.6k · Agent Tool

Frequently Asked Questions

What is design-extract?

design-extract is 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. It is categorized as a MCP Server with 2.9k GitHub stars.

What programming language is design-extract written in?

design-extract is primarily written in JavaScript. It covers topics such as accessibility, agent-skill, ai.

How do I install or use design-extract?

You can find installation instructions and usage details in the design-extract GitHub repository at github.com/Manavarya09/design-extract. The project has 2.9k stars and 261 forks, indicating an active community.

What license does design-extract use?

design-extract is released under the MIT license, making it free to use and modify according to the license terms.

View on GitHub → Browse MCP Server tools