Complete AI Training
Start for Free

Your job's AI kit

Get your AI kit

Tell us who you are and what you do. We show you your kit right away and email you the link: skills, prompts, AI agents, MCP servers and courses for your job.

500+ jobs ready, and we make a kit for any other job. No payment needed to look.

Share

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.