MCP Setup Config Pack

What This Is

Pre-configured MCP server definitions for the three most useful design system connections. Drop them into your project’s .mcp.json, add your API tokens, and Claude Code can read your Figma files, create GitHub PRs, and run browser tests.

How to Use

1. Download the config pack
2. Copy the server definitions you need into your project’s .mcp.json
3. Replace the placeholder API tokens with your real ones
4. Restart Claude Code. The tools appear automatically.

Config: Figma MCP

Lets Claude read your Figma files, inspect components, check token values, and audit naming.

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/figma-mcp-server"],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "YOUR_FIGMA_TOKEN_HERE"
      }
    }
  }
}

Get your token: Figma > Settings > Personal Access Tokens > Generate

What you can do:

• “Read the Button component from my Figma file”
• “Check what tokens are used on the Card component”
• “Audit naming conventions across all components”

Config: GitHub MCP

Lets Claude create branches, commits, and pull requests from audit results or generated code.

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/github-mcp-server"],
      "env": {
        "GITHUB_TOKEN": "YOUR_GITHUB_TOKEN_HERE"
      }
    }
  }
}

Get your token: GitHub > Settings > Developer Settings > Personal Access Tokens > Fine-grained

What you can do:

• “Create a PR with the token naming fixes”
• “Check if there are open issues about color tokens”
• “Commit the generated component spec”

Config: Playwright MCP

Lets Claude open your Storybook or docs site, take screenshots, and run visual checks.

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/playwright-mcp-server"]
    }
  }
}

No token needed. Playwright runs locally.

What you can do:

• “Open my Storybook and screenshot all Button variants”
• “Check color contrast on the Card component in dark mode”
• “Navigate to my docs site and verify the token table is correct”

Combined Config

All three servers in one .mcp.json:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/figma-mcp-server"],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "YOUR_FIGMA_TOKEN_HERE"
      }
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/github-mcp-server"],
      "env": {
        "GITHUB_TOKEN": "YOUR_GITHUB_TOKEN_HERE"
      }
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/playwright-mcp-server"]
    }
  }
}

Security Notes

• Never commit .mcp.json with real tokens. Add it to .gitignore.
• Use environment variables for tokens in shared repos.
• Figma tokens have read access by default. That’s all you need for auditing.
• GitHub tokens: use fine-grained tokens scoped to specific repos.