广告合作
MCP.so
登录

Zeplin MCP Server for AI-Assisted UI Implementation

@zeplin

代码仓库

基本信息

分类

其他

许可证

MIT

传输方式

stdio

作者

zeplin

关于 Zeplin MCP Server for AI-Assisted UI Implementation

MCP server for Zeplin - used for screen and component code generation 💻

#mcp-server#ui-implementation#zeplin

Zeplin MCP Server for AI-Assisted UI Implementation 配置

使用下面的配置,将此服务器添加到你的 MCP 客户端。

{
  "mcpServers": {
    "mcp-server-zeplin": {
      "command": "npx",
      "args": [
        "@zeplin/mcp-server@latest"
      ]
    }
  }
}

Zeplin MCP Server for AI-Assisted UI Implementation 工具

4

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.

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.

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.

Download design tokens for a project or styleguide

概览

What is Zeplin MCP Server for AI-Assisted UI Implementation?

Zeplin MCP Server for AI-Assisted UI Implementation connects AI agents—such as Cursor, Windsurf, and VS Code with GitHub Copilot—to Zeplin design projects. It enables agents to fetch component and screen specs, design annotations, and design tokens (colors, typography, spacing) so they can generate UI code that matches the intended designs.

How to use Zeplin MCP Server for AI-Assisted UI Implementation?

Install the server via NPX (npx @zeplin/mcp-server@latest) and set the ZEPLIN_ACCESS_TOKEN environment variable with your Zeplin personal access token. Configuration is done in your MCP client’s settings (e.g., Cursor or VS Code). One-click installation links are provided for Cursor and VS Code.

Key features of Zeplin MCP Server for AI-Assisted UI Implementation

  • Fetches component and screen specs with detailed layer information
  • Retrieves design annotations for interaction and behavior guidance
  • Provides design tokens (colors, typography, spacing) for reuse
  • Supports limiting context via includeVariants and targetLayerName parameters
  • Works with Cursor, Windsurf, VS Code, and Claude Code

Use cases of Zeplin MCP Server for AI-Assisted UI Implementation

  • Implement UI components or entire screens from Zeplin designs in an AI‑assisted code editor
  • Re-use existing design tokens to maintain visual consistency
  • Build complex screens by implementing individual components first, then assembling them

常见问题

1

What are the prerequisites for using the server?

Node.js (v20 or later), a Zeplin account, and a Zeplin personal access token generated from your Zeplin profile under Developer → Personal access tokens.

2

How do I provide my Zeplin access token?

Set the environment variable `ZEPLIN_ACCESS_TOKEN` to your personal access token. In MCP client configs (e.g., Cursor), this goes in the `env` object shown in the README.

3

What runtime does the server require?

The server runs on Node.js v20 or later and is executed via `npx`. No additional runtime dependencies beyond Node.js are needed.

4

How can I reduce context usage when fetching large designs?

Use the `includeVariants: false` parameter to fetch only the linked screen version, or use `targetLayerName` to focus on a specific component or layer. An iterative component‑first workflow also keeps each request smaller.

5

What code style does the project follow?

The project uses ESLint with 2‑space indentation, double quotes, semicolons, no trailing spaces, and organized imports. Run `npm run lint:fix` before submitting changes.

评论

其他 分类下的更多 MCP 服务器

Screenpipe

screenpipe

YC (S26) | Open Computer History | Continuously record your company computer work, map your workflows, help you find work worth automating, and power your agents' context

22.0K

Lemon.io

lemon-io

Request dedicated senior developers to work on your project, write job descriptions, and prep technical interviews — all without leaving your Claude chat. Just describe what you need, and Lemon.io MCP does the rest. 1–3

P

PickFu MCP

PickFu MCP is a Model Context Protocol (MCP) server that connects AI assistants, developers, marketers, product managers, and AI agents to PickFu's consumer research platform. It enables users to create surveys, conduct

Glasswarp

Glasswarp

See and control a real Windows PC you own — from any MCP client, locally or remotely. Observe (UIA + screenshots), click/type/drag/scroll, launch apps, owner Live View. BYOH: your machine, your key.

Blender

ahujasid

Open-source MCP to use Blender with any LLM

23.6K
广告合作