How to Integrate Bolt.new with Adobe Creative Cloud

Photoshop is the standard tool for editing photographs, creating UI backgrounds, and compositing complex raster images. When bringing Photoshop assets into Bolt.new, the most important decision is the export format and size. Bolt's WebContainer can use any image format, but choosing the right format dramatically affects your app's loading speed and visual quality. For photographs and complex images with gradients, export as WebP. WebP is now supported by all modern browsers and offers 25-35% smaller file sizes than JPEG at the same visual quality. In Photoshop, go to File → Export → Export As. In the dialog, select 'WebP' from the Format dropdown. For web use, 80-85% quality provides an excellent balance of size and quality. For hero images displayed at full screen width, export at 1920px wide. For card images and thumbnails, 800px wide is typically sufficient. For images that require transparency (logos with transparent backgrounds, UI overlays, cut-out product shots), use PNG export. PNG-24 preserves full transparency but creates larger files. PNG-8 reduces colors to 256, appropriate for simple graphics with flat colors. For icons and simple graphics with transparency, consider asking your designer to provide these in SVG format from Illustrator instead — SVG files are typically much smaller and scale perfectly to any resolution. Once you have exported your images, you have three ways to get them into Bolt.new. The simplest is to drag files directly into Bolt's file explorer in the left sidebar — this uploads them to your project's public/ directory (for Vite projects) or public/ directory in Next.js. You can also prompt Bolt: 'Create an img component that references /hero-background.webp from the public folder' and Bolt will generate the correct import path. For images hosted on an external CDN or Adobe's delivery network, you can reference them directly by URL in your React components — no local file required.

Illustrator is the professional standard for vector graphics — logos, icons, illustrations, diagrams, and any graphic that needs to remain crisp at any size. SVG (Scalable Vector Graphics) is the ideal format for web use because it is resolution-independent, supports CSS styling and animation, and typically produces very small file sizes for simple shapes. To export an SVG from Illustrator, go to File → Export → Export As. Select SVG from the format dropdown. In the SVG options dialog, choose: SVG Profile: SVG 1.1; Fonts: Convert to Outlines (embeds fonts as shapes, no external dependency); Images: Embed (for any raster images in the file); Decimal Places: 2 (reduces file size); Presentation Attributes: Inline Style. Click OK. The resulting SVG file can be placed directly in your Bolt project. For icons specifically, Illustrator's Export for Screens feature (File → Export → Export for Screens) is better suited. It lets you export multiple artboards at once and optimize each for different sizes. Create one artboard per icon, name it clearly (icon-dashboard, icon-settings), and export them all as a batch. Each icon artboard should be 24x24 or 48x48 pixels — standard icon grid sizes that align with common design systems. One critical optimization for icons in React: remove fixed width and height attributes from the SVG element before importing. Instead, use width='1em' height='1em' — this makes the icon scale with the surrounding font size via CSS. Also ensure the fill attribute uses 'currentColor' so the icon inherits its color from the CSS color property, making it trivial to theme icons in dark mode or on different backgrounds. In Bolt.new, you can either import SVG files as React components (using the SVGR transform in Vite) or use them as img src attributes. For icons that need to change color or be animated, import as React components. For static illustrations that never change, img src is simpler. Prompt Bolt to set up the correct SVG import configuration for your project.

1// components/icons/DashboardIcon.tsx
2// Paste exported Illustrator SVG content, cleaned up for React
3interface IconProps {
4  size?: number;
5  color?: string;
6  className?: string;
7}
8
9export function DashboardIcon({ size = 24, color = 'currentColor', className }: 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    >
19      {/* Paste the <path> and <rect> elements from your exported Illustrator SVG here */}
20      <rect x="3" y="3" width="7" height="7" fill={color} />
21      <rect x="14" y="3" width="7" height="7" fill={color} />
22      <rect x="3" y="14" width="7" height="7" fill={color} />
23      <rect x="14" y="14" width="7" height="7" fill={color} />
24    </svg>
25  );
26}

Adobe Libraries is Adobe's cross-app design system feature — a shared panel in Photoshop, Illustrator, and other CC apps that stores colors, character styles, graphics, and patterns that stay in sync across your team and projects. If your organization uses Adobe Libraries to manage a design system, extracting these tokens and applying them to your Bolt.new project's Tailwind configuration ensures visual consistency between design files and the web app. To extract colors from Adobe Libraries, open any CC app and open the Libraries panel (Window → Libraries). Click on a color swatch to inspect it — you will see its hex, RGB, or HSL values in the color picker. Adobe does not provide a simple 'export all tokens' button in the standard Creative Cloud desktop interface, so you will need to manually note the values or use the Adobe Creative Cloud desktop app's API if your organization has enterprise access. For a typical brand palette, you will be collecting: primary colors (brand blue, brand purple, etc.), neutral colors (backgrounds, text, borders), semantic colors (success green, warning yellow, error red), and typography settings (font families, font sizes, line heights, font weights). Once collected, paste these values into a Bolt.new chat prompt to generate an updated Tailwind configuration. The Tailwind config extends the default theme with your brand tokens. Colors go under the 'colors' key (or inside 'extend.colors' to keep default colors available), font families go under 'fontFamily,' and custom spacing goes under 'spacing' if your design system uses a non-standard scale. After updating tailwind.config.ts, every Tailwind utility class in your project will automatically use the brand colors — for example, bg-brand-primary, text-brand-secondary, border-brand-accent.

