StackMCP

Designer to Developer Stack for Claude Code

Beginner5 servers19.6K tokens

Configuration

{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_ACCESS_TOKEN"
      }
    },
    "magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "YOUR_TWENTY_FIRST_API_KEY"
      }
    },
    "playwright-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp"
      ]
    },
    "tailwind-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-tailwindcss"
      ]
    },
    "context7-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@upstash/context7-mcp"
      ]
    }
  }
}

CLI Commands

Alternatively, add each server via the Claude Code CLI:

claude mcp add figma-mcp -e FIGMA_ACCESS_TOKEN=YOUR_FIGMA_ACCESS_TOKEN -- npx -y figma-mcp
claude mcp add magic-mcp -e TWENTY_FIRST_API_KEY=YOUR_TWENTY_FIRST_API_KEY -- npx -y @21st-dev/magic
claude mcp add playwright-mcp -- npx -y @playwright/mcp
claude mcp add tailwind-mcp -- npx -y mcp-tailwindcss
claude mcp add context7-mcp -- npx -y @upstash/context7-mcp

Where to save

Paste the config above into:

~/.claude.json

Environment Variables

Replace the YOUR_ placeholders with your actual values.

FIGMA_ACCESS_TOKENrequired

Figma personal access token

Used by: Figma MCP

TWENTY_FIRST_API_KEYrequired

21st.dev API key

Used by: Magic MCP (21st.dev)

What’s in this stack

Figma MCP8 tools

Access Figma designs, extract design tokens, inspect layers, and bridge the gap between design and code from your AI editor.

Pull design tokens, component specs, and layout details directly from Figma. The single source of truth for your UI.

Magic MCP (21st.dev)4 tools

Generate professional React and Tailwind UI components using 21st.dev's component library and AI builder from your editor.

Generate production-ready UI components from descriptions. Bridges the gap between 'this is what it should look like' and actual code.

Playwright MCP20 tools

Automate browser interactions, take screenshots, fill forms, and test web applications using Microsoft Playwright from your AI editor.

Preview your implementation in a real browser and compare it to the design. Catch visual mismatches before they ship.

Tailwind CSS MCP4 tools

Full Tailwind CSS v3/v4 context including utilities, config, themes, plugins, and integration guides for your AI editor.

Look up utility classes and design tokens instantly. Stops your AI from hallucinating non-existent Tailwind classes.

Context7 MCP2 tools

Pull up-to-date documentation and code examples for any library directly into your prompt context using the Context7 API.

Access current docs for React, Vue, or whatever UI framework you're using. Design-to-code accuracy depends on up-to-date API knowledge.

Other editors

CursorVS CodeWindsurfClaude DesktopContinue