Design and mediaZeplin

The design handed off in Zeplin, built as a website

When a designer hands off work in Zeplin, the specs are ready. Connect it and the AI uses the screens and styleguide for your pages, without you translating them by hand.

Create your site for free Integrations

What you can do

Pages that follow your screens

The AI reads the screens of a Zeplin project and builds the pages with their order and text.

Your styleguide

The AI takes the colors, fonts and components from the styleguide and uses them across your website.

Notes after you confirm

Ask the AI to leave a note on a screen, for example a question for the designer. It happens only after you confirm.

What you can ask the AI

Examples to type in the chat once the app is connected to your website.

Build the Pricing page from the Pricing screen in the Website project in Zeplin.
Use the colors and fonts of the Zeplin styleguide for buttons and headings.
Leave a note in Zeplin on the Contact screen about the mobile version.

How to connect it

1
Step 1
Open Integrations
In Studio, open Integrations in the website where you want to use Zeplin and find it in the Browse tab.
2
Step 2
Click Connect
Click Connect, sign in to your Zeplin account in the window that opens and approve access. The connection applies to this website only.
3
Step 3
Ask the AI
In the chat, say what you need from Zeplin. The AI reads what it needs and asks for your confirmation before any action in the app.

You stay in control

The AI reads your data directly when it needs it, but anything that sends, changes or deletes something in the app waits until you confirm it in the chat. Your data stays private and never shows up on your website unless you ask for it.

Frequently asked questions

Does the AI follow the design exactly?

The AI follows the screens, colors and text and builds a real website that works on every screen. You fine tune the details in the chat or the editor.