One terminal. One command per plugin. Suddenly Claude can talk to your designs, your databases, your repos, your tests, and your payment stack — without you writing a single line of integration code.

These are called MCP servers (Model Context Protocol), and they're the fastest way to turn Claude Code from a smart assistant into a full-stack operator.

This guide gives you the 5 essential plugins every builder needs — plus 3 bonus business plugins that unlock payments, team communication, and project management — all installed in seconds.

🧠 What Is MCP?

MCP (Model Context Protocol) is an open standard that lets Claude Code connect directly to external tools, APIs, and services.

Think of each MCP server as a plugin — you install it once, and Claude gains new abilities:

  • Read and edit your Figma designs
  • Run browser tests automatically
  • Manage your Notion workspace
  • Create pull requests on GitHub
  • Query and build databases on Supabase

One command installs each plugin. No config files to manually edit. No API wrappers to build.

⚡ Before You Start

Make sure you have:

  • Claude Code installed and running (setup guide here)
  • Node.js installed (v18+ recommended) — needed for npx commands
  • A terminal open inside Claude Code

To verify MCP servers are connected after installing, type /mcp inside Claude Code. You'll see all active servers listed.

🎨 The 5 Essential Plugins

1. Figma MCP — Design-to-Code in Seconds

What it does: Connects Claude directly to your Figma files. Claude can read your designs, extract styles, generate code from frames, and send live UI updates back to Figma.

Why it matters: You never have to manually translate a design into code again. Show Claude a Figma frame and say "build this" — it reads the layout, colors, spacing, and components, then writes the code.

How to Install

Option A: One-click (Recommended)

  1. Open the Figma desktop app (make sure it's updated to the latest version)
  2. Open any Figma design file
  3. Click the Figma menu → Plugins → Manage plugins
  4. Search for "Claude Code" and install the Figma plugin
  5. The plugin automatically configures both the remote and desktop MCP server

Option B: CLI command

claude mcp add figma -- npx -y figma-developer-mcp --stdio

Restart Claude Code after installing.

What You Can Do With It

  • "Build this landing page from my Figma design"
  • "Extract the color palette and typography from this file"
  • "Generate React components from the selected frames"
  • "Update the button styles in Figma based on my code changes"

Pro tip: Use Figma MCP + Playwright MCP together — design in Figma, build in Claude, test in the browser — all from one terminal.

2. Playwright MCP — Automated Browser Testing

What it does: Gives Claude the ability to control a real browser. It can navigate pages, click buttons, fill forms, take screenshots, and run end-to-end tests — all through natural language.

Why it matters: Testing is the part everyone skips. With Playwright MCP, you just say "test the login flow" and Claude opens a browser, runs through the steps, and reports what passed or failed. No test scripts to write manually.

How to Install

claude mcp add playwright -- npx @playwright/mcp@latest

Restart Claude Code after installing.

What You Can Do With It

  • "Open my app and test the signup flow"
  • "Take a screenshot of the homepage on mobile"
  • "Fill out the contact form and submit it"
  • "Navigate to the dashboard and verify all charts load"
  • "Run through the checkout process and flag any errors"

Authentication tip: Playwright opens a visible browser window. If your app requires login, Claude will show you the login page — you log in manually with your own credentials, then tell Claude to continue. Cookies persist for the session.

3. Notion MCP — Your Workspace on Autopilot

What it does: Connects Claude to your entire Notion workspace. It can search pages, create documents, update databases, manage tasks, and pull information — all through the official Notion API.

Why it matters: Instead of context-switching between your code editor and Notion, Claude can create PRDs, update project trackers, generate docs, and manage your knowledge base while you keep building.

How to Install

Step 1: Create a Notion Integration

  1. Go to notion.so/my-integrations
  2. Click "New integration"
  3. Name it something like Claude MCP
  4. Enable all capabilities (Read, Update, Insert)
  5. Copy your Internal Integration Token (starts with ntn_)

Step 2: Share your pages

  • Open any Notion page or database you want Claude to access
  • Click Share → Invite and add your Claude MCP integration

Step 3: Install the MCP server

claude mcp add notion -- npx -y @notionhq/notion-mcp-server

When prompted for environment variables, add your token:

claude mcp add notion -e OPENAPI_MCP_HEADERS='{"Authorization": "Bearer ntn_YOUR_TOKEN_HERE", "Notion-Version": "2022-06-28"}' -- npx -y @notionhq/notion-mcp-server

Restart Claude Code after installing.

What You Can Do With It

  • "Find my project tracker database and show overdue tasks"
  • "Create a new PRD page from this feature spec"
  • "Update the status of task #42 to Done"
  • "Search my workspace for anything related to onboarding"

4. GitHub MCP — Repos, PRs, and Issues From Your Terminal

What it does: Gives Claude full access to your GitHub repositories. It can create branches, open pull requests, review code, manage issues, search repos, and handle your entire Git workflow.

Why it matters: You can go from "build this feature" to "open a PR with the changes" without ever leaving Claude Code. Claude handles the code and the Git workflow.

How to Install

Option A: Remote server (Recommended — no token needed)

claude mcp add github --url https://api.githubcopilot.com/mcp/

This uses GitHub's hosted MCP server with OAuth — it will prompt you to authorize in your browser.

Option B: Local server with Personal Access Token

  1. Go to github.com/settings/tokens and create a Personal Access Token (classic) with repo scope
  2. Run:
claude mcp add github -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_YOUR_TOKEN_HERE -- npx -y @modelcontextprotocol/server-github

Restart Claude Code after installing.

What You Can Do With It

  • "Create a new branch called feature/auth-flow and commit my changes"
  • "Open a pull request with a summary of what I just built"
  • "Show me all open issues labeled 'bug'"
  • "Review the latest PR and flag any security concerns"
  • "Search my org's repos for anything using Stripe API v2"