Skip to content
Sign in

BlogMCP & Agents

The best MCP servers for designers using Claude Code

By Attuna · · 5 min read

The MCP servers most useful to a designer working in Claude Code cover five jobs: reading design files (Figma), using real components (shadcn and Storybook), seeing the result in a browser (Chrome DevTools or Playwright), checking current documentation (Context7), and reading the brief (Linear or Notion). Most designers need two or three of these, not all of them. This guide describes what each server does, how to add it to Claude Code, and how to choose.

We haven’t ranked or benchmarked them. Each description comes from the server’s own documentation, checked on 26 October 2026. If MCP itself is new to you, start with what MCP is for designers.

How to choose: start from the job

Claude Code’s guide to extending it gives a simple trigger for MCP: connect a system when you keep copying data from a browser tab Claude can’t see. That’s a better filter than any list. Ask what you paste into the chat most often:

  • Frames and specs from Figma: a design file server.
  • Component names and props: a component server.
  • Screenshots of what it built: a browser server.
  • Docs for a library it got wrong: a documentation server.
  • The ticket or the brief: your issue tracker or docs tool.

Design files: Figma MCP

Figma’s MCP server “gives AI agents the design context they need to generate code from your Figma files”: layout, variables, components and screenshots of a selection. The remote server can also write to the canvas, for example turning a live page back into design layers. Install it as a plugin, or add the server directly:

Terminal
claude plugin install figma@claude-plugins-official

# or
claude mcp add --transport http figma https://mcp.figma.com/mcp

Setup, file preparation and prompts are in how to use Figma MCP with Claude Code. If you’re weighing it against Claude Code itself, see Claude Code vs Figma MCP.

Components: shadcn and Storybook

Generated UI often looks generic because the agent invents components instead of using yours. Two servers address that from different sides.

shadcn MCP

The shadcn MCP server lets an agent browse, search and install components from shadcn registries, including private ones your team publishes. Initialise it for Claude Code from your project, then restart Claude Code:

Terminal
pnpm dlx shadcn@latest mcp init --client claude

Storybook MCP

Storybook’s MCP addon exposes the component library you already document: which components exist, their props and their stories, plus tools to preview stories and run story tests. It’s in preview, the component docs need a framework that produces a components manifest (React, and Vue or Angular on Vite), and it runs with your Storybook dev server, so the address is local:

Terminal
npx storybook add @storybook/addon-mcp

# with Storybook running on port 6006
claude mcp add --transport http --scope project storybook http://localhost:6006/mcp

The project scope writes the server to .mcp.json, so everyone working in the repository gets it. For the wider picture, see how to make Claude Code follow your design system.

Seeing the result: Chrome DevTools and Playwright

An agent that can’t see what it built can’t judge it. This is the single most useful category for UI work.

Chrome DevTools MCP

Google’s Chrome DevTools MCP lets an agent “control and inspect a live Chrome browser”: screenshots, console messages, network requests and performance traces. That makes it good for the questions a screenshot can’t answer, such as why a layout shifts or a font loads late. Inside Claude Code, install it as a plugin:

Claude Code
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Playwright MCP

Microsoft’s Playwright MCP gives the agent a browser to drive: open a page, click, resize, screenshot. It suits checking flows and breakpoints.

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

Claude Code can also drive your own Chrome through the Claude in Chrome extension (claude --chrome), which isn’t an MCP server you add but covers the same need. For checks you want to repeat exactly, turn them into a Playwright visual test.

Current documentation: Context7

Agents write code from what they learned in training, which can be a version or two behind. Context7 serves “up-to-date docs for AI agents”, so a question about a library’s current API gets the current answer. That matters for UI libraries that change quickly, such as Tailwind or a component kit. An API key is optional and raises rate limits.

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

The brief: Linear and Notion

If the brief and acceptance criteria live in an issue tracker or a doc, connecting it saves pasting them. Both servers are remote and sign in through the browser: add the server, then run /mcp inside Claude Code to authenticate.

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

See Linear’s MCP docs and Notion’s. What a good brief contains is covered in how to write a design brief for AI coding agents.

Previews and deployments: Vercel

If your work ships on Vercel, Vercel MCP can search Vercel’s docs, manage projects and deployments and read deployment logs. For a designer, the useful part is usually the preview: finding the URL of the branch you’re reviewing, or why it failed to build.

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

Vercel notes that connecting grants the agent the same access as your Vercel account, so keep human confirmation on for anything that deploys.

When you don’t need a server

  • GitHub: GitHub has an official MCP server, but Claude Code’s best practices recommend the gh CLI as the more context-efficient route for issues and pull requests.
  • One-off images: paste or drag a screenshot into Claude Code. A server is for context you need again.
  • Rules for one codebase: put them in CLAUDE.md; see CLAUDE.md for UI design.

Keep the set small and safe

  • Pick a scope. Claude Code’s MCP docs describe three: local (the default, private to you in one project), project (shared through .mcp.json) and user (all your projects).
  • Trust each server. The same docs warn that servers which fetch external content can expose you to prompt injection. Prefer official servers from the tool’s own vendor.
  • Check what’s connected. /mcp shows each server’s status, and /context shows what they cost in context.
  • Mind what a browser server sees. Chrome DevTools MCP’s README notes it exposes the browser’s content to the agent, so don’t use it in a profile signed in to things you wouldn’t share.

A sensible starting set

  • Designing in Figma, building in React: Figma, a browser server, shadcn or Storybook.
  • Building from references, no Figma: a browser server and a reference library.
  • Working inside a team’s product: Storybook, a browser server, and the issue tracker.

The context these servers don’t carry

Each server above describes a system: a file, a library, a page, a ticket. None of them holds why the product should look the way it does: the references you had in mind and the rules you’d give a new designer. That’s what Attuna serves over MCP. In Attuna, in private beta, a project holds a brief, its direction, rules to prefer or avoid, and annotated references, and Claude Code reads it alongside the servers you already use.

Sources