1// tailwind.config.ts
2import type { Config } from 'tailwindcss';
3
4const config: Config = {
5  content: [
6    './pages/**/*.{js,ts,jsx,tsx,mdx}',
7    './components/**/*.{js,ts,jsx,tsx,mdx}',
8    './app/**/*.{js,ts,jsx,tsx,mdx}',
9  ],
10  theme: {
11    extend: {
12      colors: {
13        brand: {
14          primary: '#1B4FD8',
15          secondary: '#0EA5E9',
16          accent: '#F59E0B',
17          background: '#0F172A',
18          surface: '#1E293B',
19          'text-primary': '#F8FAFC',
20          'text-secondary': '#94A3B8',
21          success: '#10B981',
22          error: '#EF4444',
23        },
24      },
25      fontFamily: {
26        sans: ['Inter', 'system-ui', 'sans-serif'],
27        display: ['Sora', 'system-ui', 'sans-serif'],
28      },
29    },
30  },
31  plugins: [],
32};
33
34export default config;

Adobe Firefly is Adobe's generative AI image model, integrated into Photoshop (via Generative Fill), Illustrator (via Generative Vector Fill and Text to Vector), and the standalone Firefly web app (firefly.adobe.com). Unlike images generated by Midjourney or DALL-E, Adobe Firefly is trained exclusively on licensed Adobe Stock images, openly licensed content, and public domain material. This makes Firefly-generated images commercially safe to use in production applications without copyright concerns — Adobe indemnifies users against copyright infringement claims for Firefly-generated content. To generate images for your Bolt.new app using Firefly, go to firefly.adobe.com and log in with your Adobe account. The 'Text to Image' model lets you describe the image you want in natural language. Be specific about style, lighting, and composition: 'A minimalist dashboard UI screenshot on a dark background, isometric perspective, blue and purple gradients, professional tech aesthetic' produces far better results than 'dashboard screenshot.' Try different styles (Photo, Art, Graphic) and aspect ratios (Widescreen for hero images, Square for profile photos, Portrait for mobile screens). Once you have an image you are happy with, download it as JPEG or PNG directly from the Firefly web app. If you opened Firefly inside Photoshop (via the Generative Fill toolbar), the generated result is automatically added as a new layer in your Photoshop document, where you can continue editing it before exporting for web. Bring the downloaded Firefly images into Bolt by dragging them into the file explorer sidebar. Bolt places them in the public/ directory by default. Reference them with a simple /filename.jpg path in your React components or CSS background-image properties. Since Firefly images are standard JPEG or PNG files, there is no special handling required — they work identically to any other image in your Bolt project.

With your Adobe CC assets exported and placed in the Bolt project, the final step is wiring them up in your React components so they display correctly. The approach differs slightly depending on whether you are using a Vite project (default in Bolt) or a Next.js project. For Vite projects, images placed in the public/ folder are served at the root URL path — for example, public/hero.webp is available at /hero.webp. Import them in React components using the src prop directly: <img src='/hero.webp' alt='Hero' />. For SVG files that you want to use as React components (inline SVG with CSS control), Vite supports importing SVGs as React components using the vite-plugin-svgr plugin. Prompt Bolt to install and configure vite-plugin-svgr, then import SVGs with: import { ReactComponent as Logo } from '/logo.svg'. For Next.js projects, use the built-in next/image component for any raster images. It provides automatic WebP conversion, responsive image optimization, lazy loading, and prevents Cumulative Layout Shift (CLS). The src prop accepts paths relative to the public/ folder: <Image src='/product-screenshot.webp' alt='Product' width={800} height={600} />. For images from external domains (like Adobe's CDN), add the domain to next.config.ts under images.domains. For SVG files in both Vite and Next.js, the simplest approach is importing them as URL strings and using them in standard img tags: import logoSrc from './assets/logo.svg'; then <img src={logoSrc} alt='Logo' />. For icons that need color theming, paste the SVG content directly into a TypeScript React component so you can set fill='currentColor' and let CSS control the color via the color property.

1// components/HeroSection.tsx
2import Image from 'next/image';
3
4export function HeroSection() {
5  return (
6    <section className="relative h-screen w-full">
7      {/* Background image from Photoshop export */}
8      <Image
9        src="/hero.webp"
10        alt="Hero background"
11        fill
12        priority
13        className="object-cover"
14        quality={85}
15      />
16      {/* Dark overlay for text legibility */}
17      <div className="absolute inset-0 bg-black/50" />
18      {/* Content sits above the overlay */}
19      <div className="relative z-10 flex h-full flex-col items-center justify-center text-white">
20        <img src="/logo.svg" alt="Logo" className="mb-8 h-12" />
21        <h1 className="font-display text-5xl font-bold">Your Headline Here</h1>
22        <p className="mt-4 text-xl text-white/80">Supporting description text</p>
23      </div>
24    </section>
25  );
26}