How to Integrate Bolt.new with Marvel

Create your app screens in Marvel using the Design mode. Marvel's canvas supports adding shapes, text, images, icons, and interactive hotspots. Design at 375px width for mobile or 1440px for desktop to match standard breakpoints. Keep designs focused on layout and key UI patterns rather than perfection — Marvel's simple design tools make pixel-perfect work time-consuming. For each screen you want Bolt to replicate, export as a PNG image: click the screen thumbnail, then the share/export button in the top toolbar, select PNG, and download. Export at 2x resolution for sharp rendering when uploaded to Bolt chat. Name files descriptively: 'home-screen.png', 'product-detail.png', 'checkout-flow.png'. Marvel's Prototype mode lets you add hotspots (tap zones) that navigate to other screens with transition animations. Document these interactions in a simple table as you create them: Screen 1 → Screen 2 (tap: 'Shop Now' button, transition: slide left). You will use this interaction table when prompting Bolt to set up React Router navigation. Marvel's prototype view URL can also be shared with stakeholders for feedback before you begin building in Bolt — this pre-approval step prevents costly mid-build direction changes.

Marvel Handoff (available on paid plans) gives developers exact CSS property values from your designs. To access it: open your project, click the 'Handoff' button in the top right corner. Click on any element in the design to see its CSS properties panel on the right: width, height, font-family, font-size, font-weight, color (hex), background-color, border-radius, padding, margin, and box-shadow values. Translating Marvel CSS values to Tailwind classes is a manual process but straightforward for the most common properties. Colors: take the hex value from Marvel (#4F46E5), look up the nearest Tailwind color (indigo-600 = #4F46E5 exactly in Tailwind v3). Font sizes: Marvel shows px values — 12px = text-xs, 14px = text-sm, 16px = text-base, 18px = text-lg, 20px = text-xl, 24px = text-2xl. Spacing: Marvel shows px padding/margin — divide by 4 to get the Tailwind number (16px padding = p-4, 24px margin = m-6, 8px gap = gap-2). Border radius: 4px = rounded-sm, 8px = rounded-lg, 16px = rounded-2xl, 50% = rounded-full. For font families, note the exact font name from Marvel Handoff. If it is a Google Font (Inter, Roboto, Poppins, etc.), add it to your Bolt project by prompting 'Add [FontName] from Google Fonts to this project.' If it is a system font (San Francisco, Segoe UI), use Tailwind's font-sans class which maps to the system font stack. Capture these translations in a simple document before starting your Bolt session: primary color, secondary color, accent color, body font, heading font, base spacing unit. Having these values ready means your Bolt prompts include exact styling specifications rather than approximate descriptions.

1/* CSS values from Marvel Handoff → Tailwind translations
2   Example for a typical SaaS app design:
3
4   Marvel Handoff CSS:                 Tailwind equivalent:
5   background: #4F46E5              → bg-indigo-600
6   background: #F9FAFB              → bg-gray-50
7   color: #111827                   → text-gray-900
8   color: #6B7280                   → text-gray-500
9   font-size: 14px                  → text-sm
10   font-size: 18px                  → text-lg
11   font-weight: 600                 → font-semibold
12   font-weight: 700                 → font-bold
13   padding: 12px 16px               → py-3 px-4
14   border-radius: 8px               → rounded-lg
15   border-radius: 12px              → rounded-xl
16   border: 1px solid #E5E7EB        → border border-gray-200
17   box-shadow: 0 1px 3px rgba()     → shadow-sm
18   box-shadow: 0 4px 6px rgba()     → shadow-md
19   gap: 16px                        → gap-4
20   gap: 24px                        → gap-6
21*/
22
23// Use these in Bolt prompts like:
24// "Style the card with: bg-white rounded-xl border border-gray-200 shadow-sm p-4"
25// "Style the primary button with: bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-4 rounded-lg"

Bolt.new supports image uploads in chat — drag and drop or click the image attachment button to upload your Marvel PNG exports. This is often faster than describing a layout in text, especially for complex multi-element screens. Bolt's vision capability interprets the image as a layout specification and generates components that match the structure. Best practices for Marvel image uploads to Bolt: upload one screen at a time rather than multiple screens in one prompt — Bolt focuses better on a single layout reference. Include both the image AND a text description to reinforce the most important styling details: 'Build this screen [image attached]. Key details: the sidebar is 240px fixed width with bg-gray-900 background, the header is 64px tall with a bottom border, the content area has a 24px padding and light gray background.' The text description catches details that might be ambiguous in the PNG. After Bolt generates the component, compare it against your Marvel design. Note any discrepancies (spacing off, wrong font weight, missing hover state) and follow up with correction prompts: 'The product title should be 18px semibold, not 16px regular — update the text style.' Iterating from Marvel image reference to polished component typically takes 2–4 prompt exchanges per screen.

Marvel prototype interactions — the hotspots, navigation arrows, and transition animations you set up in Prototype mode — become React code in Bolt. There are three categories of Marvel interactions and their Bolt/React equivalents. Simple navigation (tap button → go to screen): translate to React Router's Link component or navigate() from useNavigate hook. The screen name in Marvel becomes the route path in React Router. Example: Marvel 'tap Shop Now → go to Products screen' becomes a Link component pointing to '/products'. Modal and overlay interactions (tap → overlay appears on top of current screen): translate to conditional rendering of a modal component with a dark backdrop. Use Framer Motion AnimatePresence with opacity 0→1 for fade in/out, or y: 50→0 for slide up. React state controls visibility: const [showModal, setShowModal] = useState(false). Slide transitions between full screens (tap → next screen slides in from right): translate to React Router v6 with Framer Motion AnimatePresence wrapping the Routes component. Use x: '100%'→0 with exit x: '-100%' for push navigation, or opacity 0→1 for crossfade. This requires a small wrapper component around your routes. Drag and swipe interactions from Marvel mobile prototypes: translate to Framer Motion drag constraints or a touch event handler. Swipe to dismiss, pull to refresh, and swipeable cards all have Framer Motion equivalents that Bolt can generate from a clear description.

1// Framer Motion page transitions (based on Marvel slide interactions)
2// Prompt Bolt: "Add slide transitions between pages matching my Marvel prototype"
3
4import { AnimatePresence, motion } from 'framer-motion';
5import { useLocation, Routes, Route } from 'react-router-dom';
6
7const pageVariants = {
8  initial: { x: '100%', opacity: 0 },
9  in: { x: 0, opacity: 1 },
10  out: { x: '-100%', opacity: 0 },
11};
12
13const pageTransition = {
14  type: 'tween',
15  ease: 'anticipate',
16  duration: 0.3,
17};
18
19function AnimatedPage({ children }: { children: React.ReactNode }) {
20  return (
21    <motion.div
22      initial="initial"
23      animate="in"
24      exit="out"
25      variants={pageVariants}
26      transition={pageTransition}
27      style={{ position: 'absolute', width: '100%' }}
28    >
29      {children}
30    </motion.div>
31  );
32}
33
34export function AppRoutes() {
35  const location = useLocation();
36  return (
37    <AnimatePresence mode="wait">
38      <Routes location={location} key={location.pathname}>
39        <Route path="/" element={<AnimatedPage><HomePage /></AnimatedPage>} />
40        <Route path="/products" element={<AnimatedPage><ProductsPage /></AnimatedPage>} />
41        <Route path="/product/:id" element={<AnimatedPage><ProductDetailPage /></AnimatedPage>} />
42      </Routes>
43    </AnimatePresence>
44  );
45}