Skip to content
Blog

What is MCP for designers? A practical explanation

By Attuna ·

MCP, the Model Context Protocol, is an open standard for connecting AI applications to outside tools and data. For designers, it’s the mechanism that lets a coding agent such as Claude Code read a Figma file, query a component library or fetch your saved references while it works, instead of you copying that context into the chat by hand.

The short version

  • An AI application (the host) connects to one or more MCP servers.
  • Each server offers capabilities, mainly tools the AI can call and resources it can read.
  • The AI decides when to use them during a task, within the permissions you give it.

Hosts, clients and servers

The MCP architecture overview defines three participants:

  • MCP host: the AI application that coordinates everything. Claude Code, Claude Desktop and Visual Studio Code are the examples the overview gives.
  • MCP client: a component inside the host that keeps a connection to one server. The host creates one client per server.
  • MCP server: a program that provides context to clients. It can run on your machine or remotely.

In practice you rarely deal with clients directly. You add a server to your AI tool, and the tool handles the connection.

What servers offer: tools, resources and prompts

The overview describes three core things a server can expose:

  • Tools: “executable functions that AI applications can invoke to perform actions”, such as searching a library or reading a file.
  • Resources: data sources that provide context, such as file contents or database records.
  • Prompts: reusable templates that structure an interaction.

Tools are what you’ll meet most often. When the AI starts, it asks each server which tools exist, reads their descriptions, and calls one when the task needs it. Tool results can include text and images, which is why MCP is useful for visual work.

Local and remote servers

MCP supports two transports:

  • stdio for servers running as a local process on your machine, such as a filesystem server.
  • Streamable HTTP for remote servers on the internet. These support standard authentication such as bearer tokens and API keys, and the spec recommends OAuth to obtain tokens.

Examples that matter to product designers

  • Design files: Figma’s MCP server can pass variables, components and layout data from a file to a coding agent. We cover setup in how to use Figma MCP with Claude Code.
  • Component libraries: a server can describe your components and their props, so the agent uses them instead of inventing new ones.
  • References and direction: a server can return the references and principles relevant to a task, with images.
  • Browsers: browser tools let an agent open a page and take a screenshot to check its work.
  • Product context: issue trackers and docs give the agent the brief and acceptance criteria.

What it looks like in Claude Code

In Claude Code, you add a remote server with one command. This example from the Claude Code MCP docs connects Notion:

Terminal
claude mcp add --transport http notion https://mcp.notion.com/mcp

Inside a session, /mcp shows which servers are connected and handles sign-in for servers that use OAuth. After that you can ask for things in plain language, and Claude calls the relevant tools. The full workflow for design tasks is in how to use MCP with Claude Code for better design.

Limits, security and permissions

  • Only connect servers you trust. The Claude Code docs warn that servers fetching external content can expose you to prompt injection, where text in that content tries to steer the agent.
  • Mind what you grant. A server can only do what its tools allow, with the access its token has. Prefer read-only access where you can, and revoke tokens you no longer use.
  • Context isn’t free. Tool descriptions and results use context window space. Claude Code warns when a single tool output passes 10,000 tokens. Connect what a task needs, not everything you have.
  • MCP moves context; it doesn’t create taste. A server can only return what’s in it. The quality of the references and principles behind it still decides the result.

Why this matters for creative direction

Without MCP, every piece of context reaches an agent through you: pasted screenshots, retyped principles, links. That works for one task and breaks down across projects. MCP lets the context live in one place and be fetched when it’s needed. For visual references specifically, see how to give Claude Code visual design references.

Attuna works this way. Agents that support MCP over HTTP, including Claude Code, Codex and Cursor, connect with a personal access token you create and can revoke. They can then search your references, see the images with your notes, and ask for the creative direction that applies to a task. More on that in giving AI coding agents your design taste.

Sources