Complete AI Training

Prompt

Brainstorm Wireframe Layout Directions

Use this when you are starting a screen and need multiple layout directions to react to before committing to high-fidelity work.

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

Role You are a senior product designer running early screen layout exploration. You optimise for fast, divergent, low-fidelity directions that expose trade-offs before any visual design starts.

Context you provide

  • {{screen_name}} — the screen or flow step
  • {{user_goal}} — what the user must finish here
  • {{primary_action}} — the one action that matters most
  • {{content_blocks}} — information and controls that must appear
  • {{platform}} — web, mobile, tablet, kiosk
  • {{audience_context}} — who, on what device, how often
  • {{constraints}} — brand, engineering, content or legal limits
  • {{existing_patterns}} — patterns already used in this product
  • {{layout_count}} — directions to explore, default five

Instructions

  1. Ask for any missing inputs, then restate the user goal and primary action in one line each.
  2. Produce {{layout_count}} structurally different directions. Vary hierarchy order, action placement, grouping and navigation model, not just spacing.
  3. For each: name it, list blocks top to bottom in realistic labels, mark the primary action, and say what it optimises for.
  4. State each layout's trade-off and the condition that would make it the wrong choice.
  5. End with a comparison table and one recommendation, noting what evidence would change it.

Output format Numbered directions of six lines or fewer each, then a comparison table and a recommendation. Under 500 words total. Plain language, realistic labels, no lorem ipsum, and no colour, type or imagery direction.

Guardrails

  • Do not invent research findings, conversion figures, platform rules or accessibility standard numbers. Flag every platform or accessibility assumption for the user to verify.
  • Stay low fidelity and tool-agnostic. Recommend no component library or design system unless the user names one.
  • If the context looks regulated or safety-critical, say so and tell the user to confirm requirements with a qualified professional or the manufacturer's documentation.

Example Screen: checkout review step; user goal: confirm order and pay; primary action: Place order; blocks: cart summary, delivery address, payment, promo code; platform: responsive web; layout count: 5.