Educational Development Program: Build Apps with Google AI Studio

This post is my entry for the Educational Development Program: Build Apps with Google AI Studio.

What I Developed

I developed MockupGen, an app that transforms amateur product photos into professional-looking mockups for e-commerce. For Shopify store managers or casual sellers looking to sell a product, it's difficult to achieve professional-looking photos without a photo studio.
MockupGen solves this problem: you upload a product photo taken with your phone, select a background style (white studio, lifestyle scene, outdoor, desktop, or gradient), and the app takes care of the rest. I used Gemini to analyze the uploaded image and generate an optimized product description. Then, Image's background swap editing tool replaced it with a professional background, keeping the product intact and transforming everything around it.

Key Instructions for Creating the Application:

Create an application called MockupGen that transforms amateur product photos into professional e-commerce mockups. The user uploads a product photo and selects a background style from options such as: pristine white studio, lifestyle kitchen scene, outdoor natural environment, minimalist desktop, or gradient background. Use Gemini to analyze the uploaded image and generate an optimized product description. Then, use the background swap feature to replace the product photo's background with the selected professional setting. Display the original and transformed images side-by-side, with a download button for the result and a "Try Another Style" button to regenerate with a different background. The user interface should be clean, modern, and in dark mode.

Relevant Aspects

After the initial generation, I iterated on the interface to add more background styles. During iteration, I realized that it didn't accurately reflect the product's proportions.

To correct this, I applied this solution:

I need to correct the product fidelity in the mockup results. Please make these changes:

1. Automatically detect and preserve the aspect ratio of the original image for the output.

2. When calling the Image API to swap the background, add explicit instructions to the message to preserve the exact colors, proportions, shape, and details of the original product. The product should look identical to the original; only the background should change.

3. Add a note to the message sent to Image: "Do not modify, recolor, reshape, or alter the product in any way. Only replace the surrounding background."

4. Before generating, use Gemini to describe the product in detail (exact colors, materials, dimensions, and distinctive features) and include that description in the Image message as a constraint to maintain product accuracy.

But it didn't work; the result remained the same. The solution was to switch to native Gemini for image generation. Gemini 3 Flash has image editing capabilities (Nano Banana) that accepts reference images and tends to better preserve the original.

Switch from Imagen background swap to using Gemini's native image 
editing. Send the uploaded product photo as a reference image to 
Gemini with a prompt like: "Take this exact product [1] and place 
it in a [selected background style]. Keep the product exactly as 
it appears in the reference image — same colors, same proportions, 
same details. Only change the background environment. The product 
should look photorealistic and properly scaled in the new setting."

It´s a huge difference:

Demo

👉 Live MockupGen Test

My Experience

The most valuable aspect of this program was understanding how to easily chain multiple AI models together. Getting them to work together taught me a lot about instruction engineering at every stage of the creation process.
What surprised me most was the importance of the initial instruction when using the creation function and how to address functions that don't return a good result. By specifying the user flow (load, select style, transform, compare in parallel), the result was much better. This reinforced something we see everywhere and that is very important to understand: the quality of the instructions directly determines the quality of the results.
An interesting challenge I encountered was product fidelity. My first version used Image background swapping, but it constantly altered the product's colors and proportions. After iterating, I switched to Gemini's native image editing (Nano Banana) with reference images, which preserved the original product much more faithfully. This taught me that choosing the right model for each task is just as important as writing good prompts. Sometimes, the solution isn't better instructions, but a better tool.
A few months ago, I collaborated on the development of an e-commerce store, and I see great potential in tools like this. Product photography is one of the biggest hurdles for small retailers, and being able to prototype a solution like MockupGen in minutes with AI Studio is a glimpse into how we'll develop software in the future.

Thanks for the feedback! 🚀