IntegrationsZeplin integration
Your Zeplin spec.In the coding agent.
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.
From the design specto code that matches it.
Requests you can make once Zeplin is connected. The data is fictional.
- ZeplinStorefront app · screens
- CheckoutUpdated today
- CartUpdated 3 days ago
- Order confirmedUpdated last week
Find the screen
From the projects you can open
- ZeplinDesign tokens
Storefront app
- brand-600: #4B3FD8
- body-md: Inter 16 / 24
- space-4: 16 px
Read the design tokens
The spec, not a guess
Approval requestWaiting
Cursor for Dylan
zeplin__create_screen_note
“The Pay button label is cut off at 320 px. Shorten it, or wrap it?”
Policy: Ask before writing in a design project.
ApproveDeny
Leave a note for design
The note waits for a yes
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.
Reads fromZeplin
All connectors →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.
zeplin__list_project_screensok
Checkout · updated today
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 guidesClaude CodeCodexCursor