mcp-design-system-extractor vs filesystem

Side-by-side comparison to help you pick between these two MCP servers.

	mcp-design-system-extractor by freema	filesystem by modelcontextprotocol
Stars	★ 64	★ 85,748
30d uses	—	—
Score	46	77
Official	—	✓
Categories	Developer ToolsAI / LLM ToolsWeb Scraping	File SystemDeveloper ToolsProductivity
Language	TypeScript	TypeScript
Last commit	3 mo ago	this month

mcp-design-system-extractor · Summary

MCP server that extracts HTML, styles and component metadata from Storybook design systems to help with development.

filesystem · Summary

A feature-rich MCP server for filesystem operations with dynamic directory access control.

mcp-design-system-extractor · Use cases

Help developers extract HTML and styles from Storybook components to recreate them in other frameworks
Analyze design system components to identify patterns and dependencies for new feature development
Extract design tokens and theme information to ensure consistent styling across applications

filesystem · Use cases

Enable AI models to read and write project files during development
Allow Claude or other MCP clients to browse and analyze codebases
Provide secure sandboxed access to specific directories for content generation

mcp-design-system-extractor · Install

Using Claude CLI (Recommended)

claude mcp add design-system npx mcp-design-system-extractor@latest \
  --env STORYBOOK_URL=http://localhost:6006

Using npm

npm install -g mcp-design-system-extractor

Configuration

Add to Claude Desktop config.json:

{
  "mcpServers": {
    "design-system": {
      "command": "node",
      "args": ["/path/to/dist/index.js"],
      "env": {
        "STORYBOOK_URL": "http://localhost:6006"
      }
    }
  }
}

filesystem · Install

Installation

Using NPX

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/path/to/allowed/directory"
      ]
    }
  }
}

Using Docker

{
  "mcpServers": {
    "filesystem": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "--mount", "type=bind,src=/path/to/allowed/dir,dst=/projects/allowed/dir",
        "mcp/filesystem",
        "/projects"
      ]
    }
  }
}

VS Code Extension

Click the installation buttons in the README to install directly in VS Code.

Comparison generated from public README + GitHub signals. Last updated automatically.