# Your Zeplin spec. In the coding agent.

Source: https://corespeed.io/integrations/zeplin

Connect Zeplin to Claude Code, Codex, Cursor or any MCP agent through CoreSpeed. Your coding agent reads the screens, components and design tokens of the Zeplin projects you can open, so it builds to the spec: colors, text styles and spacing. It can also add screen notes and comments, each a separate call that approvals can hold.

## Set up an agent

Give your agent this line: `set up https://corespeed.io/SKILL.md (read it raw, e.g. with curl)`

It fetches the skill at https://corespeed.io/SKILL.md, adds the CoreSpeed MCP server, signs you in (or up), and keeps the skill for next time. Connect Zeplin after setup. Access follows the connected account and its permissions. Create an account: https://app.corespeed.io/sign-up

## Build to the spec. Not from a screenshot

Ask your coding agent to read a Zeplin screen and its design tokens before it writes the component.

You ask your agent: "Read the Checkout screen in the Storefront app project on Zeplin and the project's design tokens. List the colors, text styles and spacing I need to build it. Do not add notes."

It calls CoreSpeed:

- `zeplin__list_project_screens`: ok, 362 ms
- `zeplin__list_screen_components`: ok, 418 ms
- `zeplin__get_project_design_tokens`: ok, 455 ms

It reads from: Zeplin.

### Build notes: Checkout, to spec.

Three components and the tokens they use, ready for the build.

**Components**

- Price row
- Pay button
- Address card

**Tokens**

- Pay button: brand-600, label in body-md.
- Rows: space-4 between, space-2 inside.

_Illustrative example · Fictional project · No notes added_

All connectors: https://corespeed.io/docs/connectors

## From the design spec to code that matches it

Requests you can make once Zeplin is connected. The data is fictional.

### Find the screen

Checkout · mobile · Project screens

- Screen: Checkout, latest version
- Components: Price row, Pay button
- From the projects you can open

### Read the design tokens

Storefront tokens · Colors, type, spacing

- Primary: brand-600 · #4B3FD8
- Spacing: space-4 · 16 px
- The spec, not a guess

### Leave a note for design

A question on Checkout · Held for a person

- Screen: Checkout
- Note: Pay button label is cut off
- The note waits for a yes

## Keep your agent. Bring your work

One CoreSpeed account, across compatible agents.

1. **Set up CoreSpeed**: Give your agent the setup line. It adds CoreSpeed and signs you in.
2. **Connect Zeplin**: Authorize the account and the content you need.
3. **Start with one task**: Ask for a summary, a brief, or a draft. Review the answer.

Setup guides: Claude Code https://corespeed.io/docs/mcp#claude-code · Codex https://corespeed.io/docs/mcp#codex · Cursor https://corespeed.io/docs/mcp#cursor

## Questions

### What can my agent read in Zeplin?

Projects, screens and their latest versions, components, styleguides, notes, and design tokens: colors, text styles and spacing.

### How does Zeplin connect?

Sign in with Zeplin, or paste a personal access token. Either way your agent acts with your own Zeplin permissions.

### Can it change a design?

No. It cannot change screens or layers. Adding notes and comments or editing project details is a separate tool call approvals can hold.

### Do I have to switch agents?

No. CoreSpeed adds tools to the agent you already use: Claude Code, Codex, Cursor, or another MCP client. Each one signs in once.

### Can my agent access every account in our organization?

No. Access follows your CoreSpeed identity, each connection's visibility, and the app's own permissions. Personal connections stay private.

### Does this work without connecting an account?

No. Connect the app's account first; your CoreSpeed workspace shows what each app needs. The examples on this page use fictional data. All connectors: https://corespeed.io/docs/connectors

Every tool and price: https://corespeed.io/catalog/zeplin

## Related pages

- [Canva for Claude Code, Codex, and Cursor](https://corespeed.io/integrations/canva): Find Canva designs, export them as PDF, PNG or PPTX, and start new ones from the agent you already use, with your own Canva account.
- [GitHub for Claude Code, Codex, and Cursor](https://corespeed.io/integrations/github): Turn GitHub issues and pull requests into a clear project update inside your agent, without the tab tour.
- [MCP gateway for your agents and tools](https://corespeed.io/solutions/mcp-gateway): Reach connected apps, built-in tools, and your own remote MCP servers through one authenticated CoreSpeed MCP endpoint.
- [Mural for Claude Code, Codex, and Cursor](https://corespeed.io/integrations/mural): Search Mural rooms, read a mural's sticky notes and comments, and summarize a session in the agent you already use, with your own Mural account.

## Sources

- Connectors: https://corespeed.io/docs/connectors
- Zeplin API reference: https://docs.zeplin.dev/reference
- Getting started with the Zeplin API: https://docs.zeplin.dev/docs/getting-started-with-zeplin-api

Reviewed 2026-11-10.

## Links

- Product overview: https://corespeed.io/ (Markdown: https://corespeed.io/index.md)
- All integrations: https://corespeed.io/integrations (Markdown: https://corespeed.io/integrations.md)
- Documentation: https://corespeed.io/docs
- Pricing: https://corespeed.io/pricing (Markdown: https://corespeed.io/pricing.md)