# Dashboard / Web UI mockup template

**Default model:** Gemini Pro at 4K. Hi-fi dashboards have many small text labels and complex multi-region layouts — Pro's thinking mode + best-in-class text rendering are required. Don't use Flash for hi-fi dashboards.

## Required inputs

- Product name + what it tracks
- Layout regions (sidebar / header / KPI cards / charts / tables)
- Real metric values to render (don't use Lorem Ipsum / placeholder numbers)
- Color palette (primary brand color + neutral grays as hex)
- Font family direction (Inter / system sans / etc.)
- Dark mode or light mode

## Gemini variant (narrative)

```
A high-fidelity web dashboard UI mockup for [PRODUCT NAME], a [WHAT IT IS].
[LIGHT/DARK MODE]. Layout: [SIDEBAR DESCRIPTION — e.g., "left sidebar
240px wide with logo at top, 6 navigation items: Overview, Users,
Revenue, Reports, Integrations, Settings, each with an icon"]; [HEADER
DESCRIPTION — e.g., "top header with a search bar, a notifications bell,
and a circular user avatar"]; [MAIN AREA — describe each region with real
content].

KPI cards (top row, 3 across):
- Card 1: "[METRIC NAME]" with value "[REAL NUMBER]" and trend "[+X.X%]"
- Card 2: ...
- Card 3: ...

Below: [CHART DESCRIPTION — e.g., "a large multi-line chart titled
'Weekly Traffic' showing 4 weeks of plausible data, x-axis labeled with
real day names, y-axis with real visitor numbers"].

Bottom: [TABLE DESCRIPTION — e.g., "a 5-row data table with columns:
Customer, Plan, MRR, Status, Last Active. Rows show realistic SaaS-style
data."].

Style: modern flat design, [BG COLOR], 1px light-gray dividers, subtle
soft shadows on cards, 8px rounded corners, [FONT — e.g., "Inter font
family"]. Primary color [HEX], neutral grays [HEX] and [HEX]. Use
realistic content, not Lorem Ipsum.

16:9 aspect.
```

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

## OpenAI gpt-image-1.5 variant

```
Brief: high-fidelity web dashboard UI mockup for [PRODUCT NAME].
Theme: [light / dark mode].
Sidebar (left, 240px wide): logo at top, [LIST NAV ITEMS WITH ICONS].
Header (top): search bar, notifications bell, user avatar.
Main content area:
- KPI cards (3 across):
  - "[METRIC]" / "[VALUE]" / "[TREND]"
  - "[METRIC]" / "[VALUE]" / "[TREND]"
  - "[METRIC]" / "[VALUE]" / "[TREND]"
- Chart: [DESCRIBE — title, axes, plausible data].
- Table: [DESCRIBE — columns, plausible rows].
Style: modern flat, [BG], soft card shadows, 8px rounded corners, [FONT].
Color: primary [HEX], grays [HEX] and [HEX].
Constraints: realistic content, no Lorem Ipsum, shipped-product appearance.
```

**Run with:** `--quality high --size 1536x1024 --output-format png`. Note: OpenAI maxes at 1536px so dashboard fine detail will be more compressed than Gemini Pro 4K.

## Filled example — analytics dashboard

**Brief:** "MetricsCo" SaaS analytics dashboard. Overview screen with active users / MRR / uptime KPIs, a weekly traffic chart, customer table.

**Gemini Pro prompt:**
```
A high-fidelity web dashboard UI mockup for MetricsCo, a SaaS analytics
product. Light mode. Layout: left sidebar 240px wide with the MetricsCo
wordmark logo at top, 6 navigation items: Overview (active), Users,
Revenue, Reports, Integrations, Settings — each with a clean line icon.
Top header with a search bar reading "Search customers, events...", a
notifications bell with a small red dot, and a circular user avatar
showing "JD" initials.

KPI cards (top row, 3 across):
- Card 1: "Active Users" value "12,847" trend "+8.2% this week"
- Card 2: "Monthly Recurring Revenue" value "$284K" trend "+12.4% MoM"
- Card 3: "Uptime" value "99.94%" trend "30-day SLA met"

Below: a large multi-line chart titled "Weekly Traffic", x-axis labeled
with real day names Mon-Sun, y-axis with visitor numbers from 1.2k to
4.8k, showing two lines (this week vs last week).

Bottom: a 5-row data table with columns: Customer, Plan, MRR, Status,
Last Active. Rows show realistic SaaS data: "Acme Corp / Enterprise /
$4,200 / Active / 2 hours ago", etc.

Style: modern flat design, white background, 1px light-gray dividers,
subtle soft shadows on cards, 8px rounded corners, Inter font family.
Primary color #0B5FFF, neutral grays #F5F7FA and #1A1F36. Use realistic
content, not Lorem Ipsum. 16:9 aspect.
```

## Tips

- **Don't try to fit too many regions.** A 6-region dashboard (sidebar + header + 3 KPI cards + chart + table + footer) is the upper limit. More than that, and the text in each region degrades.
- **Real numbers matter.** "12,847" is far more believable than "12,000" or "X,XXX." Specify them.
- **Specify font family.** "Inter," "system sans-serif," "Helvetica Neue" all render distinctly.
- **For dark mode**, specify the background hex (e.g., `#0F1419`) and surface hex (e.g., `#1A1F2E`) explicitly.
- **For Hebrew dashboards**: generate UI in English, then composite Hebrew labels in HTML/Figma. See [../reference/hebrew-rtl.md](../reference/hebrew-rtl.md).