← IndexEntry № 240·design

App UI Mockup Concept Prompt for Midjourney

Generate a believable single-screen app UI mockup concept to explore layout and visual direction.

Optimized for
Midjourney
§ When to use this

Before a designer opens Figma and commits to a layout, it helps to see a few quick visual directions for what a screen could feel like. Midjourney is surprisingly good at this kind of UI concepting: not pixel-perfect production design, but believable, high-fidelity mockups that capture color, hierarchy, and mood. This prompt is tuned for a single mobile screen so the model focuses instead of cramming a whole app into one frame. You specify the app type, the exact screen, the design style, and the key UI elements, and you get a clean concept you can react to or show stakeholders early. It is ideal for exploring visual directions, sparking ideas in a kickoff, or filling a pitch deck with realistic-looking product shots. Just remember the output is a concept image, not a usable design file: text will be imperfect and components are not real. Treat it as a mood and layout reference that a designer then rebuilds properly.

§ The Prompt— fill in the fields, then copy or open in a tool
§ Customize0/7 fields filled
your prompt — fill the fields above
UI design concept for a [APP TYPE] mobile app, [SCREEN NAME] screen, [DESIGN STYLE] style, [COLOR SCHEME] color scheme, key elements [UI ELEMENTS], [TYPOGRAPHY FEEL] typography, generous whitespace, rounded cards, realistic iOS rendering, presented as a single clean screen on a soft neutral background --ar 9:16 --style raw --s [STYLIZE VALUE]
Open with your prompt →ChatGPTClaudeSends your filled-in prompt straight into a new chat.
§ Example Output

What you can expect back

Midjourney produces a single tall phone screen that reads as a real, polished meditation app. A large rounded 'daily session' card anchors the top in a soft indigo-to-lavender glassmorphic panel, with a streak tracker showing a gentle row of completed days below it, and a scrollable list of soundscapes (rain, ocean, forest) rendered as tidy rounded cards with small icons. The palette stays in calm indigos and lavenders with warm cream accents, the type feels soft and rounded, and there is plenty of breathing room between elements. The whole thing sits centered on a neutral background like a presentation mockup. Microcopy is placeholder-quality and not perfectly legible, but the hierarchy, mood, and layout direction come through clearly enough to guide real design work.

Illustrative example — your results will vary by tool and inputs.

§ Pro Tips

Get sharper results

  • 01Use '--ar 9:16' for phone screens; it matches modern device proportions so the mockup does not look stretched.
  • 02Keep --s low (around 80-150) and add --style raw so the UI stays literal instead of becoming decorative art.
  • 03Generate one screen at a time; asking for a full multi-screen flow produces muddy, unusable results.
  • 04Don't trust the rendered text. Use the image for layout and mood only, then set real copy and components in Figma.
§ Variations

Adapt it for your case

Dark mode

Change the color scheme to a dark palette like 'near-black background with neon mint accents' and add 'dark mode UI'.

Desktop dashboard

Switch to '--ar 16:9', change 'mobile app' to 'web dashboard', and describe a sidebar plus data widgets.

Onboarding screen

Change the screen name to 'first-run onboarding' and describe a friendly illustration, a progress dots row, and a single primary button.

Best For — Roles
Use For — Tasks
Tags#ui#mockup#midjourney
§ FAQ

Common questions

Can I use these mockups as final UI?

No. They are concept images with fake components and imperfect text. Use them to align on direction, then rebuild the screen properly in Figma with real, reusable components.

How do I make the text legible?

You generally can't with Midjourney. Keep it abstract in the prompt and add real copy in your design tool afterward; trying to force exact words usually produces gibberish.

How do I show several screens that match?

Generate each screen separately with identical style, color, and typography wording, and consider using --sref with a shared style reference image to keep them consistent.

§ Related Entries

You may also need