100 Best UI & Design Mockups AI Image Prompts for GPT Image 2 (2026)

How to Write UI & Design Mockups Prompts

UI prompts reward structure. The model builds a layout by walking through the nav, the chrome, the primary content, and the secondary panels in roughly that order — so list them in that order in your prompt. Vague prompts produce beautiful, unusable screens; specific prompts produce screens a developer can rebuild from the image alone. This is the difference between a decorative UI mockup and a communicable one, and the gap is wider than it looks.

• •Declare the screen type first: "SaaS dashboard", "mobile onboarding screen", "marketing landing page hero", "settings page", "empty state", "pricing page", "billing history table", "team management screen". Each triggers a different layout prior in the model and saves you from having to describe that prior in prose.
• •State the platform and frame. "Desktop browser at 1440 wide", "iOS 17 iPhone 15 Pro frame", "Android Material 3 on a Pixel 8", "iPad landscape at 1366". The platform sets spacing rhythm, component shape, and typical safe-area padding — all of which the model knows by convention if you name the platform.
• •Reference a design system explicitly. "shadcn/ui visual style", "Material 3", "iOS Human Interface Guidelines", "Ant Design", "Tailwind default", "Radix Themes", "Carbon Design System". These references give the model a coherent component vocabulary and consistent border, radius, and shadow choices.
• •Set the color theme. Dark or light, brand color (name it or give a hex value), neutral palette ("warm greys" vs "cool greys" vs "true neutral"). Include whether the accent color is used sparingly (only on primary CTAs and links) or throughout (in section headers, icon fills, chart strokes).
• •Call out layout density: "minimal and spacious with generous whitespace", "data-dense with small type and tight row spacing", "compact mobile-first", "marketing-site airy with large type". Density choice changes padding, font size, and component count simultaneously — getting it right up front saves regenerations.
• •List specific UI elements to include, with counts. "Sidebar with 5 nav items", "data table with 3 columns and 8 rows", "summary card row of 4 metrics", "form with 6 fields and a primary button". Counts prevent the model from inventing extras or truncating. Count everything you care about.
• •Specify typography. Named system fonts (Inter, SF Pro, Roboto, IBM Plex, Geist, Satoshi) beat adjectives. Include a single heading size if precision matters ("H1 at 32px, body at 14px"). The model will hold these proportions.
• •Close with finishing details: subtle shadows vs flat, rounded corner radius in pixels, any screenshot chrome (browser frame with traffic-light buttons, device bezel, laptop with floor reflection, presentation background). These finishing notes change how the output reads as a deliverable, not just as a concept.

If a mockup looks blurry where the type should be, add a sentence asking for rendered pixel-precise UI type; GPT Image 2 shifts noticeably sharper when that instruction is explicit.