mcp-server by zeplin - MCP Server

The Zeplin MCP server is a powerful tool designed to enhance UI development by integrating AI agents with Zeplin. It allows AI tools like Cursor, Windsurf, and VS Code with Copilot to access comprehensive design data, including component and screen specifications, annotations, and design tokens. This integration helps AI agents generate UI code that closely matches the original designs, ensuring consistency and accuracy. By providing access to detailed documentation and design variables, the MCP server enables AI agents to go beyond static visuals and build interactive and dynamic user interfaces. This server is particularly useful for developers looking to streamline their workflow and improve the quality of their UI implementations.

Features

Component and screen specs: Provides detailed specifications and assets for components and screens.
Documentation: Offers annotations that provide context and implementation tips.
Design tokens: Supplies reusable design variables like colors and typography.
AI integration: Connects AI agents to Zeplin for enhanced UI code generation.
Streamlined workflow: Facilitates efficient and accurate UI development.

Usages

usage with Cursor

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

usage with VS Code

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

usage with Windsurf

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