Design Systems MCP Server

Name: Design Systems MCP Server
Author: southleft

southleft

开始使用源码仓库官网与文档

I'm your specialized design systems assistant. Ask me about components, tokens, patterns, and best practices.

接入配置

选择客户端，复制配置，再按项目文档补齐环境变量。

一键添加到 Cursor 一键添加到 VS Code

本地运行

claude mcp add design-systems -- npx mcp-remote https://design-systems-mcp.southleft-llc.workers.dev/mcp

~/.codex/config.toml

[mcp_servers.design-systems]
command = "npx"
args = ["mcp-remote", "https://design-systems-mcp.southleft-llc.workers.dev/mcp"]

# codex mcp add design-systems -- npx mcp-remote https://design-systems-mcp.southleft-llc.workers.dev/mcp

~/.cursor/mcp.json

{
  "mcpServers": {
    "design-systems": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://design-systems-mcp.southleft-llc.workers.dev/mcp"
      ]
    }
  }
}

.vscode/mcp.json

{
  "servers": {
    "design-systems": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://design-systems-mcp.southleft-llc.workers.dev/mcp"
      ]
    }
  }
}

~/.gemini/settings.json

{
  "mcpServers": {
    "design-systems": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://design-systems-mcp.southleft-llc.workers.dev/mcp"
      ]
    }
  }
}

claude_desktop_config.json

{
  "mcpServers": {
    "design-systems": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://design-systems-mcp.southleft-llc.workers.dev/mcp"
      ]
    }
  }
}

.trae/mcp.json

{
  "mcpServers": {
    "design-systems": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://design-systems-mcp.southleft-llc.workers.dev/mcp"
      ]
    }
  }
}

远程托管

claude mcp add --transport http design-systems https://design-systems-mcp.southleft.com/mcp