Installation

Install the CLI, the MCP server, and verify both.

CLI — one-shot via npx (recommended)

Run the CLI on demand without installing:

npx -y @webdesignhot/design-md add stripe

That’s the most common case. The npx wrapper fetches the latest version each time, no global state. If you want it cached, install globally:

npmpnpmyarnbun

npm install -g @webdesignhot/design-md

pnpm add -g @webdesignhot/design-md

yarn global add @webdesignhot/design-md

bun add -g @webdesignhot/design-md

Verify:

design-md --version
# 0.6.1

MCP server — for AI agent loops

Install separately. Different package, same catalog backend. The simplest configuration uses npx, so a global install is optional:

npx -y @webdesignhot/design-md-mcp --version

Then add an MCP config entry pointing at the binary. Config snippets by client below.

Claude Code

Add to ~/.config/claude-code/mcp.json (or via Settings → MCP):

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

Cursor

Add to ~/.cursor/mcp.json:

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

Codex

Add to ~/.codex/config.toml:

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

Cline

Add via Cline’s MCP Servers UI. Server name: design-md, command: npx, arguments: -y @webdesignhot/design-md-mcp.

Restart your editor after adding the config. The 8 tools (list_designs, get_design, search_designs, diff_designs, export_design, get_component, evaluate_token, install_design) appear in the agent’s tool list. See Client Setup for verification steps.

Verify both

npx -y @webdesignhot/design-md --version       # 0.6.1 or later
npx -y @webdesignhot/design-md-mcp --version   # 0.2.0 or later

Once both pass, you’re done.