Zeplin MCP server: AI-assisted UI development

Connect AI agents like Cursor, Windsurf, and VS Code (w/ Copilot) to Zeplin. Using the MCP server, AI agents can tap into:

• Component and screen specs: Detailed specs and assets for both components and entire screens — helping agents generate UI code that closely matches the designs.
• Documentation: Annotations added to screens that provide extra context, like how things should behave or tips for implementation — letting the agent go beyond static visuals and build real interactions.
• Design tokens: Colors, typography, spacing, and other design variables used across the project, so your agent can reuse existing tokens where possible.

Table of contents

• Prerequisites
• Installation
• Configuration
• Development
• Usage with MCP Clients (e.g., Cursor)
• Crafting Effective Prompts
  • Example Prompt 1: Minor Changes/Additions
  • Example Prompt 2: Complex Implementations (Component-First)

Prerequisites

• Node.js (v20 or later)
• A Zeplin account.
• A Zeplin personal access token. You can generate one from your Zeplin profile, under “Developer” > “Personal access tokens”.

Installation

One-click installation

For Cursor users:

For VS Code users:

Manual installation

To start using the MCP server, you first need to configure your client (e.g. Cursor, VS Code, Windsurf, Claude Code). Most clients have an option to add a new MCP server. When prompted, enter the following command:

npx @zeplin/mcp-server@latest

In addition, you also need to provide your Zeplin access token using the ZEPLIN_ACCESS_TOKEN environment variable.

For example, if you’re using Cursor, here’s how your MCP settings should look like:

{
  "mcpServers": {
    "zeplin": {
      "command": "npx",
      "args": ["@zeplin/mcp-server@latest"],
      "env": {
        "ZEPLIN_ACCESS_TOKEN": "" // Replace with your actual token
      }
    }
  }
}

Development