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-to·May 31, 2026·6 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.

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.

Generate yours

Generate polished prompts in seconds.

Paste a rough idea. Get back a structured prompt that ships.

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.