The best design MCP servers for Claude Code and Cursor

A design MCP server lets a coding agent read designs, search UI references, or generate screens through the Model Context Protocol. For an existing Figma design, start with Figma. For reference search, use Mobbin. For new mobile app screens in an editable project, Sleek is an option built for that job.

This comparison covers eight vendors' documented capabilities and setup paths for Claude Code and Cursor, checked on September 28, 2026. We publish Sleek. The recommendations below are based on what each integration does, not a hands-on output-quality ranking.

What is a design MCP server?

A design MCP server exposes a design product's tools to an AI client. The agent can call those tools and receive data or images without asking you to copy every detail into chat. The protocol supplies the connection; the server determines whether the agent can read a file, search a catalog, or change a design.

A hosted server connects through a URL. A local integration connects to software on your computer. Neither label tells you whether it can generate screens. Check the available operations before choosing a server.

How do design MCP servers compare?

Figma is useful when the design belongs in Figma. Mobbin supplies references from existing products. Stitch and Sleek provide hosted screen-generation workflows, while Pencil and Paper connect an agent to a local canvas. Some capabilities overlap, so choose the artifact and workflow you need rather than the longest tool list.

All access details below are current as of September 2026. The vendor sources and client instructions follow the table.

The table separates generation from reference retrieval. A search result can help an agent understand a checkout pattern, but it is not a new checkout screen for your app.

What does the Figma MCP server do?

Figma MCP supplies design context for implementation, including layout, variables, and components. The remote server also lets supported clients create and edit native Figma content. Use it when Figma is the design file you intend to work from or write into. The desktop server remains available for reading local design context.

Figma's help center lists remote access for all plans and seats, desktop access for paid Dev or Full seats, and free canvas writing during beta. Access is not unlimited: Figma's rate-limit page gives Starter up to 20 read-tool calls per month, with higher allowances for paid Dev and Full seats.

Commands checked on 2026-09-28.

The remote installation guide recommends this Claude Code plugin:

claude plugin install figma@claude-plugins-official

Or add just the server:

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

Open /mcp in Claude Code and authenticate. For Cursor, the same guide documents this command in agent chat:

/add-plugin figma

For the desktop route, enable the MCP server in Figma's Dev Mode inspect panel. The desktop guide gives this Claude Code command:

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Cursor's desktop configuration is:

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Paste a frame link and ask the agent to implement it. That is the clearest starting point when the layout has already been decided. The remote server's write tools also make it a candidate when you need to create content directly in Figma.

What does the Google Stitch MCP server do?

Google Stitch provides a hosted MCP connection for working with Stitch projects and generating screens from text. The resulting design stays in a Stitch project. It fits developers who want to use Google's design generator from their coding agent and retrieve screen data as part of the same workflow.

The Stitch MCP setup guide documents API-key and OAuth authentication. Its API-key path uses a key from Stitch settings. The official Stitch SDK also documents the remote endpoint, generation, and retrieval of screen HTML and images.

Claude Code, using the setup guide's API-key configuration:

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

Cursor, in .cursor/mcp.json:

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

Replace the placeholder with your key and keep that file out of version control. Check the current limits in your Stitch account before planning a batch. The setup page is a connection guide.

What does the Mobbin MCP server do?

Mobbin MCP lets the agent search real product interfaces and receive screen images. It is useful before designing a flow or implementing a pattern you have not settled on. Its documented tools search existing material; they do not generate a new app design. The output is reference material for the next decision.

Mobbin's introduction confirms OAuth and access on Pro, Team, and Enterprise plans. Its tool list covers screens, flows, and website sections. High-resolution image URLs expire after 30 days.

Mobbin's Claude Code guide prefers setting up the verified connector in Claude Desktop or on the web first. It also documents this CLI-only alternative:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

Then open /mcp, select Mobbin, and authenticate.

For Cursor, the vendor's setup steps use its Marketplace plugin rather than a JSON snippet:

1. Open the Mobbin plugin in Cursor Marketplace and select Add to Cursor.
2. Select Add Plugin.
3. In Cursor, open Customize, then Installed, then Mobbin.
4. Select Authenticate and sign in.

Ask for a concrete reference, such as onboarding screens from banking apps. Choose the useful patterns before asking a generator or coding agent to implement your own flow.

What does the Sleek MCP server do?

Sleek MCP lets an agent generate editable iOS and Android app screens in a Sleek project. The agent can retrieve screen HTML, render images, and return a project link for review. Use it when mobile app design is the missing step between your brief and the code you want the agent to write.

The Sleek MCP README documents a hosted server, OAuth sign-in, and Figma and code exports. Give the agent the full app brief in one message so Sleek can plan the screen set together. Generation spends workspace credits; reading and rendering do not.

Claude Code:

claude mcp add --transport http sleek https://sleek.design/api/mcp

Open /mcp, select Sleek, and complete browser authentication. For Cursor, add the following to .cursor/mcp.json for one project or ~/.cursor/mcp.json for all projects:

{
  "mcpServers": {
    "sleek": {
      "url": "https://sleek.design/api/mcp"
    }
  }
}

Enable the server and sign in. The README recommends OAuth; API keys are a fallback for clients that cannot support it.

