extract-design-system

by arvindrk · Media & Design · ★ 253

extract-design-system is an MCP server by arvindrk. Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Generates JSON and CSS custom properties for local projects. Available as an AI agent skill (Claude, Cursor, Codex) and standalone CLI. It has 253 GitHub stars and ranks #191 of 2017 in Media & Design by stars.

Category: Media & Design
Author: arvindrk
GitHub stars: 253
This week: Tracking since 18 Oct 2026
Weekly downloads: 109
Language: TypeScript
License: MIT (open source)
Last update: 2026-09-05 (49 days ago)
Links: Source Website npm

agent-skills
automation
brand-audit
claude-code-skills
claude-skills
cli
css
cursor-skills
design-md
design-ops
design-system
design-tokens
+8 more

How to install extract-design-system

extract-design-system is published on npm as extract-design-system, and it depends on @modelcontextprotocol/sdk. These steps assume it runs as a local stdio server, which is the usual setup.

Check the README. Confirm the start command and note any API keys or environment variables it needs (pass them with -e KEY=value or an env block). You need Node.js for npx.

Add it to Claude Code from a terminal:

claude mcp add extract-design-system -- npx -y extract-design-system

Or add it to Cursor or Claude Desktop in .cursor/mcp.json or claude_desktop_config.json:

{
  "mcpServers": {
    "extract-design-system": {
      "command": "npx",
      "args": [
        "-y",
        "extract-design-system"
      ]
    }
  }
}

Restart the client and check it. Run claude mcp list, or open the client's MCP settings, and confirm extract-design-system and its tools are listed. The install guide covers VS Code and Codex.

Also listed in

Maintain this project? Get it featured ($99/mo, pinned at the top of Media & Design) or see what featuring includes.

Report a problem with this listing

Frequently asked questions

What is extract-design-system?

extract-design-system is an MCP server by arvindrk in the Media & Design category. Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Generates JSON and CSS custom properties for local projects. Available as an AI agent skill (Claude, Cursor, Codex) and standalone CLI. It has 253 GitHub stars and ranks #191 of 2017 in Media & Design by stars.

Is extract-design-system free and open source?

Yes. extract-design-system is published under the MIT license, so you can run, modify and self-host it at no cost. If it connects to a paid service, that service's own pricing and API terms still apply. Check the repository for the exact license text before using it commercially.

What are the alternatives to extract-design-system?

Other Media & Design projects on MCP Harbor include Shotkiln, remotion, LocalAI. Each alternative links to its own page with stars, license and recent activity. The Media & Design category ranks all 2017 by stars, and you can re-sort it by growth this week.

Alternatives to extract-design-system

Shotkiln★ FeaturedMCP Registry

shotkiln.com

Screenshot, PDF and Open Graph image API for AI agents: capture pages, render PDFs, make OG images.

remotion★ 66,837

remotion-dev · TypeScript

🎥 Make videos programmatically with React

LocalAI★ 49,903

mudler · Go+305 stars this week (+0.6%)

LocalAI is the open-source AI engine. Run any model - LLMs, vision, voice, image, video - on any hardware. No GPU required.

chakra-ui★ 40,702

chakra-ui · TypeScript

Chakra UI is a component system for building SaaS products with speed ⚡️

next-ai-draw-io★ 36,394

DayuanJiang · TypeScript+92 stars this week (+0.3%)

Draw and edit draw.io diagrams by chatting with an AI. Web app, desktop app, and an MCP server for Claude Code, Cursor, Codex and VS Code.

agentscopeTrending★ 33,797

agentscope-ai · Python+378 stars this week (+1.1%)

Build and run agents you can see, understand and trust.

All 2017 Media & Design MCP servers →

Data last updated 25 October 2026. Stars and downloads are refreshed every day from GitHub and npm.