How to Integrate Bolt.new with Adobe XD

Before writing a single Bolt prompt, spend 10 minutes extracting the design information you will need from Adobe XD. Open the design file and use File → Export → Selected or File → Export → All Artboards to export your screens as PNG at 1x resolution. One-times resolution gives you a reference image at the actual target pixel dimensions without inflating file size. If your design includes custom icons or illustrations, export those as SVG individually using File → Export → Assets — SVG preserves crispness at any size and converts easily to React components. Next, open XD's developer handoff view by clicking the Share icon and selecting Development mode, or by switching to the Inspect panel. Click individual elements to see their exact CSS values: hex color codes, font family and size, line height, padding, and border radius. Write these down — they become your Tailwind configuration. For a typical project you will extract 3-6 brand colors (primary, secondary, accent, background, text, border), 2-3 font sizes for headings, and the base spacing unit. If your XD design uses 8px as the smallest spacing unit, Tailwind's default spacing scale maps well using multiples of 2: 8px equals p-2, 16px equals p-4, 24px equals p-6, and 32px equals p-8. Document these mappings before you start prompting Bolt — consistency here prevents mismatched spacing throughout the project.

The most impactful first step in Bolt is configuring Tailwind to use your XD design tokens. When your custom colors, fonts, and spacing match the XD design system exactly, every subsequent component prompt becomes much easier because you can reference design tokens by name instead of by hex value. In Bolt's chat, prompt it to extend the Tailwind configuration with your extracted values. Bolt will update tailwind.config.ts with your custom tokens, adding them to the theme.extend section so they complement rather than override Tailwind's defaults. Once the tokens are in place, every subsequent component can reference colors like text-brand-primary or bg-brand-surface instead of arbitrary hex values. This also makes the codebase maintainable — if a color changes in the design system, you update one line in tailwind.config.ts rather than hunting through components. For typography, if your XD design uses a Google Font like Inter, Poppins, or Roboto, prompt Bolt to add it via the Next.js font system. Specify the exact font weights visible in the XD design, usually 400 for body, 500 for medium, 600 for semibold, and 700 for bold. After running the prompt, verify the preview background and text colors match your XD design before building any components — this baseline check prevents accumulated color drift across the project.

1// tailwind.config.ts — example with XD design tokens
2import type { Config } from 'tailwindcss';
3
4const config: Config = {
5  content: ['./src/**/*.{ts,tsx}'],
6  theme: {
7    extend: {
8      colors: {
9        brand: {
10          primary: '#6366f1',
11          secondary: '#8b5cf6',
12          surface: '#1e293b',
13          bg: '#0f172a',
14          text: '#f8fafc',
15          muted: '#94a3b8',
16          border: '#334155',
17        },
18      },
19      fontFamily: {
20        sans: ['Inter', 'system-ui', 'sans-serif'],
21      },
22      borderRadius: {
23        card: '12px',
24      },
25    },
26  },
27  plugins: [],
28};
29
30export default config;

The most effective Bolt prompts for design-to-code work describe structure rather than appearance. Instead of saying 'make it look like this screenshot', describe the layout as a developer would implement it: the number of columns, their widths, flex direction, nesting of elements, and the spacing values. Break your XD design into sections and describe each section with specific measurements and component types. A good structural prompt for a navigation sidebar would be: create a sidebar component that is 240px wide with a fixed height of 100vh and a dark brand-surface background. It contains a logo div that is 64px tall and vertically centered, a nav element with 5 NavItem components (each 48px tall, flex items-center, 16px left padding, hover:bg-brand-border transition, with an active state showing a left border 3px brand-primary), and a logout button fixed to the bottom with 16px padding. Include XD-specific details from the inspect panel: exact shadow values for cards, gradient direction and stop colors, border radius values. Reference the component names visible in XD's layer panel — if XD names a layer group ProductCard, name the React component ProductCard for design-to-code traceability. If your XD design uses multiple breakpoints, describe each breakpoint explicitly: 'on mobile (below 768px), the sidebar collapses and the 3-column grid becomes 1 column'. This structural approach consistently produces more accurate results than description-based prompts because it tells Bolt exactly how to lay out the HTML and CSS rather than asking it to infer structure from an appearance description.

