Using the MCP — The Force Design Spec

Connecting

The hosted server is at https://the-force-design-spec-mcp.public.prd.shared.perforce.com/mcp and uses Perforce SSO. Claude Code and Claude Desktop connect through force-mcp-connect, a small local connector that signs you in with a browser window and relays requests to the server. It runs straight from GitHub with npx, so there's nothing to download. You need Node 22 or later, and Edge or Chrome.

Step 1: Sign in

Run this in a terminal, then sign in in the browser window that opens. The window closes when you're done.

npx -y github:Perforce-Shared-Services/pd-force-mcp-connect login

Step 2: Add the connector to your client

Claude Code: run this in a terminal.

claude mcp add --scope user the-force-design-spec -- npx -y github:Perforce-Shared-Services/pd-force-mcp-connect

Claude Desktop: add this to claude_desktop_config.json, then restart Claude Desktop. If Claude Desktop can't find npx, replace it with the full path from which npx (macOS) or where npx (Windows).

{
  "mcpServers": {
    "the-force-design-spec": {
      "command": "npx",
      "args": ["-y", "github:Perforce-Shared-Services/pd-force-mcp-connect"]
    }
  }
}

Or let Claude Code set it up

Paste this prompt into Claude Code instead of running steps 1 and 2 yourself. It checks your setup, removes an old password-based entry if you have one, signs you in, and adds the server.

Set up The Force Design Spec MCP server for me in Claude Code, at user scope.

1. Check that `node --version` is 22 or later. If it isn't, stop and tell me to install Node 22+.
2. Check that I can reach the connector repo: `git ls-remote https://github.com/Perforce-Shared-Services/pd-force-mcp-connect HEAD`. If that fails, stop and tell me I need GitHub access to the Perforce-Shared-Services org (for example, run `gh auth login` and then `gh auth setup-git`).
3. Run `claude mcp list`. Remove any existing entry for The Force Design Spec, whether it's named `the-force-design-spec` or points at `the-force-design-spec-mcp.public.prd.shared.perforce.com`. Use `claude mcp remove <name> -s <scope>` for every scope it appears in.
4. Tell me a browser window is about to open for Perforce sign-in. Then run `npx -y github:Perforce-Shared-Services/pd-force-mcp-connect login` with a 5-minute timeout, and wait while I sign in. It prints "Signed in." when done.
5. Run `claude mcp add --scope user the-force-design-spec -- npx -y github:Perforce-Shared-Services/pd-force-mcp-connect`.
6. Verify: `claude mcp get the-force-design-spec` should show "Connected", and `npx -y github:Perforce-Shared-Services/pd-force-mcp-connect status` should show `"passedProxy": true`.
7. Tell me to run `/mcp` or restart Claude Code so this session picks up the server.

Don't print the contents of ~/.force-mcp/session.json. It holds my SSO session.

Your sign-in lasts 7 days. When it expires, the connector opens the sign-in window again on the next request. To check your sign-in, run npx -y github:Perforce-Shared-Services/pd-force-mcp-connect status. If the sign-in window can't finish, run login --paste and paste the SSO cookie from your usual browser instead.

For local development on the spec itself, run the stdio server from mcp/. See the README for details.

Tools

get_design_context

Entry-point philosophy, principles, token conventions, and (optionally) a framework bridge. Start here. Accepts framework and mode.

list_patterns

Lists available patterns by category: components, layouts, compositions. Accepts mode.

get_pattern

Full prose for a single pattern file. Accepts name and mode.

get_tokens

Semantic tokens with dot-path, type, resolved value, and description. Optionally filter by category.

list_bridges

Available framework bridges (React + Radix + Tailwind, etc.).

get_bridge

Full stack-specific translation guide for the named framework.

search

Case-insensitive text search across design.md, patterns, bridges, context docs, and token JSON.

Interpretation Modes

Three tools — get_design_context, list_patterns, and get_pattern — accept an optional mode parameter. The agent picks the mode based on the user's prompt and passes it through. Tokens, design principles, and accessibility requirements are binding in both modes; only pattern prescriptiveness changes.

Strict default

Treat the spec as a specification. Patterns are prescriptive — follow anatomy, variants, states, and guidance as written. Deviate only when the spec is silent.

Use when the user is implementing a real component, page, or feature.

Prompt keywords: build, implement, add, fix, ship, wire up.

Creative

Treat the spec as a foundation for exploration. Patterns become reference material; feel free to invent new anatomy, variants, and compositions when they serve the idea better.

Use when the user is exploring, ideating, or prototyping.

Prompt keywords: ideate, explore, brainstorm, try, what if, unique, novel, mock up options.

What binds in both modes

Tokens — all colors, spacing, radius, typography, motion, and shadow values must come from tokens. No arbitrary hex, px, or ms values.
Accessibility — focus rings, contrast, keyboard support, and ARIA requirements remain binding.
Principles — P1–P8 in design.md still apply (hierarchy, contrast, restraint, explicit-over-computed, etc.).

Example prompts

Strict

"Build the settings page using the Settings Page composition."

Strict

"Add a delete button to the user row — follow the destructive button pattern."

Creative

"Ideate three unique dashboard layouts for our admin area."

Creative

"What if we reimagined the data table as something more novel? Explore options."