Zeplin MCP Server for Claude

Content

The Zeplin MCP server connects Claude and other MCP-capable coding agents to Zeplin project context. It lets an assistant fetch structured design handoff data for screens and components, including specs, assets, annotations, documentation, and design tokens, so UI implementation prompts can refer to the same source of truth designers and engineers use in Zeplin.

This is distinct from the existing Figma MCP Server entry. Figma's Dev Mode MCP server exposes design context from Figma Desktop over a local HTTP server, while Zeplin's MCP server runs through the @zeplin/mcp-server package and a Zeplin personal access token for teams whose design handoff source of truth is Zeplin.

Features

• Access Zeplin component and screen specs for design-aligned UI code.
• Fetch assets and detailed implementation specs for screens and components.
• Use screen annotations and documentation as behavior or implementation context.
• Reuse colors, typography, spacing, and other design tokens from Zeplin styleguides.
• Run through npx @zeplin/mcp-server@latest in Claude Code, Cursor, VS Code, Windsurf, or another stdio-capable MCP client.
• Use Zeplin short URLs in prompts to keep requests focused on a specific screen, component, or implementation task.
• Follow Zeplin's README guidance for component-first implementation and targeted prompts to manage model context limits.

Use Cases

• Ask Claude to implement a specific Zeplin component using existing local code conventions.
• Pull screen specs and annotations while building a responsive page from an approved Zeplin design.
• Use Zeplin design tokens to align generated UI with the product styleguide.
• Ask an agent to focus on one named layer or component instead of the entire screen.
• Break larger screen builds into component-sized tasks using separate Zeplin links for each piece.

Installation

Claude Code

1. Generate a Zeplin personal access token from your Zeplin profile developer settings.
2. Confirm Node.js 20 or later and npx are available.
3. Add the MCP server:

claude mcp add zeplin --env ZEPLIN_ACCESS_TOKEN=YOUR_ZEPLIN_PERSONAL_ACCESS_TOKEN -- npx -y @zeplin/mcp-server@latest

1. Restart or refresh the MCP client session.
2. Test with a narrow prompt that references one Zeplin screen or component URL.

Claude Desktop

1. Open the Claude Desktop MCP configuration file.
2. Add the zeplin server configuration shown below.
3. Replace the token placeholder with a secret-managed Zeplin personal access token.
4. Restart Claude Desktop and test on a non-sensitive design first.

Configuration

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

Examples

Implement a focused component

Use Zeplin for this component: https://zpl.io/EXAMPLE. Implement only the Button variant shown there using our existing Button primitives.

Update one screen element

The latest Zeplin screen adds a checkbox to the menu item. Focus only on that layer and update the existing MenuItem component.

Use design tokens

Fetch the Zeplin design tokens for this screen and map colors, typography, and spacing to our existing CSS variables where possible.

Source notes

• Zeplin's official help article describes the MCP server for connecting AI agents like Cursor, Windsurf, VS Code, and Claude Code to Zeplin projects.
• The help article says agents can access component and screen specs, documentation annotations, and design tokens such as colors, typography, and spacing.
• The official Claude Code setup command uses npx -y @zeplin/mcp-server@latest with a ZEPLIN_ACCESS_TOKEN environment variable.
• The npm package metadata identifies @zeplin/mcp-server as Zeplin's official MCP server for AI-assisted UI development and points to the zeplin/mcp-server repository.
• The GitHub README documents Node.js 20+, a Zeplin account, a personal access token, MCP client configuration, prompt examples, and MIT licensing.

Duplicate check

Checked current content/mcp/, content/tools/, guides, skills, agents, open pull requests, live HeyClaude llms-full.txt, and repository-wide content for Zeplin, @zeplin/mcp-server, zeplin/mcp-server, support.zeplin.io, design handoff, screen specs, component specs, design tokens, and Figma MCP. Existing Figma MCP Server content is a local Figma Desktop Dev Mode MCP entry, not Zeplin's design handoff MCP server. No dedicated Zeplin MCP entry, Zeplin source URL duplicate, or open duplicate PR was found.

Disclosure

Editorial listing. No paid placement or affiliate link is used.