Zeplin MCP Server for AI-Assisted UI Implementation

Name: Zeplin MCP Server for AI-Assisted UI Implementation
Author: zeplin

@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

基本情報

カテゴリ

その他

ライセンス

MIT

ランタイム

node

トランスポート

stdio

公開者

zeplin

設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

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

ツール

ツールは検出されませんでした

ツールは README から自動的に抽出されます。メンテナーは ## Tools という見出しの下に記載することで、このタブに反映できます。

概要

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

FAQ from Zeplin MCP Server for AI-Assisted UI Implementation

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.

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.

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.

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.

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.

「その他」の他のコンテンツ

MaxKB

1Panel-dev

🔥 MaxKB is an open-source platform for building enterprise-grade agents. 强大易用的开源企业级智能体平台。

22.0K

🚀 Model Context Protocol (MCP) Curriculum for Beginners

microsoft

This open-source curriculum introduces the fundamentals of Model Context Protocol (MCP) through real-world, cross-language examples in .NET, Java, TypeScript, JavaScript, Rust and Python. Designed for developers, it focuses on practical techniques for building modular, scalable,

16.7K