Using the MCP — The Force Design Spec

Connecting

The hosted server is shared-password authenticated. Replace <your-mcp-domain> below with the URL of your deployment. Add this to your MCP client configuration (e.g. .mcp.json or Claude Code settings):

{
  "mcpServers": {
    "the-force-design-spec": {
      "type": "http",
      "url": "https://<your-mcp-domain>/mcp",
      "headers": {
        "Authorization": "Bearer <MCP_PASSWORD>"
      }
    }
  }
}

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."