Skip to main content
← Back to list

· Working

What is MCP? Connecting Claude to Figma, Slack and Notion

MCP (Model Context Protocol) is the open standard that lets Claude read data from, and act in, the tools you already use. A designer's explanation of the concept, how to add a server to Claude Code with claude mcp add, the three install scopes, and what to check before trusting a server.

MCP (Model Context Protocol) is an open standard that lets AI applications such as Claude connect to outside tools and data. Each tool ships an "MCP server". You add it to Claude Code with claude mcp add, sign in through /mcp, and Claude can then read your Figma file, your Slack threads or your Notion pages directly.

This post stays at the concept level: what MCP is, how it works, and how to install servers without handing your accounts to a stranger. The hands-on Figma workflow (pulling tokens, building components, rate limits) lives in Figma MCP and Claude Code. I checked every command below against the official documentation on 5 October 2026.

What is MCP?

The official site, modelcontextprotocol.io, defines MCP as an open-source standard for connecting AI applications to external systems, and compares it to a USB-C port. One connector shape, many devices.

Before a shared standard, getting Claude to read Notion meant someone writing a Claude-specific integration, and then another one for every other AI tool. With MCP, Notion builds one server and any MCP-capable application can plug into it. Claude, ChatGPT, VS Code and Cursor are all on the list of supported clients.

For a designer the practical change is small but daily: you stop screenshotting frames and pasting Slack threads into a chat box. Claude fetches the part it needs when it needs it.

How does MCP work?

The MCP architecture docs describe three participants:

  • Host: the AI application you are using, such as Claude Code or Claude Desktop.
  • Client: the piece inside the host that holds one connection to one server.
  • Server: the program that provides data and actions. Figma, Notion and Slack each run their own.

A server can run on your machine (a local server, talking over stdio) or on the vendor's infrastructure (a remote server, talking over Streamable HTTP). Most servers from large vendors are remote, so setup is a URL and a sign-in.

A server offers Claude three kinds of things:

PrimitiveWhat it isA designer's example
ToolsFunctions Claude can call to do somethingRead the variables in a Figma frame, search Slack
ResourcesData used as contextThe contents of a Notion page
PromptsReusable prompt templatesFigma's create_design_system_rules prompt

When you ask "read the spec page in Notion and compare it with this frame", Claude picks the matching tools from the connected servers, calls them, and carries on with the results.

How is MCP different from skills and plugins?

These three get mixed up because they tend to arrive together.

What it gives ClaudeWhere it lives
MCP serverAccess to read and act in another toolConfig in ~/.claude.json or .mcp.json
SkillInstructions for doing a task your wayA folder with a SKILL.md file
PluginA package that can contain MCP servers and skillsInstalled from a plugin marketplace

A real example: the official Figma plugin bundles the MCP server configuration with a set of skills that tell Claude how to use those tools well. I cover skills in Claude Code skills explained.

How do you add an MCP server to Claude Code?

If Claude itself is new to you, read what Claude is first. If Claude Code isn't installed yet, see installing Claude Code. Then:

  1. Find the official server address in the vendor's documentation.

  2. Add the server. For a remote server:

    claude mcp add --transport http <name> <url>

    For a local server, the command that starts it goes after a -- separator:

    claude mcp add [options] <name> -- <command> [args...]
  3. Sign in. Open Claude Code, type /mcp, pick the server and follow the browser login.

  4. Check it. Run /mcp again to see the status, or claude mcp list from the terminal.

For the three tools in the title, here is what each vendor's documentation says:

ToolHow to connectNote
Notionclaude mcp add --transport http notion https://mcp.notion.com/mcpGiven as an example in the Claude Code docs
Figmaclaude plugin install figma@claude-plugins-officialFull walkthrough in Figma MCP and Claude Code
SlackOfficial server at https://mcp.slack.com/mcpSlack lists Claude Code as a supported client; a workspace admin has to approve the app

I'm not giving a claude mcp add line for Slack. Slack's docs require a registered app and admin approval, so at most companies the first step is a message to your workspace admin.

Should a server be available in one project or all of them?

The --scope flag decides where a server shows up:

ScopeAvailable inShared with your teamStored in
local (default)Current project onlyNo~/.claude.json
projectCurrent project onlyYes, through git.mcp.json at the project root
userEvery project on your machineNo~/.claude.json

My rule: servers tied to my own accounts (my Figma, my Notion) go in user. Only servers the whole team should use identically belong in .mcp.json. This site's repository has no .mcp.json today, so no MCP configuration travels with the code.

Three management commands you will use:

claude mcp list           # every server you've added
claude mcp get notion     # details for one server
claude mcp remove notion  # remove it

What are the risks of installing an MCP server from an unknown source?

The Claude Code MCP page says it plainly: verify you trust each server before connecting it, because servers that fetch external content can expose you to prompt injection. That means text inside the returned data that tries to steer Claude into doing something you never asked for.

An MCP server can read your Notion or Slack, and may be able to write to them. Treat adding one like installing software that has access to your work accounts.

What I check before adding a server:

  1. Who publishes it. Prefer the vendor's own server. For a server from a personal repo, read the source or skip it.
  2. What it asks for. The sign-in screen lists read and write scopes. If you only need to read, don't grant write.
  3. An unfamiliar .mcp.json in a repo. When you open a project that has one, Claude Code asks you to approve its servers. Read the file before you approve. To reset those decisions, run claude mcp reset-project-choices.
  4. Keys in commands. claude mcp add accepts a --header with an API key. Project-scoped config is committed to git, and so is anything inside it.

Which server should a designer start with?

One server, connected to the tool you open most. For me that's Figma. With it, Claude reads real variables instead of guessing colours from a screenshot, and that has done more for keeping a design system consistent between file and code than anything else I've added.

If you are just starting:

  • Read Claude Code for designers for the overall workflow before adding tools.
  • Write your design rules down, for example in a DESIGN.md, so Claude knows what system the Figma data has to match.
  • Add a second server only when you catch yourself copying and pasting from that tool again and again.

The system of more than 50 components I built for Joyme's first release is in the Joyme case study. If you want to talk about design-to-code workflows with AI, my about page has the ways to reach me.

Sources

Commands, install scopes and security guidance checked against these pages on 5 October 2026.

Frequently asked questions

What does MCP stand for?
Model Context Protocol. It is an open-source standard for connecting AI applications to external systems such as files, databases, search engines and work tools. The official site compares it to a USB-C port: one shared connector for many devices.
What is the command to add an MCP server to Claude Code?
For a remote server: claude mcp add --transport http <name> <url>. The Claude Code docs give Notion as an example: claude mcp add --transport http notion https://mcp.notion.com/mcp. Then type /mcp inside Claude Code to sign in if the server needs it.
Are MCP servers safe to install?
It depends on the server. The Claude Code docs tell you to verify that you trust each server before connecting it, because servers that fetch external content can expose you to prompt injection. Prefer servers published by the software vendor itself.
How is MCP different from a Claude Code skill?
MCP gives Claude access: read a Figma file, search Slack, edit a Notion page. A skill is a file of instructions that teaches Claude to do a task your way. They often work together, and a plugin can bundle both.