How to Integrate Bolt.new with Zeplin

Install the Zeplin plugin in your design tool of choice. For Figma: search 'Zeplin' in the Figma Community tab or go to Plugins → Browse plugins → search 'Zeplin'. For Sketch: go to Plugins → Manage plugins → search 'Zeplin'. For Adobe XD: go to Plugins panel → browse → search 'Zeplin'. Once the plugin is installed, open your design file and run the Zeplin plugin (usually via the Plugins menu or right-click context menu). Sign in to your Zeplin account through the plugin. Create a new Zeplin Project or connect to an existing one — projects in Zeplin correspond to design files or products, not individual screens. Select the frames, artboards, or components you want to export and click 'Export to Zeplin'. The plugin uploads screenshots and layer data to Zeplin's servers. For Figma, you can also use Zeplin's direct Figma import: open Zeplin → New Project → Import from Figma → paste your Figma file URL. This approach often preserves more component structure than the plugin export.

Open any screen in Zeplin and click on any element in the design. The Inspect panel on the right side immediately shows CSS properties for the selected element — positioning, dimensions, colors, typography, borders, shadows, and opacity. This is the core feature that makes Zeplin valuable for Bolt.new integration. For text elements, Zeplin shows font-family, font-size, font-weight, line-height, letter-spacing, and color. For containers and shapes, it shows width, height, padding, margin, border-radius, background-color, and box-shadow with exact pixel values. For icons and images, it shows dimensions and offers download options. Zeplin shows measurements in CSS pixels by default. It also shows distances between elements when you hover — hover over a gap between two elements to see the spacing in pixels. This is invaluable for getting padding and gap values right without guessing. For translating to Tailwind classes: Zeplin shows exact pixel values, so you'll match them to the nearest Tailwind step. Tailwind uses a 4px base unit — 4px=1, 8px=2, 12px=3, 16px=4, 20px=5, 24px=6. Colors: if the design uses a standard color (like blue-600 #2563EB), you can use the Tailwind class directly. For custom brand colors, you'll need to add them to tailwind.config.js.

Zeplin's Styleguide is a separate section in your project that documents the shared design tokens — color palettes, typography scales, spacing, and component variants. If your designer has set up the Styleguide (which designers using Figma Styles or Sketch Symbols can do automatically), this becomes your single source of truth for building the Tailwind configuration in Bolt.new. Navigate to the Styleguide tab in your Zeplin project. You'll see color swatches with hex values and names, text styles showing font families and sizes, and potentially component definitions. Click any color swatch to see its hex value, RGB values, and the name assigned in the design tool (e.g., 'brand/primary/500' or 'Gray/700'). These color names and values map directly to a Tailwind theme extension in tailwind.config.js. If your brand has colors with names, use those names in your Tailwind config to maintain consistency between the design file and the code. Typography styles similarly map to Tailwind's fontFamily, fontSize, and fontWeight configurations. Write down or screenshot all Styleguide values before starting your Bolt.new build session. Having the complete design token list ready makes your prompts much more precise and reduces back-and-forth corrections.

1// Example tailwind.config.js based on Zeplin Styleguide values
2// Replace values with what you find in your own Zeplin Styleguide
3import type { Config } from 'tailwindcss';
4
5const config: Config = {
6  content: ['./src/**/*.{ts,tsx}'],
7  theme: {
8    extend: {
9      colors: {
10        // From Zeplin Styleguide → Colors section
11        brand: {
12          50: '#EFF6FF',
13          100: '#DBEAFE',
14          500: '#3B82F6',
15          600: '#2563EB',   // Primary button color
16          700: '#1D4ED8',   // Hover state
17          900: '#1E3A8A',
18        },
19        // Neutrals
20        'gray-surface': '#F9FAFB',
21        'gray-border': '#E5E7EB',
22        'gray-text': '#374151',
23      },
24      fontFamily: {
25        // From Zeplin Styleguide → Text Styles section
26        heading: ['Sora', 'sans-serif'],
27        body: ['Inter', 'sans-serif'],
28        mono: ['JetBrains Mono', 'monospace'],
29      },
30      fontSize: {
31        // Map design's named text styles to sizes
32        'display-xl': ['56px', { lineHeight: '64px', fontWeight: '700' }],
33        'display-lg': ['40px', { lineHeight: '48px', fontWeight: '700' }],
34        'heading-md': ['24px', { lineHeight: '32px', fontWeight: '600' }],
35        'body-lg': ['18px', { lineHeight: '28px', fontWeight: '400' }],
36        'body-sm': ['14px', { lineHeight: '20px', fontWeight: '400' }],
37      },
38      borderRadius: {
39        // From component specs in Zeplin
40        'sm': '4px',
41        'md': '8px',
42        'lg': '12px',
43        'xl': '16px',
44        '2xl': '24px',
45      },
46    },
47  },
48  plugins: [],
49};
50
51export default config;

Zeplin can export design assets — images, icons, and illustrations — in multiple formats and resolutions directly from the design file, without requiring access to the original Figma or Sketch file. This is especially useful when a designer shares a Zeplin project link but not the source file. To download an asset: click on an image or icon in any Zeplin screen, then look for the Download or Export button in the Inspect panel. For images, Zeplin offers 1x, 2x, and 3x resolutions for retina display support. For vector icons and illustrations, download as SVG for sharp rendering at any size. For icons that appear in multiple places across a design, use Zeplin's global Components or Symbols view to download each unique icon once. Add downloaded SVG files to your Bolt.new project's public/ folder or src/assets/ folder, then prompt Bolt to create an Icon component that references them.

With exact values from Zeplin's Inspect panel, you can now write precise Bolt.new prompts that produce components closely matching the original design. The key technique is specificity — the more exact values you provide, the less the AI needs to guess. A generic Bolt prompt produces an approximation of the design. A Zeplin-informed prompt produces a much closer match. Compare these two approaches for the same component: Generic: 'Create a card component with a title, description, and button' Zeplin-informed: 'Create a card component with white background, border 1px solid #E5E7EB, border-radius 12px, padding 24px, box-shadow 0 1px 3px rgba(0,0,0,0.1). Title in Inter 18px font-weight 600 color #111827. Description in Inter 14px font-weight 400 color #6B7280, margin-top 8px. Button at bottom with bg-blue-600 hover:bg-blue-700, text-white, text-sm font-medium, px-4 py-2, rounded-lg, margin-top 16px.' The Zeplin-informed prompt produces a component that requires far fewer revision cycles. For complex designs with many components, extract values from Zeplin screen by screen and write component-specific prompts for each.