How to Integrate Bolt.new with Sketch

Sketch offers several export formats, each suited to different purposes in the Bolt.new workflow. The right export format depends on what you are trying to communicate to Bolt's AI. For layout and visual reference screenshots: use Sketch's built-in artboard export. Right-click any artboard and choose 'Export Layer' or press Shift+Cmd+E to open the Export panel. For a full-artboard screenshot you will use as a Bolt prompt attachment, export as PNG at 2x resolution — this gives a crisp image at 144 DPI that looks clear in Bolt's chat. For hero images or background photos embedded in the design, export at 1x for regular screens and 2x for retina. For icons and decorative illustrations: export as SVG. SVG files scale perfectly and can be pasted directly into your Bolt project's `public/` folder or as inline JSX. In Sketch's Export panel, set the format to SVG and export individual icon layers. SVGs can be imported in React as components using your build tool's SVG handling — in Vite projects, configure `vite-plugin-svgr` if you want `import { ReactComponent as Icon } from './icon.svg'` syntax. For logos: export both SVG (for scalability) and PNG at 2x (as a fallback). Most Bolt projects work fine with `<img src="/logo.png" />` pointing to the 2x PNG in the public folder. For photography or complex illustrations: PNG at 2x is appropriate. Avoid exporting photos as SVG — vector tracing of photos produces enormous, slow SVG files. Organize your exports into a folder structure that mirrors the component hierarchy: `exports/components/buttons/`, `exports/components/cards/`, `exports/pages/home/`. This makes it easy to attach the right reference when prompting Bolt for each component.

The Inspect panel is where Sketch becomes valuable as a design specification tool for Bolt. Click any element in Sketch and switch to the Inspect tab in the right sidebar. This panel shows every visual property of the selected element in CSS-compatible units. For colors: click any colored element and Inspect shows the exact hex value (e.g., `#1a1a2e`). For text, it shows the fill color separately from any stroke. Build a color reference by clicking each distinct color in your design. If your Sketch file has shared styles (Library symbols), the colors may be named — note those names alongside the hex values as they become your custom Tailwind color names. For typography: select any text element. Inspect shows font family, font size (px), font weight (100-900 or named weights like Regular/Bold), line height (px or multiple), letter spacing (px), and text alignment. In Tailwind: 16px = `text-base`, 18px = `text-lg`, 24px = `text-2xl`. Letter spacing in Sketch is in pixels — convert to em by dividing by font size (e.g., 0.5px at 16px font = `tracking-[0.031em]`). For spacing and sizing: Sketch shows width, height, and position of every element. The spacing between elements (the gap in flex layouts or margin values) is not directly shown — measure it using Sketch's smart guides. Hold Alt/Option while hovering over an element to see its distance from other elements. These pixel values map to Tailwind's spacing scale: 4px = 1 (space-1), 8px = 2 (space-2), 16px = 4 (space-4), 24px = 6 (space-6). For shadows: Inspect shows each shadow layer with x-offset, y-offset, blur, spread, and color with opacity. A Sketch shadow of `0 4px 12px rgba(0,0,0,0.12)` maps to Tailwind's `shadow-md`. More precise shadows should be added to tailwind.config.ts as custom shadow values. For border radius: Inspect shows the corner radius in pixels. 4px = `rounded`, 8px = `rounded-lg`, 12px = `rounded-xl`, 16px = `rounded-2xl`, pill/full radius = `rounded-full`.

