How to Integrate Marvel with V0

In Marvel, open your prototype project and navigate to the screens you want to convert to code. To export screens, click on a screen in the canvas view, then look for the download or export option in the toolbar. Marvel allows exporting screens as PNG images at 1x, 2x, or 3x resolution. For use as V0 references, 2x PNG exports give good resolution without file size becoming unwieldy. Export each distinct screen or page layout separately — for a 5-screen onboarding flow, export all 5 screens as individual PNG files with descriptive names like onboarding-step-1-welcome.png, onboarding-step-2-signup.png, and so on. If you have access to Marvel's developer handoff feature (available on paid plans), use the Inspect panel to view exact values for colors (as hex codes), font sizes, padding, and border radius for each design element. Note down these values — you will use them in your V0 prompts to generate components that match the design specifications precisely. The more specific you are about measurements and colors, the closer V0's output will be to the Marvel design.

The most important skill in the Marvel-to-V0 workflow is writing descriptive, specific prompts that capture what the prototype shows. Open V0 and start describing the first screen or component from your Marvel prototype. Reference the specific design tokens you extracted: exact hex colors, font weights, border radius values, and spacing. Describe the component hierarchy — what is a card, what is a list item, what is a navigation bar. Mention interactive states: what changes on hover, what happens when a button is clicked, what the loading state looks like. If you have uploaded the Marvel PNG screenshot to V0 (V0 supports image input in the chat), you can attach the image and ask V0 to generate code matching the design. V0 will analyze the visual layout and generate corresponding React components. For multi-page prototypes, generate one page or section at a time — trying to describe an entire app in one prompt leads to simplified or incomplete generation. Start with the highest-priority screen, iterate until it matches well, then move to the next screen. V0's versioning system lets you see and revert each generation attempt, so experiment freely.

Marvel-exported images that you want to use as real assets in your V0 project (not just as generation references) need to go in the Next.js public/ directory. This is relevant when your prototype uses real brand images, icons, or illustrations that should appear in the generated app. Open the V0 file tree panel, navigate to the public/ folder, and upload your Marvel-exported images with descriptive filenames. Create subdirectories to organize assets by type — for example, public/screens/ for full-page screenshots you might embed as examples, and public/assets/ for individual icons or illustrations extracted from your Marvel designs. In V0-generated components, reference these images using the Next.js Image component with src values like /screens/dashboard.png or /assets/logo.svg. For icons from Marvel designs, consider asking V0 to recreate them as SVG components rather than using rasterized exports — SVG icons look sharper at all screen sizes and have smaller file sizes than PNG equivalents. If your Marvel prototype references specific icon sets like Material Icons or Heroicons, V0 already knows these libraries and can generate matching icon components without requiring you to export individual icons.

1// Example: Using a Marvel-exported image in a Next.js component
2import Image from 'next/image';
3
4export function OnboardingHero() {
5  return (
6    <div className="flex flex-col items-center justify-center min-h-screen">
7      {/* Marvel prototype showed this illustration at the top */}
8      <Image
9        src="/assets/onboarding-hero.png"
10        alt="Welcome to Acme"
11        width={320}
12        height={240}
13        className="mb-8"
14        priority
15      />
16      <h1 className="text-3xl font-bold text-gray-900">Welcome to Acme</h1>
17      <p className="mt-4 text-lg text-gray-600">
18        The fastest way to manage your projects.
19      </p>
20      <button className="mt-8 px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
21        Get Started
22      </button>
23    </div>
24  );
25}

Marvel allows you to embed a live, interactive prototype preview as an iframe in any web page. This is useful for creating internal documentation sites with V0 that show the prototype alongside implementation notes. To get the embed code, open your Marvel prototype, click the Share button, then look for the Embed option. Copy the iframe embed code. In your V0-generated documentation page, create a responsive iframe container component that wraps the Marvel embed. Marvel prototype embeds support most interactive features — users can click through the prototype in the iframe just as they would in Marvel itself. This is a great way to give developers access to the interactive prototype without requiring a Marvel account. The embed URL format is typically https://marvelapp.com/prototype/{prototype-id}/screen/{screen-id}. Make the iframe container responsive using CSS padding-bottom trick or aspect-ratio CSS property so the prototype scales properly on different screen sizes. Add a full-screen expand button that opens the prototype in a new tab for users who want the full interaction experience.

1// components/MarvelEmbed.tsx
2interface MarvelEmbedProps {
3  prototypeId: string;
4  title?: string;
5  width?: number;
6  height?: number;
7}
8
9export function MarvelEmbed({
10  prototypeId,
11  title = 'Prototype Preview',
12  width = 390,
13  height = 844,
14}: MarvelEmbedProps) {
15  const aspectRatio = `${height / width * 100}%`;
16
17  return (
18    <div className="w-full max-w-sm mx-auto">
19      <div
20        className="relative rounded-2xl overflow-hidden border-2 border-gray-800 shadow-2xl"
21        style={{ paddingBottom: aspectRatio }}
22      >
23        <iframe
24          src={`https://marvelapp.com/prototype/${prototypeId}/screen/1`}
25          width={width}
26          height={height}
27          allowTransparency
28          title={title}
29          style={{
30            position: 'absolute',
31            top: 0,
32            left: 0,
33            width: '100%',
34            height: '100%',
35            border: 'none',
36          }}
37        />
38      </div>
39      <p className="text-center text-sm text-gray-500 mt-2">
40        <a
41          href={`https://marvelapp.com/prototype/${prototypeId}`}
42          target="_blank"
43          rel="noopener noreferrer"
44          className="underline hover:text-gray-800"
45        >
46          Open in Marvel
47        </a>
48      </p>
49    </div>
50  );
51}