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.