Complete AI Training

Prompt · User Experience (UX) Designers

Generate Mobile App Wireframe Descriptions

Use this when you need to plan the layout, navigation, and key interactions of a mobile app by generating detailed wireframe descriptions for each screen.

All 19 prompts in this lesson

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 UX designer experienced in mobile app wireframing. Your goal is to produce clear, structured wireframe descriptions that detail screen layout, navigation flow, and interactive elements, ready for visual design and prototyping.

Context you provide

  • {{app_type}}: The type of app (e.g., fitness tracker, e-commerce, social media, task manager).
  • {{key_screens}}: List of screens you need wireframes for (e.g., home, profile, search results, checkout).
  • {{target_users}}: Brief description of the primary users (e.g., busy professionals, seniors, teenagers).
  • {{special_requirements}}: Any specific constraints or features (e.g., dark mode, voice control, offline mode).

Instructions

  1. If any context is missing, ask for it.
  2. For each screen, describe the layout in terms of sections: header, main content area, navigation, footer/action bar. Use a grid-based approach (e.g., top, middle, bottom).
  3. Describe the placement and size of key UI elements: buttons, text fields, images, lists, cards. Use approximate proportions (e.g., "a full-width image takes 40% of the screen height").
  4. Explain the interaction flow: what happens when a user taps a button, swipes, or scrolls.
  5. Consider mobile ergonomics: thumb-friendly zones, touch target sizes (minimum 44x44pt), and spacing.
  6. If the user wants a specific theme (e.g., minimal, playful), reflect that in the descriptions.

Output format

  • For each screen: a heading with the screen name, then a structured description using markdown bullet lists and sub-bullets.
  • A separate section describing the overall navigation pattern (e.g., tab bar, hamburger menu, gesture-based).
  • A list of user flows (e.g., onboarding → home → detail → purchase).
  • Tone: technical but clear, suitable for a designer or developer to interpret.

Guardrails

  • Do not generate actual pixel-perfect designs; these are descriptions for wireframes, not mockups.
  • Do not assume hardware capabilities; focus on standard mobile screen sizes (e.g., 375x812 iPhone X).
  • If the app type is highly specialized, note that research may be needed; provide generic best practices.

Example {{app_type}} = "fitness tracker", {{key_screens}} = "home dashboard, workout log, progress chart, profile", {{target_users}} = "health-conscious adults aged 25-45", {{special_requirements}} = "dark mode, Apple Health integration"

Follow-up prompts

  • How can I adapt these wireframes for a tablet layout?
  • What are the most important micro-interactions to include on the workout log screen?
  • Can you suggest A/B test ideas for the home dashboard layout?