# Mobile UI mockup template

**Default model:** Gemini Pro for hi-fi (small text rendering matters); Gemini Flash for wireframes/concepts.

## Required inputs

- App / product name
- Screen type (onboarding / feed / detail / settings / etc.)
- Device frame (iPhone 15 Pro / iPhone SE / Pixel 8 Pro / unframed canvas)
- Style direction (clean minimal / brutalist / playful / corporate)
- Color palette (primary + neutral grays, hex codes)
- Real content for headlines/labels (avoid lorem ipsum — name actual copy)
- Hebrew/RTL content? → see [../reference/hebrew-rtl.md](../reference/hebrew-rtl.md)

## Gemini variant (narrative, real-content rule)

```
A [STYLE — e.g., "modern, minimal"] mobile app UI mockup for [APP NAME], a
[WHAT IT DOES]. [SCREEN TYPE] screen showing: [DESCRIBE LAYOUT TOP TO BOTTOM
WITH REAL COPY — e.g., "status bar, top nav with back arrow and screen
title 'Today's Market', a horizontal scrolling row of 5 vendor cards each
with a small product photo and category tag, a 'Today's specials' section
heading, three featured-item cards stacked vertically with photo + name +
price, a bottom tab bar with 4 icons"]. Use realistic content, not Lorem
Ipsum. [TYPOGRAPHY — e.g., "Clean SF Pro-style sans-serif, generous
whitespace, 16pt body text"]. [COLOR — e.g., "white background with subtle
warm accent #FF6B35"]. Place the UI inside a [DEVICE FRAME — e.g.,
"realistic iPhone 15 Pro frame, dark titanium bezel, photographed
straight-on"], 9:16 aspect.
```

**Run with:** `--model gemini-3-pro-image-preview --aspect 9:16 --size 2K`.

## OpenAI gpt-image-1.5 variant (labeled, shipped-product language)

```
Brief: realistic mobile app UI mockup for [APP NAME], a [WHAT IT DOES].
Screen type: [SCREEN TYPE — e.g., "Today's vendor list"].
Layout (top to bottom):
- Status bar (iOS, 9:41, full battery, 5G).
- Top nav: [DESCRIBE — e.g., "back arrow, centered title 'Today's Market'"].
- Main content: [DESCRIBE — list real elements with real copy].
- Bottom tab bar: [DESCRIBE].
Style: [e.g., "clean, minimal, well-designed real production app"].
Typography: [e.g., "SF Pro, 16pt body, 24pt headings, generous whitespace"].
Color: [e.g., "white background, subtle warm accent #FF6B35"].
Device frame: [e.g., "iPhone 15 Pro, photographed straight-on"].
Constraints: realistic content (no Lorem Ipsum), shipped-product appearance.
```

**Run with:** `--quality high --size 1024x1536 --output-format png`.

## Filled example — onboarding screen

**Brief:** Onboarding screen for "Field & Flour" bakery loyalty app. Hero illustration of a baguette + pastries top half, headline "Welcome to Field & Flour", body "Earn a free pastry with every 5 visits.", primary button "Get Started", "Already a member? Sign in" link below.

**Gemini Pro prompt:**
```
A modern, minimal mobile app onboarding screen for "Field & Flour", a
local bakery loyalty app. Layout top to bottom: status bar (iOS, 9:41,
full battery, 5G); a warm illustration filling the top 45% showing a
rustic baguette and assorted pastries on a wooden board, soft warm light;
a large headline "Welcome to Field & Flour" in a friendly bold serif
typeface; a subheading "Earn a free pastry with every 5 visits." in
clean sans-serif at 60% opacity; a wide rounded primary button labeled
"Get Started" in deep terracotta #B5533C; a smaller text link below
reading "Already a member? Sign in" in muted gray. Use realistic content,
not Lorem Ipsum. Warm cream background #F3EAD3, generous whitespace, 16pt
body text. Place the UI inside a realistic iPhone 15 Pro frame, natural
titanium bezel, photographed straight-on. 9:16 aspect.
```

## Wireframe variant

```
Low-fidelity grayscale wireframe of a [SCREEN TYPE] for [APP NAME].
Placeholder boxes for images, simple line work, dashed outlines for
interactive areas, [PLACEHOLDER COPY OR LIPSUM]. Balsamiq / pen-and-
paper aesthetic. No color, no photography, no typography beyond labels.
Inside a simple unstyled phone outline.
```

## Hebrew/RTL UI

For Hebrew UI mockups, follow the two-stage workflow in [../reference/hebrew-rtl.md](../reference/hebrew-rtl.md):
1. Generate the screen with English placeholder text.
2. Composite Hebrew text in HTML/Figma with `dir="rtl"` and a Hebrew web font.

**Or for client-preview only:** Use Gemini Pro 2K, write all Hebrew text in quotes in the prompt, and set explicit RTL expectations:
```
[Standard prompt]. The headline text is the Hebrew "ברוכים הבאים" (Hebrew
script, right-to-left layout, modern sans-serif typeface like Heebo
Bold). All other text in the UI is also Hebrew, right-to-left. The entire
layout is mirrored RTL: navigation back arrow on the right, primary
actions on the right.
```
Sanity-check every output for letter mangling.