MCP SERVER · OFFICIAL PROJECTPaste a Zeplin screen or component URL and get its layers, styling, variants, annotations and design tokens back as data, plus the assets the design references.
LABSCO SUMMARY
Addressing is by the link a designer already sent: get_screen and get_component both take a Zeplin URL, and get_design_tokens takes a resource id for the project or styleguide. Annotations come down with the screen, so interaction notes written in Zeplin reach the code without a second trip. download_layer_asset is the only call that writes to disk, and it exists for assets a design references but the repository is missing.
Zeplin's own server, turning a design URL into the structure and tokens a developer needs to build the thing.
The Zeplin URL of the screen or component you are building, the resource id of the project or styleguide whose tokens you want, and a local path for anything you download.
One command plus a key — npx @zeplin/mcp-server@latest, then supply credentials
USE CASES
Pull the screen's layers, styling and annotations from its URL, and take the project's tokens so the values in code match the ones the design uses.
Read the component's properties, variants, layers and attached tokens before deciding what the props of your version should be.
Fetch the asset behind a layer as SVG or PNG straight to the path it should live at, rather than exporting it by hand.
Counted once with only startup setup. Other versions, modes or optional credentials may expose a different list.
download_layer_assetDownloads 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.
get_componentFetches 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.
get_design_tokensDownload design tokens for a project or styleguide
get_screenFetches 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.
BEFORE YOU INSTALL
4 tools when we connected.
The documented client runs the server on your machine.
CONTEXT COST
Rated by the size of the 4 tool definitions that ride along on every turn, not by how many there are
INSTALLATION
npx @zeplin/mcp-server@latest{
"mcpServers": {
"zeplin": {
"command": "npx",
"args": [
"@zeplin/mcp-server@latest"
],
"env": {
"ZEPLIN_ACCESS_TOKEN": "<YOUR_ZEPLIN_PERSONAL_ACCESS_TOKEN>"
}
}
}
}MCP servers
themesberg
heilgar
21st-dev
Jpisnice