Top design & UI MCPs for Claude Code

MCPs for seeing and interacting with the web

Design and UI MCPs give Claude Code eyes and hands to interact with the web. Taking screenshots, clicking buttons, filling out forms, auditing pages, generating UI components -- all of this becomes possible directly from the terminal.

Playwright: E2E testing and web automation

The Swiss army knife of web automation. Playwright lets Claude Code navigate web pages, take screenshots, fill out forms, click on elements, and run complete end-to-end tests.

Installation

# Install Playwright if you haven't already
npm install -D @playwright/test
npx playwright install

# Add the MCP
claude mcp add playwright -- npx -y @playwright/mcp

JSON configuration

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

Available tools

Playwright exposes a rich collection of tools:

• browser_navigate: Navigate to a URL
• browser_take_screenshot: Take a page screenshot
• browser_snapshot: Capture the accessible DOM of the page
• browser_click: Click on an element
• browser_fill_form: Fill out a form
• browser_evaluate: Run JavaScript in the page
• browser_wait_for: Wait for an element or condition
• browser_network_requests: Monitor network requests

Use cases

• Visual verification: "Open my homepage locally and take a screenshot to check the rendering"
• Full E2E test: "Test the signup form: fill in the fields, submit the form, and verify the success message"
• Responsive debugging: "Take a screenshot of my page at mobile (375px) and desktop (1440px) and compare the two"
• Accessibility audit: "Navigate to my contact page, take an accessible DOM snapshot, and identify accessibility issues"

Chrome DevTools: Advanced web debugging

Access Chrome DevTools directly from Claude Code. Inspect the DOM, analyze performance, monitor network requests, and debug JavaScript, all without leaving your terminal.

Via the Playwright MCP (recommended)

The Playwright MCP covers the majority of Chrome DevTools use cases:

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

Playwright exposes DevTools-equivalent tools:

• browser_evaluate: Run JavaScript in the page context
• browser_network_requests: See all network requests
• browser_console_messages: Read console messages
• browser_take_screenshot: Screen capture
• browser_resize: Simulate a mobile device (resize the viewport)

Use cases

• JavaScript debugging: "Open my page, run a test script, and show me the console errors"
• Network analysis: "List all network requests on my page and identify those taking more than 500ms"
• Mobile debugging: "Resize the browser to 375px wide and take a screenshot of my page"

21st.dev Magic: Modern UI components

Generate modern, ready-to-use UI components directly from Claude Code. 21st.dev Magic provides React components inspired by the best web designs, with Tailwind CSS support.

Installation

# 21st.dev Magic requires an API key
claude mcp add magic -e TWENTY_FIRST_API_KEY=your-key -- npx -y @21st-dev/magic

JSON configuration

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic"],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-21st-dev-key"
      }
    }
  }
}

Available tools

• 21st_magic_component_builder: Generate a UI component from a description
• 21st_magic_component_inspiration: Find inspiration from existing components
• 21st_magic_component_refiner: Improve an existing component
• logo_search: Search for brand logos

Use cases

• Rapid creation: "Create a pricing table component with 3 plans, badges, and a CTA button"
• Inspiration: "Show me examples of modern hero sections for a SaaS site"
• Refinement: "Take this Card component and improve it with hover animations and better spacing"
• Prototyping: "Generate a complete login page with a form, validation, and error handling"

Puppeteer: Scraping and screenshots

Automate Chrome for scraping, screenshots, and testing. Puppeteer is Google's long-standing tool for controlling Chrome programmatically.

Installation

# Via the Claude command
claude mcp add puppeteer -- npx -y @modelcontextprotocol/server-puppeteer

JSON configuration

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

Available tools

• puppeteer_navigate: Navigate to a URL
• puppeteer_screenshot: Take a screenshot
• puppeteer_click: Click on an element
• puppeteer_fill: Fill a form field
• puppeteer_evaluate: Run JavaScript
• puppeteer_select: Select an option from a dropdown
• puppeteer_hover: Hover over an element

Use cases

• Web scraping: "Navigate to this site, extract all product prices, and present them in a table"
• Comparative screenshots: "Take a screenshot of the page before and after my CSS changes"
• Visual testing: "Verify that the 'Add to cart' button is visible and clickable on the product page"

Comparison: which MCP to choose?

Limitations and gotchas

These MCPs interact with browsers and external services. Here are the limitations to be aware of.

Quotas and resources

• Playwright and Puppeteer: no API quotas, but each browser instance consumes 200-500 MB of RAM. Running multiple tests in parallel can exhaust memory.
• 21st.dev Magic: subject to your plan limits (number of requests/month). Complex components consume more credits.
• Chrome DevTools: same memory limits as Playwright, since it uses a browser.

Latency and reliability

• Screenshots: taking a screenshot requires full page rendering. Heavy pages (SPAs with lots of JS) can take 3 to 10 seconds.
• Headless browsers: some sites block headless browsers (anti-bot). Tests may fail on protected third-party sites.
• 21st.dev Magic: component generation goes through a cloud API. Latency depends on the complexity of the requested component (1 to 15 seconds).

Common failure cases

• Playwright not installed: the MCP requires browsers to be installed locally. Run npx playwright install if tests fail with "browser not found."
• Port in use: Playwright and Puppeteer try to open a port for the browser. If the port is already taken, the MCP crashes.
• Expired 21st.dev key: the MCP starts but every call returns a 401 error.

Evaluating a third-party MCP

Next steps

• Build your first MCP workflow: Combine multiple MCPs in a practical workflow
• Top productivity MCPs: Gmail, Slack, Calendar, Figma
• Install and configure an MCP: Detailed installation guide
• Create a custom MCP in TypeScript: Build your own MCP