MCP Servers: How I Connected My Favorite Tools to Claude Code

I set up MCP servers to connect Figma, Linear, Notion and Playwright to Claude Code. Real setup, concrete examples and honest limits.

Published on March 19, 2026

Views
100 views
Reading time:
Reading time: 5 min

Five tabs open, three apps in the dock, and half your time hunting for information you need right now. Every switch between Figma, Linear, Notion, and the browser has a real cognitive cost. MCP servers kill that back-and-forth. Instead of jumping between tools, the tools come to the agent.

What is MCP?

MCP — Model Context Protocol — is USB-C for AI agents. A standard protocol that defines how an agent connects to external services. An MCP server is a bridge: it exposes data and actions from a tool so the agent can use them directly.

The tools I use daily

Figma — Design context without opening Figma

The Figma plugin extracts component structure, color tokens, layout properties, and variants. Instead of manually inspecting each property and translating it to code, the agent reads the entire frame.

The "aha" moment: I needed to implement a card with hover, active, and disabled states. Instead of opening Figma and copying values one by one, I asked the agent to extract the component context. In 30 seconds it had the hierarchy, tokens, and variants. What normally takes me 5 minutes of manual inspection.

If you want to see the full Figma-to-code workflow, I detailed it in the previous article.

Linear — Project management from the editor

Linear MCP gives access to issues, statuses, comments, and subtasks. I can check acceptance criteria, read team comments, and update status without opening the browser.

The "aha" moment: I was mid-implementation and needed to check if there was an edge case documented in the ticket comments. Instead of switching windows, finding the issue, and coming back, I asked the agent. It returned the exact comment with the edge case. I never lost context of what I was writing.

Notion — Documentation stops being isolated

Notion is where technical decisions, style guides, and product specs live. The problem is that information stays there until someone manually searches for it.

The "aha" moment: Defining a component's structure, I needed to review the project's naming conventions. The agent searched Notion, found the page, and applied the conventions directly. Documentation stopped being a document nobody checks and became active context.

Playwright — On-demand automated QA

Playwright gives the agent control over a real browser. It can navigate, click, fill forms, take screenshots, and read rendered content.

The "aha" moment: I implemented a form with validation and wanted to verify the full flow. The agent opened the browser, navigated to the form, tested with valid and invalid data, and reported a validation error I hadn't caught. It's like having a tester available at any moment.

MCP Connection Map

AI Agent ← MCP → Tools
Provides

Design context, tokens, screenshots, layer structure

Example task

Extract color tokens from a Figma component

Without MCP

Manually copy values from Figma inspector and paste into the prompt

With MCP

get_design_context({ nodeId }) → tokens, hierarchy and styles in one step

How to configure it

In Claude Code, official plugins are enabled directly in settings. Figma, Linear, and Playwright are official plugins — you activate them and they work. For services like Notion, they connect via URL. For custom tools, you add a command that runs the MCP server.

Configuration takes minutes, not hours. Each service that requires authentication needs a token or API key, but the process is straightforward.

The real shift: from searching to having

The value isn't in any individual server. It's the accumulation.

Before: "Let me open Linear to check the ticket... now Figma for the design... now Notion for the specs... now back to the editor."

After: Everything is in the same context. The agent checks the ticket, extracts the design, reviews conventions, and generates code. Without leaving the editor.

The difference isn't speed. It's continuity. Every context switch costs 10 to 25 seconds of re-orientation. Multiply that by 50 switches a day and that's 15-20 minutes of pure friction. MCP doesn't make you faster — it keeps you focused.

The limits

Heavy context. Every MCP query consumes tokens. If you extract a Figma file with 200 frames, you're filling the context window with information you might not need. The fix: be specific about what you ask for.

Authentication. Each server needs its own credentials. Four servers means four tokens. Not hard, but it's upfront friction.

Not everything warrants it. If you use a tool once a week, the overhead isn't worth it. MCP works best with tools you query constantly — the ones in your daily loop.

Network dependency. Servers connecting to cloud services need a connection. If you work offline, you lose access. Local servers like Playwright work without network.

Conclusion

MCP doesn't make AI smarter. It gives AI access to the same information you have. It's plumbing — connecting your tools to your agent so both work with the same context. Fewer tabs, fewer context switches, more time on the work that matters.


This is the fifth article in the series. The first was about the tools I use. The second about why they fail and how to fix it. The third about building a skills system. The fourth about the Figma-to-code workflow. This one closes the circle — connecting all your tools into a single flow.