How to Integrate Zeplin with V0

Open your Zeplin project and navigate to the screen or component you want to implement with V0. Zeplin shows all the specifications you need in the right panel when you click on any element: exact hex color values with their style guide names, font family and size with weight and line height, padding and margin values, border radius, box shadow, and image dimensions. For each component you want to generate with V0, work through the design systematically and note down the values that are specific to your design (as opposed to generic Tailwind defaults). Pay special attention to interactive states — hover, focus, and disabled — which Zeplin shows in the layers panel when different states are defined in the source design. The most valuable data from Zeplin for V0 prompts is: the exact hex values for any colors not in the default Tailwind palette, the specific font sizes and weights if they diverge from Tailwind's defaults, the border-radius and spacing values, and the box shadow parameters. For complex components with many sub-elements, take a screenshot of the Zeplin screen alongside the spec panel — you can describe the layout to V0 using the screenshot as a visual reference while citing the exact spec values. Zeplin's export feature (File → Export) can export assets like icons and images as SVG or PNG files that you add to your Next.js public folder.

Before generating components with V0, set up your project's tailwind.config.ts to reflect your Zeplin style guide's color and typography tokens. This is a one-time setup that pays dividends across all future V0 generations — once your tailwind.config.ts has your brand colors as named tokens, you can prompt V0 with 'use bg-brand-600 for the primary button' instead of specifying hex values every time. To create the config, open your Zeplin project → Style Guide (palette icon in left sidebar) → Colors section. Export or manually copy the color palette with their semantic names. Map each color to a Tailwind scale value (primary, secondary, brand, etc.) and create the corresponding entries in tailwind.config.ts. Do the same for typography: note the font family stack, the size scale, and font weight values from the Text Styles section in Zeplin's style guide. The resulting tailwind.config.ts becomes your design system's code representation. When you push this config to your GitHub repository and V0 is connected to it, V0 will generate components that reference your custom Tailwind classes automatically — it can see the tailwind.config.ts in your project context when generating new components.

1// tailwind.config.ts — generated from Zeplin style guide tokens
2import type { Config } from 'tailwindcss';
3
4const config: Config = {
5  content: [
6    './app/**/*.{js,ts,jsx,tsx,mdx}',
7    './components/**/*.{js,ts,jsx,tsx,mdx}',
8  ],
9  theme: {
10    extend: {
11      colors: {
12        // Primary brand palette — from Zeplin style guide
13        primary: {
14          50: '#EEF2FF',
15          100: '#E0E7FF',
16          200: '#C7D2FE',
17          300: '#A5B4FC',
18          400: '#818CF8',
19          500: '#6366F1',
20          600: '#4F46E5',  // Primary CTA button
21          700: '#4338CA',  // Hover state
22          800: '#3730A3',
23          900: '#312E81',
24        },
25        neutral: {
26          50: '#F9FAFB',
27          100: '#F3F4F6',
28          200: '#E5E7EB',
29          300: '#D1D5DB',
30          400: '#9CA3AF',
31          500: '#6B7280',
32          600: '#4B5563',
33          700: '#374151',
34          800: '#1F2937',
35          900: '#111827',
36        },
37        success: '#10B981',
38        warning: '#F59E0B',
39        danger: '#EF4444',
40      },
41      fontFamily: {
42        sans: ['Inter', 'system-ui', 'sans-serif'],
43      },
44      borderRadius: {
45        sm: '4px',
46        DEFAULT: '8px',
47        lg: '12px',
48        xl: '16px',
49        '2xl': '24px',
50      },
51      boxShadow: {
52        card: '0 2px 8px rgba(0, 0, 0, 0.08)',
53        elevated: '0 4px 16px rgba(0, 0, 0, 0.12)',
54      },
55    },
56  },
57  plugins: [],
58};
59
60export default config;

