Skip to main content

Zeplin MCP server

Learn how to connect your AI agents like Cursor, Windsurf, and VS Code to Zeplin

Didem avatar
Written by Didem
Updated yesterday

Zeplin’s MCP server brings AI-assisted UI development to life by enabling you to connect AI agents like Cursor, Windsurf, and VS Code with Copilot directly to your Zeplin projects.

This integration lets developers generate UI code straight from designs in Zeplin—automating repetitive tasks and accelerating development.

What your AI agents can access

Once connected, your AI agents can pull structured, design-specific data from Zeplin through the MCP server, including:

  • Component and screen specs: Agents get detailed specs and assets for both components and entire screens, making it easier to generate accurate, design-aligned UI code.

  • Documentation: Any annotations added to screens can be accessed, giving agents additional context on behavior, interaction patterns, or implementation tips—so they’re not just building from visuals.

  • Design tokens: Colors, typography, spacing, and other shared design variables can be reused by agents to maintain consistency and align with your project’s system.

Connecting your AI agents to Zeplin

To get started, you’ll first need to set up the Zeplin MCP server in your editor. This typically involves adding the Zeplin server definition to your settings.json or a similar configuration file, depending on the MCP provider you’re using.

When you navigate to a project or inspect a layer on a screen in Zeplin, you’ll find step-by-step setup instructions in the right panel. We’ve also included them below so you can follow along right from here.

Zeplin server definition:

{
"mcpServers": {
"zeplin": {
"command": "npx",
"args": ["-y", "@zeplin/mcp-server@latest"],
"env": {
"ZEPLIN_ACCESS_TOKEN": "<Personal access token>"
}
}
}
}

You can generate the ZEPLIN_ACCESS_TOKEN by clicking on the “Generate token” button and easily copy it.

☝️ For a more technical setup guide and example effective prompts, check out the @zeplin/mcp-server README on npm.

Cursor

  • Install the MCP server here

VS Code

  • Open VS Code Settings — ⌘

  • Search for MCP

  • Select Add new global MCP server

  • Add the Zeplin server definition

Windsurf

  • Open Windsurf Settings

  • Navigate to MCP

  • Select Add new global MCP server

  • Add the Zeplin server definition

Others

  • Open your IDE's or text editor's settings

  • Find the MCP configuration

  • Select Add new global MCP server

  • Add the Zeplin server definition

💁‍♀️ If you have any questions or suggestions, let us know at support@zeplin.io or via Discord.

Did this answer your question?