Compared · Frontend & UI · Claude Code

Best MCP servers & skills for Frontend & UI in Claude Code

7 entries in the AgentTask Atlas catalog fit frontend & ui and have Claude Code setup instructions in their official README or docs. For UI work in Claude Code the catalog has two kinds of entries: MCP servers that give the agent something to look at (a Figma file, a running Chrome tab, a Next.js dev server, Shopify's API schemas) and Anthropic's Agent Skills that tell it how to design, bundle and test the UI it writes. Only Figma needs an account; everything else runs locally with no keys.

Based on official docs, not hands-on tested. Claude Code steps checked 2026-10-22; catalog entries verified 2026-10-16 to 2026-10-22. Not ranked by a score: entries that document more clients come first.

Hosted (remote URL) option: Figma MCP Server.
Runs locally (npx, uvx, Docker, binary or CLI): Next.js DevTools MCP, Shopify Dev MCP Server, Chrome DevTools MCP, frontend-design, web-artifacts-builder, webapp-testing.
Credentials optional or depend on what you enable: Next.js DevTools MCP, Shopify Dev MCP Server, Chrome DevTools MCP, frontend-design, web-artifacts-builder, webapp-testing; every other entry needs an account login, OAuth grant, key or cloud identity.

Name	Hosted	Credentials	License	Verdict
Next.js DevTools MCP Vercel	—	None	MIT (stated in README; GitHub detects no LICENSE file)	Pick it to let the agent read live errors, routes and logs from a running Next.js 16+ dev server; it needs `npm run dev` running.
Shopify Dev MCP Server Shopify	—	None	ISC (LICENSE in the @shopify/dev-mcp npm package)	Pick it when you build Shopify apps, themes or extensions and want the agent to look up current API docs and validate GraphQL or Liquid before you ship; no store access, no keys.
Figma MCP Server Figma	Yes	Required	Not stated (guide repository has no LICENSE file)	Pick it to pull design context into code or (in beta) write back to the Figma canvas; you need a Figma account and a client that supports remote Streamable HTTP.
Chrome DevTools MCP Chrome DevTools (Google)	—	None	Apache-2.0	Pick it for performance traces, network and console debugging; it exposes browser content to the client.
frontend-design Anthropic	—	None	not stated	Pick it for UI work; instructions only, so nothing runs beyond the code the agent writes.
web-artifacts-builder Anthropic	—	None	not stated	Pick it for quick React/Tailwind prototypes; it runs local bundling scripts.
webapp-testing Anthropic	—	None	not stated	Pick it to have the agent test a local web app with Playwright scripts; runs code on your machine.

How to add them to Claude Code

1. Pick a scope before you add anything
claude mcp add writes to local scope by default (only you, only this project, stored in ~/.claude.json). Add --scope project to write .mcp.json at the repository root so the team shares the same servers; Claude Code asks for approval before using servers from a .mcp.json it has not seen. Use --scope user for servers you want in every project.
2. Connect Figma for design context
Figma's guide recommends the Figma plugin from Anthropic's official marketplace (MCP settings plus Agent Skills). Its manual setup adds the hosted server over HTTP; then run /mcp in Claude Code and sign in to Figma in the browser (OAuth).
```
claude plugin install figma@claude-plugins-official
# or MCP only:
claude mcp add --transport http figma https://mcp.figma.com/mcp
```
3. Add Chrome DevTools to see what you built
Chrome DevTools MCP runs locally (Node.js LTS and current Chrome) and lets the agent inspect the page, console, network and performance traces. Its client guide gives this command; it also ships a plugin (MCP + skills) via /plugin marketplace add ChromeDevTools/chrome-devtools-mcp. To opt out of Google's usage statistics, append --no-usage-statistics to the server arguments.
```
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
```
4. For a Next.js 16+ app, read the running dev server
Next.js DevTools MCP discovers running Next.js 16+ dev servers and proxies their built-in /_next/mcp endpoint for live errors, routes and logs, so start npm run dev first. Command from its README:
```
claude mcp add next-devtools npx next-devtools-mcp@latest
```
5. Building on Shopify? Add the Dev MCP server
Shopify's Dev MCP server runs locally, needs no authentication and does not touch a store: it searches Shopify docs and validates GraphQL, Liquid and UI-extension code. Shopify's docs give this command (Node.js 18+), then restart Claude Code. Shopify recommends its AI Toolkit plugin (claude plugin install shopify-ai-toolkit@claude-plugins-official) if you want it to update automatically.
```
claude mcp add --transport stdio shopify-dev-mcp -- npx -y @shopify/dev-mcp@latest
```
6. Install the frontend skills
frontend-design, web-artifacts-builder and webapp-testing are in Anthropic's example-skills plugin. Register the repository as a plugin marketplace, then install the plugin (or pick it from /plugin, Browse and install plugins). After that, mention the skill in a prompt, e.g. "use the frontend-design skill".
```
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
```
7. Check that everything loaded
claude mcp list shows each server with a status such as Connected, Needs authentication or Failed to connect; /mcp inside Claude Code shows the tool count per server and is where you complete OAuth. /skills lists the installed skills.
```
claude mcp list
claude mcp get figma
```

Chrome DevTools MCP's README warns that it exposes browser content to the MCP client; don't log in to sensitive sites in the Chrome instance it controls.
Next.js DevTools MCP sends anonymous usage telemetry unless NEXT_TELEMETRY_DISABLED=1 is set.
webapp-testing and web-artifacts-builder run scripts on your machine (Playwright, React/Tailwind bundling); frontend-design is instructions only.
Figma's write-to-canvas tools are a free beta that Figma says will become usage-based; reading design context is the main use.
Plugins can run hooks and MCP servers, so Claude Code's docs say to read a plugin's details pane before installing it.

Full walkthrough for any server: How to add an MCP server to Claude Code.

Install notes and account access

Servers that log in to a vendor account act on real data and resources. The permissions line is what the vendor says the server can do with your account.

Next.js DevTools MCP · Vercel: Run `npx -y next-devtools-mcp@latest` from your client's MCP config, or `npx add-mcp next-devtools-mcp@latest` (see README). official docs ↗
Can do: Discovers local Next.js 16+ dev servers and proxies their built-in `/_next/mcp` tools (errors, routes, logs, Server Actions); sends anonymous usage telemetry unless NEXT_TELEMETRY_DISABLED=1.
Credentials: None · Maintenance: Release v0.4.0 on 2026-06-24; last commit 2026-09-15 · Verified 2026-10-17
Shopify Dev MCP Server · Shopify: Claude Code: `claude mcp add --transport stdio shopify-dev-mcp -- npx -y @shopify/dev-mcp@latest`; Cursor/VS Code/Codex: run `npx -y @shopify/dev-mcp@latest` as a stdio server (Shopify also recommends its AI Toolkit plugin, e.g. `claude plugin install shopify-ai-toolkit@claude-plugins-official`). official docs ↗
Can do: Searches Shopify developer docs and API schemas and validates GraphQL, Liquid themes and UI-extension code blocks against Shopify schemas; runs locally and does not touch a store.
Credentials: None (runs locally, no authentication per Shopify's docs); Node.js 18+. · Maintenance: npm @shopify/dev-mcp v1.17.0 published 2026-10-16; the Shopify AI Toolkit (plugin + skills) released v2.2.0 the same day · Verified 2026-10-22
Figma MCP Server · Figma: Connect to https://mcp.figma.com/mcp (Streamable HTTP). Examples: `claude mcp add --transport http figma https://mcp.figma.com/mcp`, or install via `gemini extensions install` from https://github.com/figma/mcp-server-guide (see README). official docs ↗
Can do: Reads Figma design context (frames, components, variables, layout) and can write to the canvas or generate/upload images when those tools are enabled; write-to-canvas is in a free beta that Figma says will become usage-based later.
Credentials: Figma account OAuth when connecting the remote server (client-specific auth, e.g. `/mcp auth figma` in Gemini CLI). · Maintenance: Hosted remote server (MCP Registry / server.json version 2.2.157); guide repo last commit 2026-10-19; no GitHub release · Verified 2026-10-19
Chrome DevTools MCP · Chrome DevTools (Google): Add `npx chrome-devtools-mcp@latest` to your client (README lists per-client steps). official docs ↗
Can do: Controls and inspects a Chrome instance (performance traces, network, console); README warns it exposes browser content to the client.
Credentials: None · Maintenance: Release chrome-devtools-mcp-v1.11.0 on 2026-10-15; last commit 2026-10-16 · Verified 2026-10-16
frontend-design · Anthropic: Claude Code: `/plugin marketplace add anthropics/skills`, then install example-skills. official docs ↗
Can do: Instructions only; the agent writes UI code in your project.
Credentials: None · Maintenance: No GitHub release; last commit 2026-09-03 (path-scoped) · Verified 2026-10-16
web-artifacts-builder · Anthropic: Claude Code: `/plugin marketplace add anthropics/skills`, then install example-skills. official docs ↗
Can do: Runs local build scripts (React/Tailwind bundling).
Credentials: None · Maintenance: No GitHub release; last commit 2026-04-20 (path-scoped) · Verified 2026-10-16
webapp-testing · Anthropic: Claude Code: `/plugin marketplace add anthropics/skills`, then install example-skills (see repo README). official docs ↗
Can do: Runs local scripts (Playwright) against local web apps.
Credentials: None · Maintenance: No GitHub release; last commit 2026-04-20 (path-scoped) · Verified 2026-10-16

Sources

All frontend & ui entries, in every client: Best MCP servers for Frontend & UI · Frontend & UI explorer. Ask the catalog from inside Claude Code with the free, read-only AgentTask Atlas MCP server.

Other comparisons: Best MCP servers for Infra & deploy in Cursor · Best MCP servers for Debugging & observability in Cursor · Databases & SQL · Infra & deploy · Debugging & observability · Library docs & research · Web fetching & scraping · Local files · Docs & writing · Planning & reasoning

⚠ No independent security audit: entries summarize official sources only. Review permissions and code before installing.

Best MCP servers & skills for Frontend & UI in Claude Code

How to add them to Claude Code

1. Pick a scope before you add anything

2. Connect Figma for design context

3. Add Chrome DevTools to see what you built

4. For a Next.js 16+ app, read the running dev server

5. Building on Shopify? Add the Dev MCP server

6. Install the frontend skills

7. Check that everything loaded

Install notes and account access

Sources