UI & App Mockup Image Prompt

Generate clean app or website mockups with a described layout, device frame, and colour system — and know which parts image models will get wrong.

The Prompt — replace [BRACKETS] with your details

Act as a product designer writing prompts for an image model.

The mockup:
- Screen or page: [e.g., a mobile expense tracker dashboard]
- Platform and frame: [IPHONE / ANDROID / DESKTOP BROWSER / TABLET / NO FRAME]
- Layout, top to bottom: [DESCRIBE THE BLOCKS — header, stat cards, chart, list, nav]
- Style: [MINIMAL / NEUMORPHIC / GLASSMORPHIC / BRUTALIST / CORPORATE / PLAYFUL]
- Colour system: [PRIMARY, BACKGROUND, ACCENT — hex if you have them]
- Light or dark: [WHICH]
- Where it will be used: [APP STORE SCREENSHOT / PORTFOLIO / PITCH DECK / HERO IMAGE]

Build the prompt with these layers:
1. Subject: the exact screen and what it shows
2. Layout: blocks in order with relative sizes, described spatially
3. Visual style: corner radius, shadow depth, spacing feel, border treatment
4. Colour: named or hex, with what each colour is used for
5. Typography feel: weight and size hierarchy, without naming a specific font the model cannot render
6. Presentation: device frame or flat, angle, background, lighting, shadow
7. Render quality words appropriate to [MIDJOURNEY / DALL-E / STABLE DIFFUSION / NANO BANANA]

Then give me:
- The final prompt, ready to paste
- A negative prompt or exclusion list if my tool supports one
- Three variations changing only style, only colour, and only framing
- A blunt list of what image models still get wrong on UI mockups — legible text, real charts, consistent icons, accurate small type — and how to work around each

Do not promise readable text in the output. Tell me where I will need to composite real type afterwards.

How to use this prompt

Treat the output as a visual mood piece, not a spec — plan to overlay real text for anything that must be readable.
Describe layout spatially ("full-width header above a two-column card row"), which these models handle far better than component names.
Generate at the aspect ratio you actually need rather than cropping later.

Why this prompt works

Image models understand spatial and stylistic description but not interface semantics, so a prompt organised by visual layers outperforms one that names UI components. Being explicit about the text limitation up front saves the cycle of regenerating a mockup hoping the labels come out legible.

Variations to try

Ask for a three-screen set with consistent styling for an app store listing.
Add "shown on a desk with hands, natural window light" for a lifestyle context shot.
Ask for a wireframe-style version with grey blocks, which sidesteps the text problem entirely.

Common mistakes to avoid

Expecting accurate labels, numbers, or chart data. They will be plausible-looking nonsense.
Naming a font. The model does not render fonts, it renders the idea of them.
Using a generated mockup as a design spec, which sends engineers building something that was never coherent.

Works well with

Midjourney

DALL·E

Stable Diffusion

Nano Banana

Need a custom version of this prompt?

The free prompt generator builds a prompt tailored to your exact goal, framework, and target AI model — or paste this template into the optimizer to refine it.

→ Open the Prompt Generator → Prompt Optimizer

Related prompts

Photorealistic Portrait Prompt

A fill-in template for photorealistic portrait images in Midjourney or Stable Diffusion — …

Logo Concept Prompt

Generate logo concept directions for a brand — flat vector style marks you can use as insp…

Product Photography Prompt

Create studio-quality product shot concepts for marketing — control surface, lighting, pro…

Fantasy Landscape Prompt

A structured template for epic fantasy environment art — scale, atmosphere, focal point, a…