Zeplin MCP MCP Server

About

## Zeplin MCP Server: Design-Developer Handoff The **Zeplin MCP Server** integrates the design handoff platform directly into Google Antigravity, enabling AI assistants to access design specifications, extract assets, and generate code snippets programmatically. This integration streamlines the design-to-development process with accurate specifications and resources. ### Why Zeplin MCP? - **Accurate Specs**: Automatically generated measurements, colors, and typography from design files - **Code Snippets**: Platform-specific code generation for iOS, Android, Web, and more - **Asset Management**: Optimized asset export with automatic naming and organization - **Design Tokens**: Extract and sync design tokens for consistent implementation - **Team Collaboration**: Comment threads and version tracking for design feedback ### Key Features #### 1. Project Access ```python from anthropic import Anthropic client = Anthropic() response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "List all screens in the mobile app project with their latest versions" }], tools=[{ "name": "zeplin_projects", "description": "Access Zeplin projects" }] ) ``` #### 2. Spec Extraction ```python # Get design specifications response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Get the CSS specifications for the header component including colors and spacing" }], tools=[{"name": "zeplin_specs", "description": "Extract specifications"}] ) ``` #### 3. Asset Download ```python # Download design assets response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Download all exportable assets from this screen at 1x, 2x, and 3x" }], tools=[{"name": "zeplin_assets", "description": "Download assets"}] ) ``` #### 4. Styleguide Access ```python # Access design tokens response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Get the complete color palette and typography styles from the styleguide" }], tools=[{"name": "zeplin_styleguide", "description": "Access styleguide"}] ) ``` ### Configuration ```json { "mcpServers": { "zeplin": { "command": "npx", "args": ["-y", "@anthropic/mcp-zeplin"], "env": { "ZEPLIN_ACCESS_TOKEN": "your-zeplin-access-token" } } } } ``` ### Use Cases **Developer Handoff**: Automate the extraction of specs and assets for implementation. **Design Token Sync**: Keep CSS variables and design tokens synchronized with design files. **Asset Pipeline**: Integrate asset downloads into build and deployment workflows. **Component Documentation**: Generate component specifications for design system docs. The Zeplin MCP Server brings streamlined design handoff directly into your development workflow, eliminating manual specification lookup.

Installation

{
  "mcpServers": {
    "zeplin": {}
  }
}

How to Use