Figma, Playwright, Chrome DevTools and Linear MCP: which does what for front-end work

Figma MCP reads the design, Playwright and Chrome DevTools drive the browser, Linear MCP holds the backlog. Which your agent needs, and what none of them see.

On October 15 I watched Claude Code build two changes it had been told not to build yet. It had read the two review comments through the Skyelight MCP, and both had a hand-off set to plan: write up what you'd do, and change nothing. It built both in one turn. When I asked why, it said: “Nothing stopped me from seeing it. It was in the data, and I didn't act on it.”

The field was there. What the field meant wasn't. Our tool descriptions never said, so the agent read “plan” as a label. We rewrote the server's instructions that afternoon to say a hand-off outranks a go-ahead in chat.

That's the part most write-ups of the Figma MCP, the Playwright MCP and the Chrome DevTools MCP skip. Each server gives your agent one thing it couldn't reach before: the design, a browser, the backlog. What the agent does with it depends on which servers you connected, and on how well each one explains itself.

What is an MCP server?

It's a program that offers your agent a set of tools. Anthropic introduced the Model Context Protocol in November 2024, and in December 2025 handed it to the Agentic AI Foundation, part of the Linux Foundation. When Claude Code, Cursor or Codex connects to a server, it asks for the tool list: a name, a description and the inputs for each. The agent reads those descriptions and decides on its own when to call what. Some servers run on your machine with npx. Others are hosted, and you sign in once.

Figma MCP: the design

Figma's server hands the agent the frame you're building from. get_design_context returns the layout and styles of a selection, get_variable_defs the tokens behind it, and get_screenshot a picture to check against. With Code Connect set up, get_code_connect_map tells the agent which of your components a Figma component already is, so it reuses Button instead of writing a new one.

The hosted server at mcp.figma.com/mcp is the one Figma recommends, and only it can write back: turning a live page into design layers, or making a new file. The desktop server needs the Figma app open and a Dev or Full seat on a paid plan. Watch the limits. A View or Collab seat gets 20 calls a month, which one afternoon of real work will use up.

Use it when there's a design file and the build should match it. If the app was prompted into existence and there's no frame, skip it.

Playwright MCP: a browser to test in

Microsoft's server gives your agent a browser it drives itself. It reads the page as an accessibility tree, the same structure a screen reader uses, so it doesn't need a vision model to find the sign-up button. browser_navigate, browser_click, browser_fill_form and browser_console_messages cover most of a test run. It runs locally with npx @playwright/mcp@latest, and with the Playwright extension it can use the tabs you're signed in to.

Two notes from its own README. It says plainly that it's “not a security boundary”, so treat anything on a page it visits as text your agent might follow. And it suggests coding agents may do better with the Playwright CLI and skills, which use fewer tokens.

Use it when the agent has made a change and should walk the flow before telling you it's done.

Chrome DevTools MCP: why it's broken or slow

Google's server is DevTools for your agent. Where Playwright asks “does the flow work?”, this one asks why it doesn't. list_network_requests and list_console_messages show what failed, performance_start_trace records a trace the agent can read back as findings, lighthouse_audit returns the failing audits, and get_css_styles settles which rule won.

It can attach to the Chrome you already have open. Start it with --autoConnect on Chrome 144 or later, allow remote debugging, and the agent sees your signed-in session instead of a fresh browser that can't get past your login. It has 61 tools, which is a lot of descriptions to load into every session. The --slim flag cuts it down.

Use it when the question is a slow page, a failing request or a style that won't apply.

Linear MCP: the backlog

Linear hosts its server at mcp.linear.app/mcp. You sign in with OAuth, and the agent can find, create and update issues, projects and comments. There's a read-only address at /mcp/readonly for agents you only want reading. On November 5 Linear started sending clients default instructions on how to use its tools, which is the same lesson we learned in October, from the other side.

Use it when the agent should start from the issue, or file one for something it found and won't fix now.

Skyelight MCP: what the reviewer thought