Free accounts can try the API with 60 one-time credits. Among the public subscription plans, ongoing API and agent access requires Pro or Team, not Starter. Pro is $69/month or $360/year with 20,000 monthly credits as of September 2026. Figma and code exports are included on every plan, with Free exports limited to unlocked screens.

The MCP README estimates about 30 credits per new screen and 5 to 30 per edit. Only one design run can be active per project. The design call waits up to 270 seconds, then returns a running status if needed; the agent should poll get_design_run rather than submit the brief again.

Sleek produces designs and exportable UI code. Your coding agent still has to connect the app's data and behavior, and adapt the screen code if you are building with React Native or SwiftUI. If you prefer a REST API workflow, the Claude Code UI design skills guide explains Sleek's separate skill installation.

What does the ScreensDesign MCP server do?

ScreensDesign MCP combines iOS app research with screen generation. Its MCP page lists a library of 2,715+ top-grossing apps, complete UX flows, revenue signals, and tools that generate screens from those references as of September 2026. It fits a brief that starts by examining existing mobile patterns.

MCP access requires ScreensDesign Pro. The hosted server supports OAuth or scoped API keys. For Claude Code, add the HTTP endpoint and authenticate through /mcp:

claude mcp add --transport http screensdesign https://api.screensdesign.com/v1/mcp

For Cursor, add this to .cursor/mcp.json, then connect the server:

{
  "mcpServers": {
    "screensdesign": {
      "url": "https://api.screensdesign.com/v1/mcp"
    }
  }
}

Use the vendor's setup walkthrough for account-specific configuration. Revenue signals describe the reference apps; they do not prove that copying a screen will improve your app's conversion rate.

What does the AIDesigner MCP server do?

AIDesigner MCP generates and refines HTML/CSS designs with Tailwind for mobile or desktop viewports. It can use repository context and share results with its canvas. Choose it when you want generated interface code shaped by your existing project, then inspect the output before treating it as an implementation.

The official setup guide supplies a CLI that configures the server and agent instructions. Run this at your project root for Claude Code:

npx -y @aidesigner/agent-skills init

For Cursor, select the host explicitly:

npx -y @aidesigner/agent-skills init cursor

Both connect to https://api.aidesigner.ai/api/v1/mcp. Finish OAuth sign-in from the client's MCP panel. Generation uses account credits; check your allowance before running repeated variations. The documented output is interface HTML, not a complete native mobile app.

What does the Pencil MCP server do?

Pencil, now pen.dev, connects an agent to the .pen document open in its desktop app or IDE extension. The agent can inspect and change that canvas while you work in the same file. This suits developers who want a design document alongside their repository and an interactive local editing workflow.

The AI integration docs describe a local stdio connection to the app. The installation guide supplies these Claude Code steps instead of a portable URL:

1. Open a .pen document in pen.dev.
2. Enable Claude Code CLI in Settings, then MCP.
3. Start or restart Claude Code.
4. Run /mcp and confirm pencil is connected.

For Cursor, use the documented IDE extension path:

1. Open Extensions and search for pen.dev.
2. Install the extension.
3. Create or open a .pen file.

The pricing page says pen.dev is currently free as of September 2026. That does not include your separate coding-agent subscription. Keep the document open for this MCP workflow; do not substitute a guessed hosted endpoint or a binary path copied from someone else's machine.

What does the Paper MCP server do?

Paper MCP lets an agent read and edit a Paper design document built from HTML and CSS. It supports a shared canvas workflow: the agent changes the design, you inspect it, and the agent can use the result during implementation. Paper Desktop must be running with a file open for these document operations.

The Paper MCP guide documents these plugin installs. First install and open Paper Desktop. For Claude Code, run:

claude plugin marketplace add paper-design/agent-plugins && claude plugin install paper-desktop@paper

Then open Claude Code and check /mcp. For Cursor, run this in the agent panel:

/add-plugin paper-desktop

Reload Cursor if the server does not appear. Paper's older localhost HTTP configuration still works, but current plugins use the Paper CLI. The CLI can expose tools while Desktop is closed; document reads and writes still require the app.

Paper's pricing page lists 100 MCP calls per week on Free and 1 million per week on Pro as of September 2026. Pro is $20 per editor per month, or $16 per editor per month billed yearly. A tool-call allowance is not a screen count: one design task may involve several calls.

Which design MCP server should you use?

Use Figma to implement an existing Figma design, Mobbin to find references, and Sleek to generate mobile screens in a project you can review and export. Stitch is another hosted generation option. Choose Pencil or Paper when you want an agent and a local canvas working on the same design document.

Start with the immediate job. If your teammate already handed you a Figma frame, a second generator adds a design decision you may not need. If you lack a layout, references can help you decide what belongs on the screen before generation. For a new mobile app brief, connect your agent to Sleek and inspect the resulting screens before implementing them. The Free trial covers about one design run; Pro supports ongoing use.

Give the agent any existing brand rules as part of the brief. The DESIGN.md library offers written design direction you can use alongside these tools; it is a separate input from the MCP connection.

For choices beyond agent integrations, see the ranking of AI mobile app design tools and Claude Design alternatives.

Frequently asked questions