ui Mockup Prompting

# Prompting for UI mockups

UI generation is its own dialect of image generation. The same patterns that work for posters and product photography sabotage UI mockups, and vice versa. This doc covers the specific moves that produce dashboards, marketing pages, app screens, and design-system mockups that look like real products instead of AI mush.

## The two prompt styles for UI

Pick one consciously per mockup. Mixing them in one prompt produces the worst of both.

### Analogy style — best for creative quality and atmosphere

Borrow design language from referents instead of describing pixels:

> *Like reading sheet music behind a hit song. The dashboard should feel like Notion's calm meets a music producer's notes. Quiet typography, strong information hierarchy, single accent color.*

The model maps "Notion" and "producer's notes" to a coherent visual style. Cleaner outputs than describing typography weights and exact spacings.

### Inventory style — best for reliable accuracy

List the semantic content the page must contain, without specifying layout:

> *Page shows: a "Welcome back, Maya" greeting; a 30-day engagement trendline as the hero metric; a list of three active campaigns with status (live / paused / draft) and reach; and a quick-action bar with "+New campaign" and "Import contacts".*

The model decides where things go. You verify the content is right, then iterate composition with one targeted nudge if the layout is wrong.

**Rule:** describing too specifically makes the model *execute* rather than *design*, paradoxically worsening output. Don't write column widths in pixels. Don't write padding values. Describe content and intent; let the model handle layout.

## Use real data, not placeholders

This is the single biggest quality move in UI prompting. The model treats `Lorem ipsum` and `[product name]` as cues to generate filler-looking visuals. Specific data produces specific visuals.

| Don't | Do |
|---|---|
| `Show view count` | `Stat: "2.3M views"` |
| `Display pricing` | `Pricing card: "$29 / mo, billed annually" with "Save 20%" eyebrow` |
| `User profile` | `Profile: name "Maya Chen", role "Product Designer", location "Lisbon"` |
| `Recent activity feed` | `Recent: "Connected to Linear", "Imported 412 contacts", "Published 'Q3 Roadmap'"` |
| `Logo here` | `Logo: a clean wordmark "MERIDIAN" in dark navy Inter Bold` |

Specific data triggers specific styling, alignment, and density choices. This applies even when the data doesn't matter to your final use — make it up, but make it real.

## Color: HEX, not HSL or named

The model parses HEX more accurately than HSL or named colors:

- ✅ `Background #f9f5f0, accent #1a2b4c, text #273142`
- ⚠️ `Background hsl(28 25% 97%), accent hsl(218 49% 20%)`
- ❌ `Cream background, dark navy accent, charcoal text`

Always specify the background hex first, then accent, then any secondary. Three colors max for clean designs; if you need more, you're describing a chart, not a UI.

## Length cap: about 800 words

Past ~800 words, generation can disconnect or produce inconsistent layouts. If you need more detail, split into two passes: generate a base layout first, then `edit` it with the additional specifics.

## What to ask the model to generate vs. what to build in code

Even when generating a mockup for production reconstruction, think about which elements you'd want as real assets vs. as code. This determines what to prompt for:

| Element | Best as | Why |
|---|---|---|
| Page layout, cards, tables, buttons, input fields, filters, plain text | HTML/CSS in production | Geometric, clean, AI mockup is just a reference |
| Standard line icons (calendar, search, settings, nav) | SVG / icon lib in production | Stroke width and color need to be controllable |
| Logo, brand mark, complex empty-state illustration, 3D/glass texture, hand-drawn elements | Generated image asset | Brand recognition needs visual fidelity that code reconstruction loses |
| Tiny product visualizations, network/relationship diagrams, multi-logo integration grids | Generated image asset | Code can fake structure but loses density and brand iconography |
| Background textures, soft glows, complex shadows, decorative illustrations | Generated image asset | Model produces texture quality that CSS can't fake |

When you're prompting for the FULL mockup (not just an asset), keep this in mind: the model will render everything as pixels regardless. But knowing which parts are throwaway vs. which parts you'll actually crop out as assets affects what you ask it to render carefully.

## Asset prompts — when generating a single piece

These are prompts for generating standalone assets you'll later place in a UI (logo, hero illustration, vendor logo row, empty-state). Each one centers a single subject on a clean background and asks for generous padding so cropping is forgiving.

### Standalone logo asset