Can GPT Image 2 render real-looking app screens?

Yes — dashboards, mobile screens, onboarding flows, and settings pages all render convincingly. The trick is naming the device frame, the layout system, and the exact text inside the UI.

Should I prompt for mobile or desktop UI?

Be explicit. "iPhone 15 mockup, 9:19.5 portrait" for mobile. "Desktop dashboard, 16:10 landscape, MacBook frame" for web. The wrong ratio is the most common reason a UI mockup looks wrong.

How do I get readable buttons and labels?

Quote every label and CTA exactly ("Sign in", "Get started"). Keep individual labels under 4 words. Specify font weight ("medium", "semibold") and size relationship ("primary CTA, larger than the secondary text link below").

Back to blog

How-toMay 31, 20266 min

How to prompt GPT Image 2 for UI mockups

Get pixel-clean app screens, dashboards, and onboarding flows out of GPT Image 2 — without the AI mush.

By Depikt Team

The structure

Every UI mockup prompt for GPT Image 2 has five parts:

Frame — device, aspect ratio, surrounding context
Layout — grid, regions, hierarchy
Components — each block named with its type
Copy — every label in quotes
Finish — color system, type, polish

Working template

Clean iPhone 15 mockup, 9:19.5 portrait, photographed on a soft grey desk surface, subtle shadow. On screen: a mobile app onboarding flow, 4-region vertical layout. Top: small status bar, back arrow left, page indicator "2 / 4" right. Middle: large bold headline "[HEADLINE, 6 WORDS MAX]" set in a humanist sans, near-black. Below in lighter grey: "[SUBHEAD, ONE SENTENCE]". Below headline: simple illustration — flat 2-color line art of [SUBJECT], single accent color. Bottom: primary CTA button labeled "[CTA TEXT]" — full-width, rounded 12px, deep indigo with white text. Below it a small text link "[SECONDARY LINK]". System: 8pt grid, 24px page margins. Palette: off-white background, near-black ink, one deep indigo accent. Pixel-clean, design-quality.

Why each part matters

Frame

Three options work reliably:

"iPhone 15 mockup, 9:19.5 portrait" — mobile app screens
"Desktop dashboard, 16:10 landscape, MacBook frame" — web apps
"Flat screen-only mockup, 9:16 vertical, no device chrome" — embedded in landing pages

Always include the ratio. Without it you get a square that crops wrong on every preview.

Layout

Name the grid. "8pt grid." "12-column layout." "4-region vertical stack." The model respects layout cues more than people expect — it just needs them named.

Components

Use design vocabulary, not vibes:

❌ "a nice button"
✅ "primary CTA button, full-width, rounded 12px"

Words like *navbar*, *sidebar*, *card*, *toggle*, *segmented control*, *toast*, *tab bar* all map cleanly.

Copy

Quote everything. "Sign in", "Get started", "2 / 4". The model renders quoted text far more accurately than paraphrased intent. Keep individual labels under 4 words.

Finish

What separates "AI screenshot" from "designed screen":

Named accent color, not "blue"
Named font style ("humanist sans," "geometric grotesk")
Pixel grid hint ("8pt grid")
Soft device shadow, neutral desk surface — sells it as a render

Skip the rewrite

Depikt detects UI intent and applies this structure automatically. Browse UI mockup prompts in the library for proven starting points.

Build a prompt that follows this guide.

Paste a rough idea. Get back a structured prompt.

Open Prompt

How to prompt GPT Image 2 for logos and brand marks

GPT Image 2 can spit out genuinely usable logo directions if you brief it like a designer. Here's the four-block structure: concept, mark type, type system, finish — plus copy-paste templates.

How-to

How to prompt GPT Image 2 for infographics and diagrams

GPT Image 2 can render genuinely usable infographics — but only if you treat the prompt like a brief, not a vibe. Here's the five-block structure: format, hierarchy, data, type system, and finish.