Image & Design Difficulty: Advanced

Wireframe Generation for User Flow Design

This prompt guides a professional UI/UX designer to create a comprehensive wireframe for a specified user flow on a designated type of website or app. The designer is instructed to include detailed layout designs for each page, focusing on the placement of buttons, images, and text fields. The wireframe should prioritize user-friendliness, intuitiveness, and brand alignment while incorporating current design trends to enhance user engagement and satisfaction.

The prompt

88 words2 blanks to fill in

Act as a professional UI/UX designer with extensive experience. Based on the provided [USER FLOW], placeholder for a [TYPE OF WEBSITE/APP], placeholder, create a detailed wireframe that includes layout designs for each page involved in the user flow. Specify the placement of all buttons, images, and text fields. Ensure the design is user-friendly, intuitive, and aligns with the overall brand aesthetic. Incorporate the latest design trends to facilitate a seamless user experience that encourages engagement and ensures user satisfaction. Present the output as a structured wireframe ready for immediate implementation.

Highlighted text is a blank. Swap it for your own detail before you send the prompt.

What it produces

  • A wireframe layout for a shopping app user flow, detailing the homepage, product pages, and checkout process.
  • A wireframe design for a social media platform, including user profile pages, feed layout, and messaging interface.
  • A wireframe for a corporate website, showcasing the homepage, service pages, and contact form layout.

How to use this prompt

Four steps, about a minute. Nothing to install and no account needed.

  1. Copy the prompt

    Use the Copy button above. The whole prompt goes to your clipboard exactly as written. Nothing is trimmed.

  2. Fill in the blanks

    Replace [USER FLOW] [TYPE OF WEBSITE/APP] with your own details. Everything in square brackets is a blank for you to fill in.

  3. Paste it into your assistant

    Checked against Mistral, ChatGPT, Claude. It is written as plain instructions, so paste it into whichever of them you already use.

  4. Read the result, then push back

    Compare what you get to the example below. If it is close but not right, say what to change: shorter, warmer, more specific, then ask again in the same conversation.

More prompts like this one

Close neighbours in Image & Design, by shared subject and tagging.

Share Wireframe Generation for User Flow Design:

Reviews and questions

What other people got out of this prompt, and what they asked about it.

No reviews yet

Be the first to share how this prompt worked for you.