Beginner

Designer to Developer Stack

Bridge the gap between design and code. Figma integration, UI component generation, browser preview, and styling tools.

5 servers19.6K tokens10% of context

Token Budget

19.6K used (9.8%)180.4K remaining

Playwright MCP10.3K (5.1%)

Figma MCP4.1K (2.1%)

Magic MCP (21st.dev)2.1K (1.0%)

Tailwind CSS MCP2.1K (1.0%)

Context7 MCP1.0K (0.5%)

This stack is lightweight. Plenty of room for your prompts and code context.

Config

Paste in ~/.claude.json

json

{
  "mcpServers": {
    "playwright-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp"
      ]
    },
    "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"
      }
    },
    "tailwind-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-tailwindcss"
      ]
    },
    "context7-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@upstash/context7-mcp"
      ]
    }
  }
}

Included Servers

Figma MCP

Community

ui-design

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

28954/wk4.1K tokens(2%)1y ago

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

Magic MCP (21st.dev)

21st.dev

ui-design

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

4.3k2.3k/wk2.1K tokens(1%)Official5d ago

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

Playwright MCP

Microsoft

testing

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

27.5k1433.4k/wk10.3K tokens(5%)Officialyesterday

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

Tailwind CSS MCP

Community

frontend

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

500189/wk2.1K tokens(1%)4mo ago

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

Context7 MCP

Upstash

documentation

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

46.5k213.3k/wk1.0K tokens(0.5%)Official2d ago

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