Visual Reference Generation

---
name: visual-reference-generation
description: Produces design reference imagery before implementation — screen concepts, layout directions, and flows for web or mobile that make a verbal brief concrete enough to argue with. Use this when a brief needs visualizing before anyone builds, when comparing layout directions, when handing a developer a target, or when stakeholders are describing different things with the same words.
---

# Visual reference generation

Arguing about an image costs an hour. Arguing about a build costs a sprint. Generate the picture
first.

## Before generating

Settle these, or the output is decoration:

- **Surface and platform** — web page, native mobile screen, dashboard. These are not the same
  problem at different aspect ratios: touch targets, native chrome, and scroll behavior change what
  a good layout is.
- **What it optimizes for** — one conversion, one task completion, one first impression. Stated, so
  the image can be judged against something.
- **Content reality** — real headline lengths, real data volumes, real edge cases. A concept built
  on three-word labels collapses on contact with actual copy.

## Generating

- **One concept per image.** Tiling several ideas onto one canvas makes them impossible to compare
  or iterate separately.
- **Generate genuinely different directions**, not variations of one. Three near-identical options
  is one option presented three times.
- Include the states that will exist: a populated view and an empty one, at minimum.

## Web versus mobile

**Web** — the fold is a real constraint but not a hard one; horizontal space allows genuine layout
choices; hover exists. Design for a range of widths, and decide what the narrow case does.

**Mobile** — thumb reach dictates where primary actions sit; native navigation patterns are
expectations, not suggestions; there is no hover, so affordance must be visible. Design the scroll,
not the screenshot.

## After generating

Say explicitly what in the reference is **direction** and what is **placeholder**. A developer
handed a concept will otherwise implement the lorem ipsum faithfully.

## Never

- Generate before the content, states, and constraints are settled. A reference built on placeholder copy hides every real problem.
- Present a generated image as a working design. Say what it is.
- Generate with filler text where real string lengths decide the layout.
- Hand off an image as the spec. Hand off the tokens, spacing, and states behind it.