"The framework I use for writing prompts is called Zoom-Out-Zoom-In. I start by creating a proper context for my product and explaining its target user, then zoom in on the actual screen/page design I want to generate, explaining the goal of a particular screen/page, its layout hierarchy, and the design constraints the AI should consider when generating it. Finally, I mention expectations I have about the screen that AI will generate for me."
"Context:Design a mobile app screen for a personal finance app that helps users track daily spending.User:Young professionals who check expenses multiple times per day, often on the go.Goal of the screen:Help users quickly understand- Today's total spending- Top spending categories- Whether they are over or under budgetScreen type:Home / Dashboard (iOS-style mobile UI)Layout & hierarchy:- Sticky header with app name and current month- Primary focus: large total spending number for today- Secondary section: horizontal category cards (Food, Transport, Shopping, Other)- Tertiary section: simple list of recent transactions (last 3-5 items)Components:- Header with subtle divider- Large numeric value with supporting la"
Stitch focuses on rapidly overcoming the blank-canvas problem by generating initial UI layouts rather than delivering final production-ready designs. The first step in the workflow is writing a clear prompt and selecting an appropriate AI model. Use the Zoom-Out-Zoom-In prompt structure: provide context and target user, specify the screen goal, layout hierarchy, and design constraints, then state expectations for the generated screen. Include concrete components and visual priorities so the AI produces relevant layouts. Example prompts specify context, user, goal, screen type, layout hierarchy, and component details for a mobile dashboard.
Read at Medium
Unable to calculate read time
Collection
[
|
...
]