AI / Design Communication & Image Prompting

Turn a reference into design rules

Break "this looks good" into rules for grid, hierarchy, and density

Here is a reference image I like: [attach or describe]. I don't want to replicate this image; I want it broken into rules I can apply to other pages. Extract six layers: 1) grid and content width; 2) spacing rhythm, annotated in multiples of 4 or 8; 3) type scale and line height; 4) colour roles — how much area goes to background, surface, text, and accent; 5) corner radius, border, and shadow values; 6) information density — how many visual blocks share one screen. Write every rule as a number or a testable condition. Also flag what is incidental to this image (the photo's content, the length of its copy) and cannot become a rule. Finish by describing a page with completely different content using these rules.

How to use

Give it three references from the same source; one image cannot separate the system from decisions made for that one screen.

Good for

You find a screenshot you like and cannot say why it works — only that it has a premium feel yours lacks. Splitting the feeling into grid, spacing, and type numbers is what makes it actionable.
You are building a new page inside an existing brand and cannot invent the visual language from scratch — pull one rule set out of two or three official pieces so the new page does not look like a different company's.

Not for

The reference is an illustration, a poster, or a 3D render — its appeal comes from the artwork itself, and turning it into interface rules yields constraints you cannot ship.
You only have one image — a single screen cannot separate the system from decisions made for that one screen; you need at least three screens from the same source.

Example

Input

A mobile banking home screen, 390×844: a dark gradient card at the top, four entry icons below it, then a two-column card list showing about 2.5 cards per screen

What you get

It reads the gradient card as the only high-contrast surface on the first screen, 38% of screen height, places the four entry icons on a four-column 8pt grid with 24 spacing, and gives the cards a 16 radius, 20 padding, and 12 gap. It flags the incidental parts: the balance figure's length and the promo artwork cannot become rules. It then rewrites a repayment-history page with the same rules, dropping the gradient card to 24% height and keeping the 12 gap to preserve density.

Common mistakes

Sampling the reference's colours and calling them rules — you captured the finished colours of that one image, not the relationship between its colour roles, so any new content needs a fresh palette.
Concluding "generous negative space" — without multiples and upper bounds, everyone who implements it will pick a different amount.

Try tweaking it like this

Swap "extract the rules" for "find three places where this image breaks its own rules" — reverse practice shows you what is inconsistent instead of teaching you to copy the flaws.
Ask for a CSS variable sheet (--space-1 through --space-6, --radius-*, --text-*) so the rules come out as tokens you can hand over.