None of the four servers above knows what your client said about the pricing page. That lives in a review: a comment pinned to the element, a reply or two, sometimes a decision. Skyelight's server gives your agent those threads. list_items shows what's open, get_item returns one thread with the element it's on and, with Skyelight Build, the file and line that render it. post_update puts the agent's answer back on the thread, where the reviewer will see it.

The hand-off is the part we got wrong first. Set a thread to investigate or plan and the agent replies on the thread and changes no code, even if you tell it to in chat. Set it to fix and it builds. It's hosted at app.skyelight.ai/mcp with OAuth, and Free includes all 18 tools, with 25 agent threads a month.

Give your agent the reviewer's notes

Reviewers press C and comment on the element. Claude Code, Cursor or Codex reads the thread over MCP, does what the hand-off says, and replies on the page. Free for one project.

Which MCP does what?

ServerWhat your agent getsRunsUse it for
FigmaFrames, tokens, screenshots, component mappingsHosted, or the desktop appBuilding to a design
PlaywrightA browser it drives, read as an accessibility treeLocalWalking a flow after a change
Chrome DevToolsConsole, network, traces, Lighthouse, computed CSSLocal, can attach to your ChromeFinding why it's slow or broken
LinearIssues, projects and commentsHostedStarting from the ticket
SkyelightReview threads on the element, with hand-offsHosted, or local with a tokenFixing what reviewers flagged

Which ones overlap, and which can you skip?

Playwright and Chrome DevTools overlap the most. Both open pages, click and read the console. If you only want one, pick by the question you ask most: “did it work?” is Playwright, “why not?” is DevTools. In Claude Code, Claude in Chrome covers a lot of the same ground in your own browser.

Linear and Skyelight don't overlap. They hold different conversations. A Linear issue is the plan for the work. A Skyelight thread is what someone said about a specific button after they saw it. On Pro, a thread can be sent to Linear as an issue, and comments sync both ways, so you don't have to choose.

Don't connect all five everywhere. Each server adds its tool descriptions to what the agent has to read, and many clients load them at the start of every session, whether the agent calls them or not. Connect the ones a project uses.

MCP vs API: what's the difference?

Most MCP servers call an API underneath. Skyelight's does. The difference is who reads it. An API is read by code a developer wrote, and the developer already knew what agentTask meant. An MCP server is read by a model at run time, and the model only knows what the descriptions tell it. On October 15 ours didn't say, and the agent did what any reader would with an unexplained field. Write the descriptions like the manual they are.

If you haven't connected an agent to Skyelight yet, here's the setup, and the tools reference lists all 18.

Frequently asked questions

What is an MCP server?

A program that offers tools to an AI agent over the Model Context Protocol. Each tool has a name, a description and its inputs. The agent asks the server for that list when it connects, reads the descriptions, and decides when to call each tool. Anthropic introduced MCP in November 2024, and it now sits with the Linux Foundation's Agentic AI Foundation.

Should I use the Playwright MCP or the Chrome DevTools MCP?

Use Playwright to walk a flow and check that it works, and Chrome DevTools to find out why something is slow or failing. Both can click and read the console. Chrome DevTools adds performance traces, Lighthouse audits and computed CSS, and can attach to the Chrome you're already signed in to.

Is the Figma MCP server free?

Partly. On a View or Collab seat you get 20 tool calls a month on any plan. A Dev or Full seat on a paid plan gets 200 a day on Professional and 600 a day on Enterprise, and the Starter plan isn't offered it. The tools that write to the canvas are free during the beta, and Figma says they'll become usage-based.

Does Linear have an MCP server?

Yes. It's hosted at mcp.linear.app/mcp, signs in with OAuth, and lets your agent find, create and update issues, projects and comments. There's a read-only address too, mcp.linear.app/mcp/readonly, for agents you only want reading.

What's the difference between an MCP server and an API?

An API is read by code someone wrote, and that person already knows what each field means. An MCP server is read by a model at run time, so its tool descriptions are the only manual the model gets. Most MCP servers call an API underneath. The server's job is to explain it.

Figma tells your agent what was drawn, and the browser tells it what shipped. Neither one tells it what the client thought.

Let your reviewers brief your agent

No card required.