1// tailwind.config.ts — example built from Sketch design tokens
2import type { Config } from 'tailwindcss';
3
4const config: Config = {
5  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
6  theme: {
7    extend: {
8      // Colors from Sketch's Inspect panel (color HEX values)
9      colors: {
10        // Primary brand color family
11        primary: {
12          50: '#eff6ff',
13          100: '#dbeafe',
14          500: '#3b82f6',  // main CTA blue from Sketch
15          600: '#2563eb',  // hover state from Sketch
16          900: '#1e3a8a',  // dark text on light bg
17        },
18        // Neutral / surface colors
19        surface: {
20          0: '#ffffff',
21          50: '#f8fafc',
22          100: '#f1f5f9',  // card background from Sketch
23          200: '#e2e8f0',  // border color from Sketch
24          900: '#0f172a',  // primary text from Sketch
25        },
26        // Accent color from Sketch
27        accent: '#f59e0b',
28        // Semantic colors from Sketch
29        error: '#ef4444',
30        success: '#22c55e',
31      },
32      // Custom font family from Sketch
33      fontFamily: {
34        sans: ['Inter', 'system-ui', 'sans-serif'],
35        display: ['Cal Sans', 'Inter', 'sans-serif'],
36      },
37      // Custom shadow values from Sketch shadow inspector
38      boxShadow: {
39        'card': '0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06)',
40        'card-hover': '0 8px 30px rgba(0,0,0,0.12)',
41        'modal': '0 25px 60px rgba(0,0,0,0.20)',
42      },
43      // Custom border radius from Sketch corner radius values
44      borderRadius: {
45        'sm': '4px',
46        'DEFAULT': '8px',
47        'lg': '12px',
48        'xl': '16px',
49        'card': '20px',
50      },
51    },
52  },
53};
54
55export default config;

With exported screenshots and extracted design values, you can write Bolt prompts that produce accurate implementations of your Sketch designs. The key is combining visual context (screenshot or Sketch Cloud link) with numeric precision (values from Inspect). The most effective prompt structure includes four elements: a visual reference, a description of the component's purpose and behavior, the exact design values from Sketch Inspect, and the technical constraints (Tailwind classes, React component structure, accessibility requirements). When attaching a screenshot in Bolt's chat, write the text part of your prompt first, then attach the image. Bolt's AI reads the screenshot and the text together — the text description guides what aspects of the visual to prioritize. For complex designs, describe the layout hierarchy: 'This is a 3-column card grid. Each card has: a 200px height image at the top with border-radius 12px on the top corners only, a content area with 24px padding, a title in Inter Bold 20px, a body text at 14px with 1.6 line height in color #6b7280.' For Sketch Cloud links: Sketch Cloud allows sharing artboards as public URLs. Share your artboard (click the Share button or File → Share to Cloud), and paste the URL in Bolt's chat. The AI can browse the URL and reference the visual. Combine this with your extracted values in the same message. Break complex pages into component-by-component prompts. Start with the global design system (navigation, typography, color palette), then prompt for each major section. Bolt maintains context from previous turns — say 'using the button styles we defined earlier' rather than re-specifying them each time.

1// Example component implementation from Sketch design values
2// Sketch Inspect showed: card border-radius 20px, padding 24px,
3// shadow '0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06)'
4// Title: Inter Bold 18px, color #0f172a
5// Subtitle: Inter Regular 14px, 1.6 line height, color #64748b
6// CTA button: primary-500 bg, border-radius 8px, 12px 24px padding
7
8interface FeatureCardProps {
9  icon: React.ReactNode;
10  title: string;
11  description: string;
12  ctaLabel: string;
13  onCtaClick: () => void;
14}
15
16export function FeatureCard({ icon, title, description, ctaLabel, onCtaClick }: FeatureCardProps) {
17  return (
18    <div className="bg-surface-0 rounded-card p-6 shadow-card hover:shadow-card-hover transition-shadow duration-200">
19      <div className="w-12 h-12 bg-primary-50 rounded-lg flex items-center justify-center mb-4">
20        <span className="text-primary-500">{icon}</span>
21      </div>
22      <h3 className="font-bold text-lg text-surface-900 mb-2">{title}</h3>
23      <p className="text-sm text-[#64748b] leading-relaxed mb-5">{description}</p>
24      <button
25        onClick={onCtaClick}
26        className="w-full bg-primary-500 hover:bg-primary-600 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-150"
27      >
28        {ctaLabel}
29      </button>
30    </div>
31  );
32}

