Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Zeplin MCP Server Get the design tokens and component specs"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Connect AI agents like Cursor, Windsurf, and VS Code (w/ Copilot) to Zeplin. Using the MCP server, AI agents can tap into:
Component and screen specs: Detailed specs and assets for both components and entire screens — helping agents generate UI code that closely matches the designs.
Documentation: Annotations added to screens that provide extra context, like how things should behave or tips for implementation — letting the agent go beyond static visuals and build real interactions.
Design tokens: Colors, typography, spacing, and other design variables used across the project, so your agent can reuse existing tokens where possible.
Related MCP server: Sunnyside Figma MCP
Node.js (v20 or later)
A Zeplin account.
A Zeplin personal access token. You can generate one from your Zeplin profile, under "Developer" > "Personal access tokens".
For Cursor users:
For VS Code users:
To start using the MCP server, you first need to configure your client (e.g. Cursor, VS Code, Windsurf, Claude Code). Most clients have an option to add a new MCP server. When prompted, enter the following command:
npx @zeplin/mcp-server@latestIn addition, you also need to provide your Zeplin access token using the ZEPLIN_ACCESS_TOKEN environment variable.
For example, if you’re using Cursor, here’s how your MCP settings should look like:
{
"mcpServers": {
"zeplin": {
"command": "npx",
"args": ["@zeplin/mcp-server@latest"],
"env": {
"ZEPLIN_ACCESS_TOKEN": "<YOUR_ZEPLIN_PERSONAL_ACCESS_TOKEN>" // Replace with your actual token
}
}
}
}The project includes several npm scripts to help with development:
# Run TypeScript compiler in watch mode for development
npm run dev
# Build the project for production
npm run build
# Run ESLint on source files
npm run lint
# Automatically fix ESLint issues where possible
npm run lint:fix
# Test the MCP server locally with the inspector tool
npm run inspectTo run npm run inspect, create an .env file first in the root directory:
ZEPLIN_ACCESS_TOKEN=<YOUR_ZEPLIN_PERSONAL_ACCESS_TOKEN>This project uses ESLint to enforce code quality and consistency. The configuration is in eslint.config.js. Key style guidelines include:
2 space indentation
Double quotes for strings
Semicolons required
No trailing spaces
Organized imports
When contributing to this project, please ensure your code follows these guidelines by running npm run lint:fix before submitting changes.
The quality and specificity of your prompts significantly impact the AI’s ability to generate accurate and useful code. These are not mandatory but will definitely increase the output quality.
When you need to implement a small update or addition to an existing screen or component based on a new Zeplin design version.
The latest design for the following screen includes a new addition: a Checkbox component has been added to the MenuItem component, here is the short url of the screen <zeplin short url of the screen, e.g., https://zpl.io/abc123X>. Focus on the MenuItem component.
The Checkbox component can be found under the path/to/your/checkbox/component directory.
The relevant screen file is located at path/to/your/screen/file.tsx.
The MenuItem component, which needs to be modified, is located at path/to/your/menuitem/component.
Please implement this new addition.Why this is effective:
Contextualizes the change: Clearly states what’s new.
Provides the Zeplin link: Allows the MCP server to fetch the latest design data.
Gives file paths: Helps the AI locate existing code to modify.
Specifies components involved: Narrows down the scope of work.
For implementing larger screens or features, it’s often best to build individual components first and then assemble them.
Implement this component: <zeplin short url of the first component, e.g., https://zpl.io/def456Y>. Use Zeplin for design specifications.
(AI generates the first component...)
Implement this other component: <zeplin short url of the second component, e.g., https://zpl.io/ghi789Z>. Use Zeplin for design specifications.
(AI generates the second component...)
...
Now, using the components you just implemented (and any other existing components), implement the following screen: <zeplin short url of the screen, e.g., https://zpl.io/jkl012A>. Use Zeplin for the screen layout and any direct elements.Why this is effective:
Breaks down complexity: Tackles smaller, manageable pieces first.
Iterative approach: Allows for review and correction at each step.
Builds on previous work: The AI can use the components it just created.
Clear Zeplin references: Ensures each piece is based on the correct design.
When dealing with complex Zeplin screens or components with many variants and layers, the amount of design data fetched can sometimes be extensive. This can potentially exceed the context window limitations of the AI model you are using, leading to truncated information or less effective code generation. Here are several strategies to manage the amount of information sent to the model:
Limit screen variants (includeVariants: false):
How it works: When using the get_screen tool, the model can be instructed to fetch only the specific screen version linked in the URL, rather than all its variants (e.g., different states, sizes, themes). This is done by setting the includeVariants parameter to false during the tool call.
When to use: If your prompt is focused on a single specific version of a screen, or if the variants are not immediately relevant to the task at hand. This significantly reduces the amount of data related to variant properties and their respective layer structures.
Example prompt: “Implement the login form from this screen: https://zpl.io/abc123X. I only need the specific version linked, not all its variants.”
The AI agent, when calling get_screen, should then ideally use includeVariants: false.
Focus on specific layers/components (targetLayerName or targeted prompts):
How it works (using targetLayerName): The get_screen tool has a targetLayerName parameter. If the model can identify a specific layer name from your prompt (e.g., "the 'Submit Button'"), it can use this parameter. The server will then return data primarily for that layer and its children, rather than the entire screen's layer tree.
How it works (targeted prompts): Even without explicitly using targetLayerName in the tool call, very specific prompts can guide the model to internally prioritize or summarize information related to the mentioned element.
When to use: When your task involves a specific part of a larger screen, like a single button, an icon, or a text block.
Example prompt: “Focus on the 'UserProfileHeader' component within this screen: https://zpl.io/screenXYZ. I need to implement its layout and text styles.”
If the AI uses get_screen, it could populate targetLayerName: "UserProfileHeader".
Iterative, component-first implementation:
How it works: As detailed in Example prompt 2: Larger designs (Component-first), break down the implementation of a complex screen into smaller, component-sized tasks.
When to use: For any non-trivial screen. This approach naturally limits the scope of each get_component or get_screen call to a manageable size.
Benefit: Each request to the Zeplin MCP server will fetch a smaller, more focused dataset, making it easier to stay within context limits and allowing the model to concentrate on one piece at a time.
Downloads a specific visual asset (e.g., SVG icon, PNG image) for a given layer from Zeplin and saves it to a local path. Use this tool when an asset referenced in the design (obtained from get_screen or get_component) is missing from the codebase and needs to be fetched directly from Zeplin.
| Name | Required | Description | Default |
|---|---|---|---|
| assetType | Yes | The desired format of the asset to download. Must be one of 'svg', 'png', 'jpg', or 'pdf'. Choose the format most suitable for the project's needs or as indicated by design specifications. If unsure, 'svg' is often preferred for vector graphics and 'png' for bitmaps. | |
| localPath | Yes | The absolute path to the directory where images/assets are stored in the project. If the directory does not exist, it will be created. The format of this path should respect the directory format of the operating system you are running on. Don't use any special character escaping in the path name either. | |
| layerSourceId | Yes | The unique source ID of the layer for which the asset should be downloaded. This ID is obtained from the `layers` array in the response of `get_screen` or `get_component` calls, from a `sourceId` or similar field associated with a specific layer that has exportable assets |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description must fully describe behavior. It mentions that the tool downloads and saves to a local path, and that the directory will be created if missing. However, it does not disclose whether existing files are overwritten, what happens on failure, or any authentication requirements. Some important behavioral aspects are missing.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise (two sentences) with no extraneous information. It front-loads the primary action and includes the use case. Every sentence is necessary and adds value. It is well-structured and easy to parse.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool has no output schema, so the description should hint at what the tool returns. It does not mention any return value or error handling. The parameter descriptions are thorough, but missing output information makes it incomplete for an agent to fully understand the tool's behavior.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so baseline is 3. The description adds value by explaining that layerSourceId comes from the sourceId field in get_screen/get_component, that localPath should be absolute and directory creation is automatic, and gives guidance on choosing assetType (e.g., 'svg' for vector, 'png' for bitmap). This enhances understanding beyond the raw schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states what the tool does: downloads a visual asset for a layer from Zeplin and saves it locally. It specifies the resource (layer asset), action (download and save), and origin (Zeplin), leaving no ambiguity. This distinguishes it from sibling tools like get_screen (does not download assets).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides a clear use case: when an asset from the design is missing from the codebase. It tells when to use the tool, but does not explicitly mention when not to use it or suggest alternatives. However, the context makes it evident that other tools are for fetching different data.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Fetches detailed design specifications for a specific Zeplin component, including its properties, variants, layers, and associated design tokens. Use this when you need to understand the structure and styling of a single, reusable UI element from Zeplin.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description must carry the burden of behavioral disclosure. It only states that it fetches details, but does not mention side effects, permissions, rate limits, or error behavior. This is a significant gap.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences long, front-loads the action and result, and contains no unnecessary words. Every sentence adds value.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given that the tool has a single parameter, no output schema, and no annotations, the description provides basic functionality but lacks details on expected URL format, return structure, and behavioral aspects. It is minimally adequate.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The only parameter 'url' has no description in the schema (0% coverage). The tool description says 'specific Zeplin component' but does not clarify what format or expected content the URL should have, leaving ambiguity.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it fetches detailed design specifications for a Zeplin component, listing included properties, variants, layers, and tokens. It distinguishes from sibling tools like get_screen (for screens) and get_design_tokens (for tokens).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description includes a usage hint: 'Use this when you need to understand the structure and styling of a single, reusable UI element.' However, it does not explicitly mention when not to use it or name alternatives, though sibling tools provide context.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Download design tokens for a project or styleguide
| Name | Required | Description | Default |
|---|---|---|---|
| resourceId | Yes | The ID of the project or styleguide for which the design tokens should be downloaded. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description must fully disclose behavior. It only states 'Download' without indicating whether it's read-only, if it triggers side effects, or any rate limits. This is insufficient for safe agent invocation.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, concise sentence with no unnecessary words. However, it sacrifices informative detail for brevity, which is acceptable but leaves room for improvement.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with no output schema and no annotations, the description should explain the return format or behavior. It only mentions the input, leaving the agent uncertain about what to expect from the download (e.g., file type, structure).
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% (resourceId has a clear description). The tool description does not add extra meaning beyond the schema, meeting the baseline for high coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action 'Download design tokens' and the targets 'project or styleguide'. It distinguishes from sibling tools which handle different resources (layers, components, screens). However, it could be more specific about the output format.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance on when to use this tool versus alternatives. The description does not mention prerequisites, when not to use it, or any comparison to sibling tools like 'get_component'.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Fetches detailed design data for a specific screen from Zeplin. This includes screen variants, layer information (structure, position, styling), annotations, and project-level design tokens. Use this to understand screen layout, content, and interactions for development or review.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | ||
| includeVariants | No | Set to `true` (default) to retrieve all variants of the screen (e.g., different states or sizes). Set to `false` if only the specific screen version linked in the URL is needed, or to conserve tokens if variants are not relevant to the user's query. Fetching all variants provides a complete picture but uses more tokens. | |
| targetLayerName | No | Optional. If the user's query refers to a specific named layer or element on the screen (e.g., 'the submit button', 'user profile image'), provide that layer's exact name here. This will focus the returned data on that specific layer and its children, making the response more concise and relevant. If omitted or the layer name is not found, data for all layers on the screen will be returned. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden. It discloses that the tool fetches various design data, implying a read-only operation. It does not mention permissions, rate limits, or error conditions, but the scope of returned data is well described.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description consists of three sentences that are front-loaded with the primary purpose, followed by details and usage guidance. Every sentence adds value, no wasted words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The description lists what data is returned (variants, layers, annotations, tokens), compensating for the lack of an output schema. It does not specify response format or error handling, but for a read tool with clear inputs, this is nearly complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 67% (2 of 3 parameters have descriptions). The description does not add details about the 'url' parameter (missing schema description) or further clarify parameter usage beyond what the schema already provides. Baseline score of 3 is appropriate as schema partially covers parameter meaning.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states 'Fetches detailed design data for a specific screen from Zeplin', using a specific verb and resource. It lists the contents (variants, layers, annotations, tokens) and distinguishes from sibling tools focused on layer assets, components, or tokens.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides a clear usage context: 'Use this to understand screen layout, content, and interactions for development or review.' It implies when to use this tool, though it does not explicitly mention when not to use it or direct to alternatives (e.g., get_component for a specific component).
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
v0.1.0download_layer_assetget_componentget_design_tokensget_screenEach tool has a distinct purpose: downloading assets, fetching component details, retrieving design tokens, and fetching screen details. No overlap between these operations.
All tools follow a consistent verb_noun pattern with snake_case (e.g., download_layer_asset, get_component). Perfectly consistent naming.
4 tools is appropriate for a design-focused server covering the core resources: screens, components, assets, and tokens. Neither too few nor too many.
The tool set covers the primary read-only operations needed from Zeplin: fetching screens, components, assets, and design tokens. No obvious gaps for a viewing/downloading use case.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
Connect AI coding agents to Anima Playground, Figma, and your design system.
Connect AI agents to 1000+ apps with managed authentication and tool-calling.
Serves your design system and coding standards to coding agents, so they stop guessing.
Verified, pay-per-use API tools for AI agents through one authenticated connection.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/zeplin/mcp-server'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
