· 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:
| Primitive | What it is | A designer's example |
|---|---|---|
| Tools | Functions Claude can call to do something | Read the variables in a Figma frame, search Slack |
| Resources | Data used as context | The contents of a Notion page |
| Prompts | Reusable prompt templates | Figma'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 Claude | Where it lives | |
|---|---|---|
| MCP server | Access to read and act in another tool | Config in ~/.claude.json or .mcp.json |
| Skill | Instructions for doing a task your way | A folder with a SKILL.md file |
| Plugin | A package that can contain MCP servers and skills | Installed 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:
-
Find the official server address in the vendor's documentation.
-
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...] -
Sign in. Open Claude Code, type
/mcp, pick the server and follow the browser login. -
Check it. Run
/mcpagain to see the status, orclaude mcp listfrom the terminal.
For the three tools in the title, here is what each vendor's documentation says:
| Tool | How to connect | Note |
|---|---|---|
| Notion | claude mcp add --transport http notion https://mcp.notion.com/mcp | Given as an example in the Claude Code docs |
| Figma | claude plugin install figma@claude-plugins-official | Full walkthrough in Figma MCP and Claude Code |
| Slack | Official server at https://mcp.slack.com/mcp | Slack 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:
| Scope | Available in | Shared with your team | Stored in |
|---|---|---|---|
local (default) | Current project only | No | ~/.claude.json |
project | Current project only | Yes, through git | .mcp.json at the project root |
user | Every project on your machine | No | ~/.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 itWhat 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:
- Who publishes it. Prefer the vendor's own server. For a server from a personal repo, read the source or skip it.
- What it asks for. The sign-in screen lists read and write scopes. If you only need to read, don't grant write.
- An unfamiliar
.mcp.jsonin 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, runclaude mcp reset-project-choices. - Keys in commands.
claude mcp addaccepts a--headerwith 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
- Model Context Protocol, What is the Model Context Protocol (MCP)?
- Model Context Protocol, Architecture overview
- Anthropic, Connect Claude Code to tools via MCP
- Anthropic, Discover plugins
- Slack, Slack MCP server
- Figma, Remote server installation
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.
You might also like
What is Claude Code? Install it and run your first session, no coding needed
A designer's walkthrough for people who have never opened a terminal: what Claude Code is, what you need, installing on macOS and Windows, a safe first session, and fixes for the usual errors. Every command comes from Anthropic's docs.
Working· 2026-10-04
Claude Code for designers: turning a Figma design into a working page
How I use Claude Code as a designer to get from Figma frames to a real, maintained website: what to set up, how to write rules the agent follows, a six-step workflow, and the mistakes I made building this site.
Working· 2026-10-04
What is Claude? A guide for people who have never used AI
Claude is Anthropic's AI assistant. This guide covers what it can do, how the free and paid plans differ, how to run your first conversation, and where Claude tends to get things wrong. Every feature and price was checked against Anthropic's own pages.
Working· 2026-10-04