AI mockups: put a product or an app screen into a scene

Before you start: what a mockup is and what you need

A mockup is a picture of a design in a real-looking setting, made before the real thing exists. Think of a bottle on a billboard, a box on a shelf or an app on a phone. An image model draws an AI mockup. It is a preview for a pitch or a plan, not a photo of anything that was made.

You need two things. The first is a sharp photo of the product, shot straight on, with nothing cropped and the label readable. The second is an image tool that accepts pictures as input. An image editing model takes your picture and a text instruction and returns a changed picture. OpenAI's image generation guide says its edits endpoint can edit existing images and can generate new images that use other images as a reference. Edit images with AI covers the app steps for sending a picture in with an instruction.

The prompts below come from OpenAI's image prompting guide, which is written for developers who call its API. They are plain English, so you can paste them into any app that accepts pictures. Where a setting such as size is named, an app may show it as a menu or leave it out.

An image model draws a new picture from your photo and does not paste it. That is why OpenAI's own prompts say "Preserve product geometry and label legibility exactly", and why its check list asks whether product shapes and labels remain intact.

Step 1: cut the product out on a transparent background

A cutout is your product alone, with nothing behind it. It lets you drop the product into any scene later, and it shows right away whether the model kept the shape and the label. OpenAI's prompting guide says to request both an isolated subject in the prompt and background="transparent" in the API, to save PNG or WebP, and that a drawn checkerboard is not transparency.

The prompt below is OpenAI's own, from its transparent product cutout example, which uses a photo of a shampoo bottle. The example's settings are size="1024x1536", quality="medium", background="transparent" and output_format="png".

Extract the product from the input image and isolate it on a fully transparent background.
Output: centered product, crisp silhouette, no halos/fringing.
Preserve product geometry and label legibility exactly.
Add only light polishing. Do not add a solid backdrop, checkerboard, scenery, or shadow.
Do not restyle the product; remove the background and preserve clean alpha transparency.

• The guide says to omit output_compression for PNG and to repeat the transparency requirement in later edits.
• The prompt asks for "no halos/fringing" and a "crisp silhouette". A light rim around the product on a dark page gives away a bad cutout.
• If an app cannot output transparency, ask for a plain white background and remove it in an image editor.

1. Take a clear photo of the product: straight on, the whole product in the frame, the label readable.
2. Send the photo to an image editing model with the cutout prompt, and set the background to transparent if the app has that setting.
3. Open the result on a dark background and on a light one. Look for halos on the edges and for any change to the label.
4. Use the cutout, or the original photo, as the input for the scene prompt in the next section, with every word you want on the mockup in quotes.
5. Change only one thing per round, for example the weather, the time of day or the camera angle.
6. Check the finished picture against your original photo before you share it.

Step 2: put the product in a scene, with exact words

OpenAI's guide shows the next step with the same shampoo photo as input: a realistic billboard mockup on a highway at sunset. The example uses size="1024x1536" and quality="medium". Its headline is marked exact, verbatim and once, a habit worth copying whenever words appear on a product or a sign.

Create a realistic billboard mockup of the shampoo on a highway scene during sunset.
Billboard text (EXACT, verbatim, no extra characters):
"Fresh and clean"
Typography: bold sans-serif, high contrast, centered, clean kerning.
Ensure text appears once and is perfectly legible.
No watermarks, no logos.

• The Billboard text line quotes the words. It also says "EXACT, verbatim, no extra characters".
• The Ensure text appears once line stops the model from printing the headline a second time elsewhere.
• The No watermarks, no logos line keeps out brands you did not supply.
• To change one condition, send the output back with one short line. The guide's next step does this with "Make it look like a winter evening with snowfall." and keeps the rest of the scene.
• To change one spot, the generation guide describes markup. You send a transparent PNG with your circles as markup, the same width and height as the first image, to POST /v1/images/edits with a GPT Image 2.5 or 2.6 model.

Several products in one scene

A scene often needs more than one product. OpenAI's generation guide shows the pattern with four reference photos: a bath bomb, a body lotion, an incense kit and a soap. Its prompt asks for a gift basket containing all the items in the reference pictures. The call below is from that guide, and the model name in it is the guide's.

Google's Nano Banana quickstart in the Gemini cookbook does the same in its high-fidelity example. The prompt reads "Create a marketing photoshoot of these items arranged on a modern minimalist wooden table. Focus on the items and replace backgrounds." It sends two images with it and sets the aspect ratio to 16:9.

Number every input and give it a role. OpenAI's guide says to identify each input by number and purpose, such as subject, style or background, and to explain how the inputs should combine. How many pictures you can send depends on the model, as the chart shows. When you need more, the cookbook's tip is to combine several images into one collage first.

import base64
from openai import OpenAI

client = OpenAI()

prompt = """
Generate a photorealistic image of a gift basket on a white background
labeled 'Relax & Unwind' with a ribbon and handwriting-like font,
containing all the items in the reference pictures.
"""

result = client.images.edit(
    model="gpt-image-2.5-sunburst",
    image=[
        open("body-lotion.png", "rb"),
        open("bath-bomb.png", "rb"),
        open("incense-kit.png", "rb"),
        open("soap.png", "rb"),
    ],
    prompt=prompt,
)

image_base64 = result.data[0].b64_json
image_bytes = base64.b64decode(image_base64)

# Save the image to a file
with open("gift-basket.png", "wb") as f:
    f.write(image_bytes)