With the layout shell in place, build each component by referencing the CSS values from XD's inspect panel. For each component in your XD design, click on it in inspect mode to see its exact CSS properties: font-size, font-weight, color, background, border-radius, padding, margin, and box-shadow. Use these values directly in Bolt prompts by referencing your Tailwind design tokens where they match, and using arbitrary Tailwind values like [14px] or [#334155] where the exact value does not appear in the standard scale. For components with hover and active states, XD prototypes often show both default and hover appearances — describe both states explicitly in your Bolt prompt. For interactive components like dropdowns or modals, describe the trigger element, the animation direction (fade in, slide down from top, slide in from right), the animation duration from XD's transition settings, and the close behavior. XD's auto-animate prototype transitions give you hints about intended animations: a transition from collapsed to expanded state usually maps to a CSS max-height transition or a height animation in React. Pay special attention to XD components that use overlapping elements, absolute positioning, or z-index layering — describe these explicitly as 'a notification badge positioned absolute at the top-right corner of the parent icon, -4px from both top and right' rather than just describing the visual result. Absolute positioning details are frequently lost in vague prompts but are critical for pixel-accurate output.

Icons are one area where Adobe XD's workflow integrates smoothly with Bolt. If your XD design uses custom icons rather than a standard library, export them as SVG via File → Export → Assets. XD will export each icon with full SVG markup including path data, viewBox attributes, and fill colors. These SVG files convert directly into React icon components. Open the exported .svg file in a text editor, copy the SVG markup, and paste it into a Bolt prompt asking it to create a typed React icon component. Bolt will convert the SVG to a proper React component with TypeScript props for size, color (defaulting to currentColor for CSS inheritance), and className. If your XD design uses a common icon library like Heroicons, Feather Icons, or Lucide — many XD design kits are based on these — identify which library it is and prompt Bolt to use the same library in the project. This guarantees the exact same icon shapes in both your XD prototype and the deployed app. For projects with many custom icons, prompt Bolt to create a centralized icons/index.tsx file that exports all icons as named React components, following the pattern import { DashboardIcon } from '@/components/icons'. One important note: XD exports SVGs with Adobe metadata that adds file size without adding rendering value. When pasting SVG code into Bolt, ask it to clean up the SVG by removing Adobe XD metadata, empty groups, and unused attributes while preserving all path data and the viewBox attribute.

1// src/components/icons/DashboardIcon.tsx
2// Example: XD SVG export converted to typed React component
3import { SVGProps } from 'react';
4
5interface IconProps extends SVGProps<SVGSVGElement> {
6  size?: number;
7}
8
9export function DashboardIcon({ size = 24, className, color = 'currentColor', ...props }: IconProps) {
10  return (
11    <svg
12      width={size}
13      height={size}
14      viewBox="0 0 24 24"
15      fill="none"
16      xmlns="http://www.w3.org/2000/svg"
17      className={className}
18      {...props}
19    >
20      {/* Path data preserved from XD SVG export */}
21      <rect x="3" y="3" width="7" height="7" rx="1" fill={color} />
22      <rect x="14" y="3" width="7" height="7" rx="1" fill={color} />
23      <rect x="3" y="14" width="7" height="7" rx="1" fill={color} />
24      <rect x="14" y="14" width="7" height="7" rx="1" fill={color} />
25    </svg>
26  );
27}
28
29// src/components/icons/index.ts
30export { DashboardIcon } from './DashboardIcon';
31export { UsersIcon } from './UsersIcon';
32export { ReportsIcon } from './ReportsIcon';