@webdesignhot/design-md-mcp

MCP server exposing the webdesignhot.com DESIGN.md catalog (285+ real-brand design systems) to Claude Code, Claude Desktop, Cursor, Codex, Cline, and any other MCP-aware AI agent.

Why

When an AI coding agent picks up a project, it usually has no idea what your visual style is. You can paste tokens into the system prompt, hand it a Figma export, or — best — point it at a single DESIGN.md file. This MCP server takes that one step further: agents can browse 285+ real-brand design systems (Linear, Stripe, Vercel, Anthropic, Notion, Apple, Tesla, BMW, …) and install one in your project without you ever leaving the chat.

Tools

• list_designs — list every design (with featured_only / category / tag filters)
• get_design — full DESIGN.md (webdesignhot/0.1) source for a slug
• search_designs — fuzzy search by name, tagline, tags, categories
• diff_designs — token-level diff between any two designs
• export_design — render tokens to tailwind / css / dtcg / figma
• install_design — get the npx command + raw markdown to install one

Install

Claude Code (CLI / IDE extension)

Easiest — let the claude CLI write the config for you. Pick a scope:

# Local (default) — only this project, only you. Written to ~/.claude.json
# under the project key. Teammates won't see it.
claude mcp add design-md -- npx -y @webdesignhot/design-md-mcp

# Project — committed to the repo's .mcp.json so teammates get it on clone.
claude mcp add --scope project design-md -- npx -y @webdesignhot/design-md-mcp

# User — every project on your machine, written to ~/.claude.json globals.
claude mcp add --scope user design-md -- npx -y @webdesignhot/design-md-mcp

Verify with /mcp inside Claude Code — design-md should be listed with 6 tools (list_designs, get_design, search_designs, diff_designs, export_design, install_design).

Manual alternative for --scope project — drop .mcp.json in the repo root:

{
  "mcpServers": {
    "design-md": {
      "command": "npx",
      "args": ["-y", "@webdesignhot/design-md-mcp"]
    }
  }
}

Note: Claude Code does not read claude_desktop_config.json — that's Claude Desktop's file. Mixing them up is the #1 wrong path.

Claude Desktop

Different application, different config file. Edit:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "design-md": {
      "command": "npx",
      "args": ["-y", "@webdesignhot/design-md-mcp"]
    }
  }
}

Restart Claude Desktop after editing.

Cursor

Drop a JSON file at one of two paths — same shape as Claude:

• Global: ~/.cursor/mcp.json
• Project: .cursor/mcp.json (in repo root)

{
  "mcpServers": {
    "design-md": {
      "command": "npx",
      "args": ["-y", "@webdesignhot/design-md-mcp"]
    }
  }
}

Toggle the server on under Settings → Features → Model Context Protocol (or the marketplace at cursor.directory for one-click adds on community servers).

Codex (OpenAI CLI / IDE extension)

Codex uses TOML, not JSON. Edit:

• Global: ~/.codex/config.toml
• Project: .codex/config.toml (for trusted projects only)

[mcp_servers.design-md]
command = "npx"
args = ["-y", "@webdesignhot/design-md-mcp"]

The CLI and the IDE extension share this config — set it once, both clients see it.

Cline / Roo / Continue / etc.

Any MCP client supporting stdio transports works. After install the binary is exposed as design-md-mcp — run it directly, or invoke via npx -y @webdesignhot/design-md-mcp. Most clients accept the same { "command": "npx", "args": ["-y", "@webdesignhot/design-md-mcp"] } JSON shape Claude uses.

Use it

Once connected, ask your agent things like:

"List the top 10 dark editorial design systems."

"Install Stripe's DESIGN.md into this project."

"Diff Linear and Vercel — what changes if I switch?"

"Export Anthropic's tokens as Tailwind config."

The agent calls the right tool, the response flows back, and you stay in the IDE.

License

MIT — © 2026 webdesignhot