How to Design App Screens with AI

Flow first, screens second

It's tempting to ask an AI for 'a nice screen for my app'. The result usually looks fine and helps little, because no screen exists alone: it belongs to a journey. Before drawing anything, define what the user wants to achieve and the steps they take to get there.

• User and goal: who uses the app and what they want to get done in a typical session.
• Main path: the steps of the most important task, from entry to outcome.
• Edge cases: what happens with no data, a lost connection or a user mistake.
• Screens needed: the minimum list to complete the main path; everything else can wait.

Act as a product designer. I'm designing an app for [type of user] that lets them [main goal].
Propose the user flow for the most important task, step by step, from opening the app to reaching their goal.
For each step state: what the user sees, what they decide or do, which screen is needed and what could go wrong.
Then summarise the minimum list of screens for a first version and say what you would leave out for now. If information is missing, ask me before you start.

Describe each screen around one purpose

A well-defined screen answers one question: what should the user be able to do here? From there, AI can suggest a coherent structure. The more specific the details you give it, the less generic the proposal.

Describe the '[screen name]' screen of a mobile app for [type of user].
Screen goal: [what the user should accomplish here].
Data shown: [list].
Possible actions: [list], marking the primary one.
Give me: 1) the layout from top to bottom with elements and their priority, 2) the button labels and messages, 3) the states: empty, loading, error and success, 4) accessibility considerations (contrast, touch target size, labels for screen readers).
Use plain language and avoid jargon.

Always ask for empty, loading and error states. They're the ones most often forgotten and the ones users notice most when something doesn't go as expected.

What AI is good at in design, and what it isn't

AI is useful for exploring alternatives, drafting interface copy, spotting missing screens and reviewing a flow with a critical eye. Some tools also generate mock-ups or code from a description; their features, limits and terms change often, so check each tool's current information.

• Good for: proposing structures, copy and variants, and checking the logic of the journey.
• Use with care: generating visual mock-ups. Check that screens are consistent with each other and share one style.
• Not a substitute for: testing with users. Only they can tell you whether something is understood.
• Not for copying: other apps' designs. Draw on common patterns, but don't reproduce brands, illustrations or text that aren't yours.

Review the design critically

Once you have the screens, ask the AI for a review that goes beyond praise. Assistants lean agreeable by default, so ask for problems explicitly:

Review this screen flow as a demanding usability specialist. Here is the list of screens with their descriptions:
[paste the screens here]
Identify: 1) unnecessary or confusing steps, 2) places where a user could get stuck, 3) ambiguous copy, 4) accessibility problems, 5) missing screens or states.
Rank the problems from most to least serious and suggest a concrete fix for each. Don't soften the criticism.

Internal tools and data dashboards

Not every app is customer-facing. Many teams need an internal dashboard to look up data, review requests or manage tasks. The approach is the same with a few differences: clarity beats polish, and you should think carefully about which data appears and who can see it.

• Define which decisions the dashboard must support and what information each one needs.
• Show only what's needed: a screen crammed with widgets is hard to read.
• Think about permissions: not every user should see all the data.
• Keep unnecessary personal data out of screens and test content.

Common mistakes when designing with AI

• Starting with the visual look before the flow is defined.
• Designing every screen at once instead of a minimal first version.
• Accepting the first proposal without asking for variants or critique.
• Forgetting error, empty and loading states.
• Skipping accessibility checks: contrast, sizes and labels.
• Taking a design to production without trying it on real people.

Before moving to code, run the flow past a few people from your audience. Changing a drawing costs far less than changing a built app.

How PromptNow helps with screens

The app screens and flows template asks for your app's goal, user and main tasks, then generates a prompt that has the AI propose the flow and describe each screen. If you need an internal dashboard for your team, the AI internal dashboard template helps you decide what data to show and how to organise it.

The outputs are a starting point to take into your design tool: review them, test them with users and adjust.