• Count the items. The prompt asks for "all the items", and a model can still drop one.
• For an open-weight option, the Qwen-Image README lists Qwen-Image-Edit-2511 as an editing model with multiple-image support and improved consistency. Its sample code takes a list of images and moves the model to a CUDA GPU.

An app screen in a phone frame

For an app you often have no photo, only an idea. OpenAI's guide says interface previews work best when you describe the product as if it already exists. Put layout, hierarchy, spacing and real interface elements in focus. The guide also says to avoid concept art language, so the result looks like a usable interface and not a design sketch.

Its example describes a local farmers market app with a header, a list of vendors with small photos, a specials section and the location and hours, in a practical design. The settings are size="1024x1536" and quality="medium". For small lettering, the guide says to compare quality settings at the same complexity.

Real words help. Write the labels you want in quotes, as in the text lesson, and treat the result as a picture of a screen. No button in it works.

Create a realistic mobile app UI mockup for a local farmers market.
Show today’s market with a simple header, a short list of vendors with small photos and categories, a small “Today’s specials” section, and basic information for location and hours.
Design it to be practical, and easy to use. White background, subtle natural accent colors, clear typography, and minimal decoration.
It should look like a real, well-designed, beautiful app for a small local market.
Place the UI mockup in an iPhone frame.

• The prompt says what the app is for and then lists the screen's parts from the header down.
• It names the frame: "Place the UI mockup in an iPhone frame."
• Its style words are practical: a white background, subtle natural accent colors, clear typography and minimal decoration.

Packaging mockups: the words on the box

A package puts words on a surface, so it needs the same care as the billboard. OpenAI's guide has a collectible toy example for merchandise and packaging concepts. It asks for product photography cues such as materials, packaging and print clarity, and it keeps the design original and non-infringing. The packaging words sit on a single line that starts with "Include ONLY".

Swap the toy for your product and keep the structure of a concept, a style, constraints and one quoted line. The prompt below is OpenAI's, as the guide gives it.

Create a collectible action figure of a vintage-style toy propeller airplane with rounded wings, a front-mounted spinning propeller, slightly worn paint edges, classic childhood proportions, designed as a nostalgic holiday collectible, in blister packaging.

Concept:
A nostalgic holiday collectible inspired by the simple toy airplanes
children used to play with during winter holidays.
Evokes warmth, imagination, and childhood wonder.

Style:
Premium toy photography, realistic plastic and painted metal textures,
studio lighting, shallow depth of field,
sharp label printing, high-end retail presentation.

Constraints:
- Original design only
- No trademarks
- No watermarks
- No logos

Include ONLY this packaging text (verbatim):
"Christmas Memories Edition"

• The Constraints list bans trademarks and logos, so the model does not add a brand that is not yours. If your own logo must appear, send it as a numbered input with a role, as the brief in lesson 3 does.
• The Include ONLY line is the one place where words are allowed. Any other text on the package is an error to catch in the check.
• The guide says to compare several packaging variants. Ask for a few and keep the one that reads best at full size.

Check the mockup before you share it

A mockup goes in front of other people, so a wrong word or a changed label costs more there than it would in a plain picture. OpenAI's guide ends with a check list of four questions, and they fit every mockup in this lesson. A change you did not ask for is the risk to look for. The guide says repeated edits can still change details you meant to keep, so compare edges, labels and spelling with your original at full size.

Do not show an AI mockup as a photo of a real product. Label it a concept or a render.

Common mistakes

• Starting from a blurry or cropped photo. The model has little to preserve. The label and the shape change first.
• Asking for the scene, the words and a new camera angle in one round, then not knowing which part broke.
• Leaving the words to the model. Without a quoted line, it may print text of its own, so say that only the quoted words may appear.
• Taking a gray-and-white grid in the picture for transparency. Open the decoded file and look for transparent pixels.
• Describing an app screen in concept art language, so it comes back as a sketch and not as a screen.
• Letting an AI mockup stand in for the real product in a listing or an ad. It shows an idea, so label it a concept.

Try it yourself

Use one product you own, or a mug or a bottle on a table. Keep the whole run in one chat. The earlier pictures then stay in reach.

• Take a straight-on photo of the product and write down the words on its label.
• Ask for a cutout with OpenAI's prompt. Open it on a dark page and on a light page.
• Place it on a billboard or a shelf with one quoted line, then change only the light or the weather.
• Write a short brief for a phone app that goes with your product, as if the app already exists, with five real labels in quotes.
• Compare each result with your photo using the check table, and write down what changed.

You are done when you can say, for each picture, which details match your photo and which do not.

Next course: AI video

You can now make still images for logos, posts and mockups. The next course, AI video: Sora, Veo, video prompts and open models, starts with a first clip from a prompt.

Frequently asked questions

Sources

1. OpenAI API docs: Image prompting (read November 6, 2026)https://developers.openai.com/api/docs/guides/image-prompting
2. OpenAI API docs: Image generation (read November 6, 2026)https://developers.openai.com/api/docs/guides/image-generation
3. Google Gemini cookbook: Get started with Nano Banana (read November 6, 2026)https://github.com/google-gemini/cookbook/blob/main/quickstarts/Get_Started_Nano_Banana.ipynb
4. GitHub: QwenLM/Qwen-Image README (read November 6, 2026)https://github.com/QwenLM/Qwen-Image
5. Figma on YouTube: Using Gemini 2.5 Nano Banana + Figma to create mockups in minutes (read November 6, 2026)https://www.youtube.com/watch?v=jI29xOTulsk