Sketch's Symbol system — reusable component definitions that can be overridden per instance — maps naturally to React's component model. Understanding this mapping helps you structure your Bolt prompts to produce a component library that mirrors your Sketch symbol organization. In Sketch, symbols have overrides: a Button symbol might have text, icon, color variant, and size overrides. In React, these become props. When you see a Button symbol in Sketch with overrides for Label (text), Style (primary/secondary/destructive), and Size (small/medium/large), prompt Bolt to create a Button component with corresponding TypeScript props. Sketch symbol libraries (linked files containing shared components) map to your React component library in `components/`. Each symbol page in Sketch corresponds to a component category — if Sketch has a 'Form' symbol page with Input, Checkbox, Radio, and Select symbols, prompt Bolt to create a matching `components/forms/` directory with one file per component. Symbol nesting in Sketch (symbols containing other symbols) maps to component composition in React. A Card symbol that contains Avatar, Badge, and Button symbols translates to a `<Card>` component that renders `<Avatar>`, `<Badge>`, and `<Button>` child components. Describe this nesting in your Bolt prompt explicitly: 'Create a UserCard component that renders an Avatar, a name and role text block, and a StatusBadge component'. For Sketch text styles (reusable text formatting): these map directly to Tailwind typography classes. If your Sketch library defines 'Heading 1', 'Body', and 'Caption' text styles with specific font sizes, weights, and colors, create matching utility class combinations in your project and use them consistently in Bolt prompts.

1// Mapping Sketch symbol variants to React component props
2// Sketch: Button symbol with Style override (primary/secondary/destructive)
3// and Size override (sm/md/lg)
4
5type ButtonVariant = 'primary' | 'secondary' | 'destructive';
6type ButtonSize = 'sm' | 'md' | 'lg';
7
8const variantClasses: Record<ButtonVariant, string> = {
9  primary: 'bg-primary-500 hover:bg-primary-600 text-white',
10  secondary: 'bg-surface-100 hover:bg-surface-200 text-surface-900 border border-surface-200',
11  destructive: 'bg-error hover:bg-red-600 text-white',
12};
13
14const sizeClasses: Record<ButtonSize, string> = {
15  sm: 'px-3 py-1.5 text-sm rounded',
16  md: 'px-5 py-2.5 text-sm rounded-lg',
17  lg: 'px-6 py-3 text-base rounded-lg',
18};
19
20interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
21  variant?: ButtonVariant;
22  size?: ButtonSize;
23  loading?: boolean;
24  children: React.ReactNode;
25}
26
27export function Button({
28  variant = 'primary',
29  size = 'md',
30  loading = false,
31  children,
32  className = '',
33  disabled,
34  ...props
35}: ButtonProps) {
36  return (
37    <button
38      className={`font-medium transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed
39        ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
40      disabled={disabled || loading}
41      {...props}
42    >
43      {loading ? 'Loading...' : children}
44    </button>
45  );
46}

Not every Sketch design element translates cleanly to Tailwind and standard React patterns. Knowing these gaps upfront helps you decide when to follow the Sketch design exactly and when to adapt it for the web medium. Sketch gradients map approximately to Tailwind: a linear gradient from `#3b82f6` to `#8b5cf6` at 135 degrees becomes `bg-gradient-to-br from-blue-500 to-violet-500`. Complex radial gradients, mesh gradients, or conic gradients require custom CSS via Tailwind's `bg-[...]` escape hatch or custom CSS in `globals.css`. Blend modes in Sketch (multiply, screen, overlay) have no direct Tailwind equivalent — use Tailwind's `mix-blend-multiply`, `mix-blend-screen`, etc. which map to CSS mix-blend-mode. These work in modern browsers but check your browser support requirements. Sketch's blur effects (background blur for frosted glass cards) map to Tailwind's `backdrop-blur-md` or `backdrop-blur-lg`. The visual result depends on what is behind the element — ensure the background has sufficient visual content for the blur to be visible. When to rebuild vs. follow Sketch closely: follow the Sketch design closely for marketing pages and brand-critical UI where visual fidelity matters. Rebuild from scratch in Bolt for functional UI (forms, data tables, admin dashboards) where the Sketch design is a rough wireframe rather than pixel-perfect spec. For functional UI, Bolt's defaults (Tailwind's aesthetic, shadcn/ui components) often produce better results than trying to exactly replicate a design not optimized for Tailwind's grid. Sketch prototyping links (hotspots between artboards) are navigation specs, not visual specs — translate these into React Router `<Link>` components or `useNavigate()` calls rather than trying to replicate them visually.