A fresh layout brief in one click
Staring at an empty artboard is the slowest part of layout work. This tool generates a layout concept brief — a short, structured prompt that fixes the grid, the content hierarchy, where the primary call to action lives, and how visual weight is distributed. Treat it as a constraint to design against, not a finished design.
How it works
The generator holds a list of options for each layout dimension:
- Page type — landing, dashboard, pricing, profile, article, and more.
- Grid structure — symmetric 12-column, asymmetric split, single-column reading flow, modular card grid, and others.
- Content hierarchy — hero-first, F-pattern scan, Z-pattern, content-dense, progressive reveal.
- Primary CTA placement — above the fold center, sticky footer bar, top-right, repeated inline, floating action.
- Visual weight — where emphasis sits via size, color, and whitespace.
Each generate picks one option from each dimension at random and stitches them into a readable brief. Because the dimensions are independent, you get a large number of distinct, coherent combinations.
What each dimension means in practice
Grid structure is the skeleton that holds everything else. A symmetric 12-column grid is the most flexible, suited to content that needs to adapt across breakpoints. An asymmetric split — say 7 columns for content and 5 for context — forces a reading direction and works well for article-plus-sidebar or hero-plus-form layouts. A single-column reading flow removes all competing visual tracks and is best for long-form or focused conversion pages.
Content hierarchy determines what the user’s eye reaches first. Hero-first means a large image or headline above the fold commands immediate attention. F-pattern describes how readers scan text-heavy pages — left to right on the first line, then down the left margin. Z-pattern works for simpler pages with a clear start and end point — it guides the eye from top-left, across, down diagonally, then across again to the CTA. Progressive reveal withholds content until the user has committed by scrolling, which increases engagement but reduces immediate comprehension.
CTA placement is often where design debates concentrate. Above-the-fold centre maximises early capture but assumes the user is already convinced. A sticky footer bar is persistent and low-intrusion, better for pages that require reading before decision. Repeated inline means the CTA appears multiple times within the content — effective on long pages where the decision moment varies by reader.
Using this for design sprints
The constraint format makes generated concepts useful for timed exercises:
- 10-minute sketching challenge — take a generated brief and wireframe a page that satisfies all four dimensions in ten minutes. Critique what you had to compromise.
- A/B brief comparison — generate two concepts for the same page type and sketch both. Use the comparison to articulate why one direction better serves the actual user task.
- Design interview warm-up — practise explaining a layout decision in under two minutes using the brief as a constraint. The structured vocabulary (grid, hierarchy, CTA, weight) maps directly onto how interviewers ask layout questions.
If a combination feels contradictory — for example, content-dense plus heavy whitespace emphasis — that tension is intentional. Resolving a constraint contradiction is the real design work; finding a layout that does both poorly is the most common mistake.