mcp

This MCP server exposes Zeplin design data to AI agents via the MCP protocol. It provides detailed component and screen specs, in-text annotations for behavior and implementation tips, and design tokens (colors, typography, spacing) to help agents generate UI code that aligns with your Zeplin designs. When connected to MCP clients like Cursor, Windsurf, or VS Code with Copilot, agents can query Zeplin-enabled endpoints to fetch up-to-date design data, then produce code that reflects the exact design language and design tokens used in your project. Typical workflows include fetching a screen or component, retrieving its assets and tokens, and using the included annotations to inform interaction behavior or implementation details in generated code. Agents can also reuse existing tokens to maintain consistency across components and screens.

Prerequisites:

• Node.js v20 or later
• Access to a Zeplin account and a Zeplin Personal Access Token

Installation steps (one-click or manual):

1. One-click / package-based startup (recommended):

   • Ensure you have Node.js installed.

   • Run the MCP server via npm/npx as shown in the README usage, which installs and starts the server on demand:

     npx @zeplin/mcp-server@latest

   • When prompted, provide your Zeplin access token in the ZEPLIN_ACCESS_TOKEN environment variable.

2. Manual integration with a client:

   • In your MCP client settings, configure the server using the following example:

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

Notes:

• The server relies on the ZEPLIN_ACCESS_TOKEN to fetch design data from Zeplin. Keep this token secure and do not expose it in public repos.
• You can run the server locally for development or deploy it in your preferred hosting environment that supports Node/npm tooling.

Tips and common considerations:

• Ensure your ZEPLIN_ACCESS_TOKEN is valid and has access to the relevant Zeplin projects.
• If the MCP client needs to fetch large screens with many variants, consider including only the specific screen variant you want (includeVariants: false) to reduce payloads.
• Use targetLayerName in prompts when you want the MCP server to focus on a particular UI element to improve generation accuracy.
• For development, run linting and tests as described in the project’s npm scripts to maintain code quality (npm run lint, npm run lint:fix, npm run inspect).
• Keep your design tokens up to date in Zeplin to ensure agents reuse current values across components and screens.