---
title: "Connect Zeplin to ChatGPT: Manage Design Tokens and Styleguide Assets"
slug: connect-zeplin-to-chatgpt-manage-design-tokens-and-styleguide-assets
date: 2026-06-09
author: Uday Gajavalli
categories: ["AI & Agents"]
excerpt: "Learn how to connect Zeplin to ChatGPT using a managed MCP server. Automate design token audits, screen reviews, and styleguide updates with AI."
tldr: "Connecting ChatGPT to Zeplin requires handling strict object hierarchies, pagination, and API rate limits. This guide shows how to deploy a managed Zeplin MCP server via Truto, enforce security controls, and automate design token workflows."
canonical: https://truto.one/blog/connect-zeplin-to-chatgpt-manage-design-tokens-and-styleguide-assets/
---

# Connect Zeplin to ChatGPT: Manage Design Tokens and Styleguide Assets


If you need to connect Zeplin to ChatGPT to automate design token audits, manage styleguides, or aggregate feedback across project screens, you need a [Model Context Protocol (MCP) server](https://truto.one/what-is-mcp-and-mcp-servers-and-how-do-they-work/). This infrastructure layer translates an LLM's natural language tool calls into the strict, hierarchical REST API requests that Zeplin requires. (If your team uses Claude, check out our guide on [connecting Zeplin to Claude](https://truto.one/connect-zeplin-to-claude-review-screens-annotations-and-notes/), or explore our broader overview on [connecting Zeplin to AI Agents](https://truto.one/connect-zeplin-to-ai-agents-automate-workspace-and-design-delivery/)).

Giving a Large Language Model (LLM) read and write access to a sprawling enterprise design system is a severe engineering challenge. You have to handle OAuth 2.0 token lifecycles, manage deep resource hierarchies (Organizations to Projects to Screens to Notes), and safely expose destructive endpoints. Every time Zeplin introduces a new abstraction—like variable collections or connected components—you have to update your server code, redeploy, and test the integration.

This guide breaks down exactly how to use Truto to generate a secure, managed MCP server for Zeplin, connect it natively to ChatGPT, and execute complex design workflow automations using natural language.

## The Engineering Reality of the Zeplin API

A custom MCP server is a self-hosted integration layer. While the open MCP standard provides a predictable way for models to discover tools via JSON-RPC 2.0, implementing it against Zeplin's specific API architecture is painful. You are not just building CRUD endpoints; you are mapping highly nested design system concepts into flat LLM tool definitions.

If you build a custom MCP server for Zeplin, you own the entire API lifecycle. Here are the specific integration challenges that break standard assumptions when working with Zeplin:

### The Strict Object Hierarchy
Zeplin's API is deeply relational. You cannot just "get all notes." To read a comment, you need the `organization_id` or `project_id`, the `screen_id`, and the `note_id`. If an LLM wants to summarize feedback on a specific design, it must first fetch the project list to get the ID, then fetch the screen list to get the target screen's ID, and finally request the notes for that screen. If your MCP server does not expose these endpoints with clear, explicitly linked parameter requirements, the LLM will hallucinate IDs and fail.

### Design Token Abstractions
Zeplin splits design assets between Local Project Styleguides and Global Styleguides. Fetching a color token from a project (`list_all_zeplin_project_colors`) is a completely different API path than fetching one from a centralized styleguide (`list_all_zeplin_styleguide_colors`). Furthermore, token payloads are dense, containing RGBA values, source variable IDs, and associated components. Your MCP server must properly type these schemas so the LLM understands how to parse a hex code out of an RGBA object.

### Rate Limits and 429 Errors
When an AI agent is tasked with auditing 50 screens for outdated components, it will fire dozens of requests rapidly. Zeplin enforces strict rate limits to protect its infrastructure. It is critical to understand that Truto does not retry, throttle, or apply backoff on rate limit errors. When Zeplin returns an HTTP 429 Too Many Requests, Truto passes that error directly to the caller. What Truto does is normalize the upstream rate limit information into standardized headers (`ratelimit-limit`, `ratelimit-remaining`, `ratelimit-reset`) per the IETF spec. The calling AI agent or framework is entirely responsible for reading these headers and implementing its own exponential backoff.

## The Managed MCP Approach

Instead of forcing your engineering team to build, host, and maintain a custom Node.js or Python server that maps Zeplin's endpoints to MCP schemas, you can use a managed infrastructure layer. Truto's MCP server feature turns any connected Zeplin account into a [production-ready, MCP-compatible tool server](https://truto.one/auto-generated-mcp-tools-for-ai-agents-a-2026-architecture-guide/).

Truto derives these tools dynamically based on official documentation schemas. The server URL contains a cryptographic token that encodes the specific Zeplin account, the allowed operational methods, and expiration policies. The URL alone is enough to authenticate and serve tools, eliminating client-side boilerplate.

## Step 1: Creating the Zeplin MCP Server

You can generate an MCP server for Zeplin either manually through the Truto dashboard or programmatically via the API.

### Method A: Via the Truto UI
If you are configuring this for an internal workspace, the UI is the fastest path:

1. Log into Truto and navigate to the integrated account page for your connected Zeplin instance.
2. Click the **MCP Servers** tab.
3. Click **Create MCP Server**.
4. Configure your specific constraints (e.g., restrict to read-only methods or filter by specific tags).
5. Copy the generated MCP server URL (it will look like `https://api.truto.one/mcp/abc123def456...`).

### Method B: Via the API
For platforms building multi-tenant AI products, you can generate MCP servers dynamically using the Truto REST API. This request validates that the integration has tools available, generates a secure hashed token, stores it in distributed key-value storage, and returns a ready-to-use URL.

```bash
curl -X POST https://api.truto.one/integrated-account/{integrated_account_id}/mcp \
  -H "Authorization: Bearer YOUR_TRUTO_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Zeplin Design Token Agent",
    "config": {
      "methods": ["read", "write"]
    },
    "expires_at": "2026-12-31T23:59:59Z"
  }'
```

The response contains the exact URL your LLM framework needs:

```json
{
  "id": "mcp_abc123",
  "name": "Zeplin Design Token Agent",
  "config": { "methods": ["read", "write"] },
  "expires_at": "2026-12-31T23:59:59.000Z",
  "url": "https://api.truto.one/mcp/a1b2c3d4e5f67890"
}
```

## Step 2: Connecting the MCP Server to ChatGPT

Once you have your Truto MCP URL, you need to expose it to ChatGPT. You can do this via the native UI for cloud environments, or via a local configuration file if you are bridging an SSE proxy.

### Method A: Via the ChatGPT UI
If you are using ChatGPT Enterprise, Pro, or Team with Developer Mode enabled, you can connect remote MCP servers directly in the browser.

1. In ChatGPT, click your profile and go to **Settings -> Apps -> Advanced settings**.
2. Toggle **Developer mode** on.
3. Under the MCP servers / Custom connectors section, click **Add**.
4. **Name:** Zeplin (Truto)
5. **Server URL:** Paste the `https://api.truto.one/mcp/...` URL generated in Step 1.
6. Click **Save**. ChatGPT will instantly perform a handshake, fetch the tool schemas, and make them available to your current session.

### Method B: Via Manual Config File (SSE Bridge)
If you are using custom agent frameworks, cursor, or running a local proxy that expects standard MCP configuration files, you can utilize the `@modelcontextprotocol/server-sse` package to bridge the remote HTTP server into your local environment.

Add the following to your `mcp.json` or equivalent configuration file:

```json
{
  "mcpServers": {
    "zeplin": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-sse",
        "https://api.truto.one/mcp/a1b2c3d4e5f67890"
      ]
    }
  }
}
```
Restart your client. The framework will spawn the SSE process and map the remote Zeplin tools into the local agent's context window.

## Security and Access Control

Giving an LLM unconstrained access to a production Zeplin workspace is dangerous. An unchecked model could accidentally delete project members or overwrite critical spacing tokens. Truto provides four key [security primitives](https://truto.one/zero-data-retention-mcp-servers-building-soc-2-gdpr-compliant-ai-agents/) to lock down the MCP server payload:

*   **Method Filtering (`config.methods`):** Restrict the server to safe operations. Setting `["read"]` ensures the LLM can only execute `get` and `list` operations, blocking `create`, `update`, and `delete` entirely.
*   **Tag Filtering (`config.tags`):** Scope access to specific functional domains. You can limit the server to only expose tools tagged with `tokens` or `comments`, hiding administrative endpoints like webhooks or billing.
*   **Require API Token Auth (`config.require_api_token_auth`):** By default, the MCP URL acts as a bearer token. Enabling this flag forces the connecting client to also supply a valid Truto API key in the `Authorization` header, preventing unauthorized execution if the URL leaks.
*   **Expiration (`expires_at`):** Define a strict TTL (Time-To-Live) for the server. Once the timestamp passes, background jobs automatically sweep and destroy the cryptographic token, immediately severing the LLM's access.

## Zeplin Hero Tools for ChatGPT

When ChatGPT connects to the Zeplin MCP server, it receives dynamically generated tools complete with JSON schemas mapping directly to the Zeplin REST API. Here are the highest-leverage tools available for design system automation.

### list_all_zeplin_project_screens
This tool retrieves all screens within a specific project. It returns dense metadata including thumbnails, the number of active notes, tags, and associated section IDs. Agents use this to navigate the workspace before executing deeper audits.

> "Fetch all screens in the 'Mobile App Redesign' project (ID: 64b3c...) and find any screens that have more than 5 active notes on them."

### list_all_zeplin_project_design_tokens
Design tokens are the source of truth for engineering implementations. This tool pulls the complete set of colors (with RGBA data), spacing values, and text styles (including font families, weights, and line heights) for a project.

> "Get the design tokens for project 64b3c... List out all the primary brand colors and their exact hex and RGBA values."

### list_all_zeplin_styleguide_colors
For mature teams using global styleguides, this tool fetches the centralized color palette. It returns object references and source details, allowing the agent to analyze the core visual language across multiple linked projects.

> "Retrieve the colors from our global styleguide (ID: 5f1a2...). Check if we are still using the old 'Warning Red' color token, and tell me its current RGBA value."

### update_a_zeplin_styleguide_color_by_id
This is a powerful write operation that updates an existing color token in a styleguide. AI agents can use this to execute programmatic brand updates, like shifting a primary blue across the entire design system.

> "Update the styleguide color token (ID: 88d9e...) in styleguide 5f1a2... Change its name to 'Deprecated - Do Not Use'."

### list_all_zeplin_screen_notes
Design review automation starts here. This tool lists all notes on a specific screen, returning the creation timestamps, status, specific X/Y position coordinates, and the nested array of comments and author details.

> "Pull all the notes for the 'Checkout Flow' screen. Summarize the feedback from the engineering team regarding the new payment button placement."

### create_a_zeplin_screen_note
This tool allows the LLM to leave feedback directly on a screen. It requires the project ID and screen ID, and drops a new note thread into the designer's workspace.

> "Leave a note on screen 77c4d... in project 64b3c... saying: 'Accessibility review complete. Please ensure this text meets AAA contrast ratios against the dark background.'"

To view the complete inventory of available endpoints, parameter requirements, and schema definitions, visit the [Zeplin integration page](https://truto.one/integrations/detail/zeplin).

## Workflows in Action

By chaining these specific tools together, ChatGPT can execute multi-step workflows that normally require a human to manually click through the Zeplin UI for hours.

### Workflow 1: Automated Design Token Audits
Design systems rot over time as temporary colors and duplicate tokens are added. You can ask ChatGPT to audit a styleguide and identify redundancies.

> **User:** "Audit the design tokens in our global styleguide (ID: 5f1a2...). Find any colors that are almost identical (e.g., off by a single hex digit) and list them out. If you find the old 'Brand Blue', rename it to 'Legacy Brand Blue'."

**Execution Steps:**
1.  ChatGPT calls `list_all_zeplin_styleguide_design_tokens` passing the styleguide ID.
2.  The model parses the returned JSON payload, extracting the RGBA values of all color objects.
3.  It performs semantic analysis on the color values, identifying near-duplicates based on math.
4.  It identifies the target token ID for 'Brand Blue'.
5.  ChatGPT calls `update_a_zeplin_styleguide_color_by_id`, passing the ID and the new name.
6.  The user receives a summarized report of the duplicates and confirmation of the rename.

### Workflow 2: Screen Feedback Aggregation
Product managers spend significant time parsing feedback across dozens of screens before a sprint starts. ChatGPT can automate this extraction.

> **User:** "Look at the 'User Profile Redesign' project (ID: 64b3c...). Find all screens related to 'Settings', pull all their active notes, and give me a bulleted summary of action items for the engineering team."

**Execution Steps:**
1.  ChatGPT calls `list_all_zeplin_project_screens` with the project ID.
2.  It filters the response payload, selecting only the screen objects whose names or tags contain 'Settings'.
3.  For each matching screen, ChatGPT calls `list_all_zeplin_screen_notes` using the respective screen ID.
4.  The model aggregates the nested comments, filters out resolved threads, and synthesizes the remaining open feedback into a concise list of actionable tasks.

## Strategic Architecture for AI-Driven Design

Connecting ChatGPT to Zeplin fundamentally changes how cross-functional teams interact with design data. By wrapping Zeplin's complex hierarchy and dense payloads in a managed MCP server, you offload the friction of schema maintenance, authentication, and endpoint normalization. Your engineers stop writing boilerplate integration scripts, and your designers stop manually copying hex codes out of interfaces.

When your AI agents can safely and predictably traverse your design system, you bridge the gap between design intent and engineering implementation.

> Want to give your AI agents secure, managed access to Zeplin and 100+ other enterprise APIs without writing any connector code? Let's talk about Truto's managed MCP infrastructure.
>
> [Talk to us](https://cal.com/truto/partner-with-truto)