Zeplin MCP Server

The Zeplin MCP server is the official integration from Zeplin that gives AI coding assistants (Cursor, Windsurf, VS Code with Copilot, Claude, etc.) direct access to design data inside Zeplin projects. Instead of asking an agent to guess at colors, spacing, and component structure from screenshots, the server exposes structured design specs, assets, annotations, and design tokens so the agent can produce UI code that actually matches the design system.

The server is intentionally focused: it exposes two primary tools, get_screen and get_component, both keyed off Zeplin short URLs (zpl.io links). Agents can pull full screen specifications or drill into a single component, and there are flags to limit the response (skip variants, target a specific layer) so the design payload fits within the agent's context window. Returned data includes layout, typography, colors, design tokens, and linked assets, plus any documentation or annotations authors have added in Zeplin.

Notable points: it is published and maintained by Zeplin itself under the official @zeplin/mcp-server npm package, it runs locally via npx, and it authenticates with a personal access token generated from your Zeplin profile. The README explicitly recommends a component-first workflow, building individual components from Zeplin specs before assembling them into screens, to get the best output from the agent.

Tools

Prerequisites

• Node.js v20 or later
• An active Zeplin account
• A Zeplin personal access token (create one from your Zeplin profile under Developer > Personal access tokens)

Installation

The server runs via npx, no manual install needed:

npx @zeplin/mcp-server@latest

Zeplin also provides one-click install deep links for Cursor and VS Code in the repository README.

MCP client configuration

Add the following to your MCP client config (Claude Desktop claude_desktop_config.json, Cursor mcp.json, or VS Code MCP settings):

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

Environment variables

• ZEPLIN_ACCESS_TOKEN: Required. Your Zeplin personal access token, used to authenticate API calls to Zeplin.

Usage tips from the README

• Pass includeVariants: false when you only need a specific screen state, to keep responses small.
• Use targetLayerName to narrow into a single layer when the full screen is too large for the agent's context window.
• For complex UIs, build components first with get_component, then assemble them into screens.

• Generate React, Vue, SwiftUI, or Jetpack Compose code for a Zeplin screen that matches design tokens, typography, and spacing exactly.
• Implement a single component from Zeplin (button, card, form field) with all states and variants pulled directly from the design source.
• Keep an existing codebase in sync with design updates by re-pulling a screen spec and asking the agent to diff against current implementation.
• Hand off a design link to an AI agent and have it scaffold a new feature, including assets and annotations from the designer.
• Audit a screen's design tokens (colors, spacing, type scale) and map them to a project's existing theme or design system file.

• "Using the Zeplin link https://zpl.io/abc123, generate a React component for this screen using Tailwind. Match the spacing and colors exactly."
• "Fetch the component at https://zpl.io/xyz789 and implement it as a SwiftUI view with all variants."
• "Get the Zeplin screen at <url> but skip variants, then list all design tokens used so I can map them to our theme.ts file."
• "Pull the 'PrimaryButton' layer from this Zeplin screen and update our existing Button.tsx to match the new specs."
• "Read this Zeplin screen and implement only the header section as a Jetpack Compose composable."

• Official, maintained by Zeplin under the @zeplin/mcp-server npm package.
• Returns structured design data (tokens, specs, assets, annotations), not just images, so generated code is far more accurate than screenshot-based workflows.
• Built-in options (includeVariants, targetLayerName) for managing context size on large screens.
• Simple setup: npx-based, single environment variable for auth.

• Only two tools exposed (get_screen, get_component); no write-back, no project listing, no search by name.
• Requires a Zeplin account and personal access token, so it is gated to paid Zeplin users with project access.
• Large or complex screens can blow past agent context limits unless you carefully use the variant and layer filters.

• Figma Dev Mode MCP server for teams whose source of truth is Figma rather than Zeplin.
• Framelink Figma MCP, a popular community Figma-to-code MCP server.