With your tailwind.config.ts set up and Zeplin specs in front of you, write V0 prompts that describe each component with the exact values from Zeplin. The quality of V0's output is directly proportional to the specificity of your prompt — vague prompts produce generic components, while prompts with exact measurements produce designs that closely match the Zeplin handoff. Structure your V0 prompt to cover the component hierarchy: start with the container (max width, padding, background, border, shadow), then describe each child element (inputs, buttons, labels, images) with their specific height, color class, font size, and interactive states. Reference your custom Tailwind classes where defined (bg-primary-600 instead of a hex code), and use explicit pixel values for anything outside the Tailwind default scale. For complex screens with multiple components, break the generation into individual components rather than asking for the entire page at once — V0 generates more accurate results for focused component descriptions. After generating, compare the V0 output visually against the Zeplin screen. Use Zeplin's annotation feature (the comment tool) to document any discrepancies that need manual adjustment in the generated code.

For teams with frequently updated design systems, the Zeplin API lets you programmatically fetch the latest style guide tokens rather than manually checking Zeplin for every design update. The Zeplin REST API base URL is https://api.zeplin.dev/v1 and requires authentication via a personal access token in the Authorization header. Key endpoints include GET /projects (list all projects), GET /projects/{projectId}/styleguide (get the style guide with colors and text styles), and GET /projects/{projectId}/screens (list screens). To find your project ID, log into Zeplin and look at the URL — it contains the project ID after /project/. Create a Next.js API route that fetches your Zeplin style guide and returns it as structured data. You can also create a build-time script that runs before deployment to regenerate tailwind.config.ts from the latest Zeplin tokens. This is optional for most teams but valuable for design systems with rapid iteration cycles where manual token synchronization becomes error-prone. The Zeplin API returns colors as objects with name, r, g, and b fields — convert RGB to hex in your transform function. Text styles include fontFamily, fontSize, fontWeight, and lineHeight properties that map directly to Tailwind configuration values.

1// app/api/zeplin/style-guide/route.ts
2import { NextResponse } from 'next/server';
3
4const ZEPLIN_API_BASE = 'https://api.zeplin.dev/v1';
5
6function rgbToHex(r: number, g: number, b: number): string {
7  return '#' + [r, g, b]
8    .map((v) => Math.round(v * 255).toString(16).padStart(2, '0'))
9    .join('')
10    .toUpperCase();
11}
12
13export async function GET() {
14  const token = process.env.ZEPLIN_ACCESS_TOKEN;
15  const projectId = process.env.ZEPLIN_PROJECT_ID;
16
17  if (!token || !projectId) {
18    return NextResponse.json(
19      { error: 'Zeplin is not configured — set ZEPLIN_ACCESS_TOKEN and ZEPLIN_PROJECT_ID' },
20      { status: 500 }
21    );
22  }
23
24  try {
25    const response = await fetch(
26      `${ZEPLIN_API_BASE}/projects/${projectId}/styleguide`,
27      {
28        headers: {
29          Authorization: `Bearer ${token}`,
30          'Content-Type': 'application/json',
31        },
32      }
33    );
34
35    if (!response.ok) {
36      throw new Error(`Zeplin API error: ${response.status}`);
37    }
38
39    const data = await response.json();
40
41    // Transform Zeplin colors to hex values
42    const colors = (data.colors || []).map((color: any) => ({
43      name: color.name,
44      hex: rgbToHex(color.r, color.g, color.b),
45      opacity: color.a,
46    }));
47
48    // Transform text styles
49    const textStyles = (data.textStyles || []).map((style: any) => ({
50      name: style.name,
51      fontFamily: style.fontFamily,
52      fontSize: style.fontSize,
53      fontWeight: style.fontWeight,
54      lineHeight: style.lineHeight,
55      color: style.color
56        ? rgbToHex(style.color.r, style.color.g, style.color.b)
57        : null,
58    }));
59
60    return NextResponse.json({ colors, textStyles });
61  } catch (error) {
62    const message = error instanceof Error ? error.message : 'Unknown error';
63    console.error('Zeplin style guide fetch error:', message);
64    return NextResponse.json({ error: message }, { status: 500 });
65  }
66}