Skip to content
appsgit

Design Extract

Design Extract is an MCP server that adds web browsing tools to AI assistants such as Claude Desktop, Claude Code and Cursor. Extract any website's complete design system with one command. It has 4,175 GitHub stars, is released under the MIT license and runs locally with npx -y designlang.

github.com/Manavarya09/design-extract (opens in a new tab)

View on GitHub (opens in a new tab)

Install Design Extract

Generated from the server's published package. Replace your-value with your own values.

Claude Desktop

claude_desktop_config.json
{
  "mcpServers": {
    "design-extract": {
      "command": "npx",
      "args": [
        "-y",
        "designlang"
      ]
    }
  }
}

Settings > Developer > Edit Config. macOS: ~/Library/Application Support/Claude/, Windows: %APPDATA%\Claude\. Restart Claude Desktop afterwards.

Claude Code

claude mcp add --transport stdio design-extract -- npx -y designlang

Cursor

.cursor/mcp.json
{
  "mcpServers": {
    "design-extract": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "designlang"
      ]
    }
  }
}

Project file; use ~/.cursor/mcp.json to enable it in every project.

VS Code

.vscode/mcp.json
{
  "servers": {
    "design-extract": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "designlang"
      ]
    }
  }
}

Config formats checked against the official docs on Oct 7, 2026: modelcontextprotocol.io (opens in a new tab), code.claude.com (opens in a new tab), cursor.com (opens in a new tab), code.visualstudio.com (opens in a new tab).

About Design Extract

Built by Manav Arya Singh ( @Manavarya09 ) Atlas Cloud — powers OpenAI-compatible --smart classification. For AI coding workflows, try the Atlas Cloud coding plan .

  • ai
  • claude-code-plugin
  • cli
  • css
  • design-system
  • design-tokens
  • npx
  • playwright
  • tailwind
  • web-scraping

Similar MCP servers

More web & browsing MCP servers

All Web & browsing

FAQ

Design Extract FAQ

Still curious? Email info@appsgit.com.

What is Design Extract?

Design Extract is an MCP server that adds web browsing tools to AI assistants such as Claude Desktop, Claude Code and Cursor. Extract any website's complete design system with one command. It has 4,175 GitHub stars, is released under the MIT license and runs locally with npx -y designlang. The source code is at github.com/Manavarya09/design-extract.

How do I install the Design Extract MCP server?

Add the command npx -y designlang to your MCP client: put it in claude_desktop_config.json for Claude Desktop, run claude mcp add for Claude Code, or add it to .cursor/mcp.json (Cursor) or .vscode/mcp.json (VS Code). The snippets on this page are ready to paste.

Is Design Extract free?

The server is open source under the MIT license, so running it is free. It does not declare any required API key.

Is Design Extract actively maintained?

The most recent commit was on Sep 29, 2026. The latest release is v13.3.2, published Sep 23, 2026. appsgit only lists MCP servers with a commit in the last six months and re-checks every server daily.