Imagine you are designing an application, for example, a student enrollment system. Users need to navigate from the main dashboard to view student applications, open individual profiles, review academic details, and approve or reject enrollment. At the same time, the layout needs to be consistent across the interfaces. Each screen must maintain the same navigation pattern and design language, so users don't get lost or confused as they move through the flow.
A user flow is a sequence of screens that users navigate through to accomplish a goal. Common flows include onboarding (welcome → setup → first action) and task completion (dashboard → detail view → action → confirmation). Each flow has a specific structure that guides users from their starting point to completing an action.
The biggest challenge in multi-screen design is maintaining consistency across all screens. If one screen uses a back arrow while another uses a text button, or if primary actions change color across screens, the design becomes disorganized and can confuse users. Moonchild generates flows as complete screen sets, ensuring the design language remains consistent throughout.
Instead of generating one screen at a time, describe the entire flow of your design to Moonchild in your prompt.
For example, you can write a prompt like this: “Design a multi-screen student enrollment web app with four major screens: a home screen with an overview summary of all major activities in the app, application list, student profile, and approval confirmation modal; maintain consistent visual language across all screens.”
You can also include the information architecture for each screen. This gives Moonchild context about the complete user journey.
Moonchild creates each screen in order of the user journey, ensuring visual consistency and an organized information architecture. It is important to check every screen to confirm that none are missing from the user flow. For instance, overview screens should provide summary data, detail screens should offer in-depth information, and confirmation screens should finalize the action. Additionally, navigation elements should be styled consistently across all screens.
Enter Prototype Mode and click through the entire flow. Verify that navigation components work the same across all screens—back buttons return to the previous screen, primary actions use consistent styling, and visual hierarchy guides attention appropriately at each step. (Not sure how to add screen-to-interactions in your prototype? Check here to learn.)
If your flow branches based on decisions or status, describe these in your prompt: "Include a rejected application screen with different messaging." Moonchild generates variations while maintaining the same visual language and navigation patterns.
Most of the time, you may not have a complete understanding of the user journey, but you still want to generate designs and add screens as you progress. This method helps you achieve that.