How to Write GPT Image Prompts for UI Mockups
How to prompt GPT Image 2 for dashboards, app screens, and device mockups with predictable layouts and readable labels.
Good GPT Image prompts for UI mockups name the product, the screen and its main components, the device or frame it appears in, the visual style, and the exact text that must be readable. List components in reading order and keep on-screen copy short, because the model renders a few large labels far more reliably than paragraphs of interface text.
Describe the screen like a wireframe
Start with what the screen is for and what it contains, in the order a user would read it: navigation, header, main content, secondary panels, and actions. The model lays out components more predictably when they are listed than when they are implied by a style word such as modern dashboard.
- Name the product and screen: "analytics dashboard for a SaaS billing tool" or "onboarding screen for a meditation app".
- List regions in order: sidebar navigation, top bar with search, three KPI cards, a line chart, and a recent transactions table.
- State the density: generous spacing, consistent card sizes, clear alignment.
Choose the frame: flat screen, device, or scene
Decide whether you need a flat interface capture for a case study, a device mockup for a landing page, or a photographed scene for marketing. Each needs different wording.
- Flat: "flat UI screenshot, no device frame, 16:9".
- Device: "on a slim laptop at a slight angle, screen facing the camera, soft reflections".
- Scene: "laptop on a wooden desk in natural daylight, shallow depth of field"; expect the interface to be smaller and less legible.
Keep interface text short and exact
Readable text is the most common failure in generated UI. Quote the few labels that matter and let the rest be implied as placeholder lines.
- Quote headings and buttons exactly: "Revenue", "Upgrade plan".
- Ask for placeholder text lines for body copy.
- Avoid long tables of real data; ask for five rows of sample transactions instead.
Specify the visual system
Style words such as glassmorphism help, but a short visual system gives more consistent results across several screens.
- Color: background, surface, primary accent, and status colors.
- Type: a sans-serif family, a clear weight hierarchy, and size contrast between headings and labels.
- Components: corner radius, shadows, borders, and icon style.
Prompt checklist
- Product, screen purpose, and audience are stated.
- Components are listed in reading order.
- The frame is chosen: flat capture, device, or scene.
- Only short, quoted text needs to be legible.
- Color, type, and component style are defined.
- The aspect ratio matches the target: 16:9 for desktop, 9:16 for phone.
FAQ
Can GPT Image 2 produce a usable UI design?
It produces convincing visual concepts and mockups for presentations, landing pages, and moodboards. Treat the output as a visual reference rather than a production design, because spacing, icons, and small text are not precise enough to hand off as specs.
How do I get readable text in a UI mockup?
Limit legible text to a few quoted labels, make them large, and describe everything else as placeholder lines. Short words in a clean sans-serif render most reliably.
How do I keep several screens consistent?
Reuse the same visual system paragraph in every prompt and change only the screen description. Screens generated from one template stay closer than screens described from scratch.
Related prompt templates
Use this guide with real prompts
Browse prompt templates from the matching library category and adapt the structure to your own image workflow.