MCP server · Pro

Design systems, inside your agent

The Design Contracts MCP server puts every scanned system — and your own authored contracts — one tool call away in Claude Code, Claude Desktop, Cursor and any MCP-compatible client. Ask for a site's tokens mid-build and the agent answers with the real system, not a guess.

Tools

scan_tokens

Scan a public site and extract its full token set on demand.

API key

get_tokens

Fetch the cached Design Contract tokens for a domain, instantly.

public

layout_profile

Layout DNA — containers, breakpoints, grid system, archetypes.

public

research_artifacts

Find official design-system repos, Figma files and docs for a brand.

API key

compose_pack

Compose a full installable Design Contract pack from a scan.

API key

Client config · Claude Desktop / Claude Code / Cursor

{
  "mcpServers": {
    "designcontracts": {
      "command": "npx",
      "args": ["-y", "github:byronwade/designcontracts.sh#mcp-server-wrapper.js"],
      "env": {
        "DESIGNCONTRACTS_API_KEY": "<your-pro-api-key>",
        "DESIGNCONTRACTS_API_URL": "https://designcontracts.sh/api/mcp"
      }
    }
  }
}

How agents use it

01 You ask: “build this dashboard in stripe.com's design language.”
02 The agent calls get_tokens and layout_profile.
03 It builds with the site's real palette, scale and grid — and compose_pack pins the contract into your repo so it stays true over time.