Prompting UI and App Screens: An AI Interface Design Tutorial
A photograph has one subject. A screen has a system: a grid, a hierarchy that tells the eye where to go first, the same card repeated with different content, and text in nearly every corner. That is why screens are the hardest design job to prompt. A prompt that describes a picture gets a picture of a screen, with invented words and overlapping panels. A prompt that describes a layout system gets something a designer can rebuild and test.
This is the interface companion to the flagship guide, How to Prompt AI Design Tools. This page covers screens only, for one fictional app. Sibling deep dives cover logo prompting and product photo prompting; all sit on the AI design prompting hub.
These are worked examples: they describe the result each prompt is written to produce, across most UI generation and image tools. Features differ between tools: some take a device frame, some take reference screens, some take words only. Check your tool; keep the prompt structure the same.
The Language of Screens
Screen prompts talk about structure, not light and mood. Five pieces of vocabulary do most of the steering.
Grid. Name the columns: a single column stack, a two column card grid, a sidebar plus content split. No grid words means floating, overlapping elements.
Hierarchy. Say what comes first and give it a size advantage in words: one large heading, one primary card twice the height of the rows below it. Hierarchy by size survives generation; hierarchy by adjective does not.
Repeated components. Name the component, name how many, describe one in full. "Four plant cards, each with a photo area, a name, and one status line" produces a family. "Some plants" produces four unrelated panels.
Whitespace as a slot. Padding and gaps are structure, not emptiness: generous padding, clear gaps between sections. No spacing words returns a screen filled edge to edge.
Platform conventions. Name the platform and its furniture: phone portrait with a status bar and bottom tab bar, or desktop web app with a left sidebar. Tools apply the right pattern only when prompted.
| Vague word | Concrete prompt phrase to use instead |
|---|---|
| Clean | Generous padding, clear gaps between sections, two column grid |
| Modern | Sans serif type, 16px rounded corners, flat surfaces, one accent color |
| Simple | One primary action, four items maximum, one supporting line per item |
| Intuitive | Bottom tab bar with labeled tabs, primary button at card bottom, back arrow top left |
| Professional | Same card style repeated, muted palette, even spacing |
| User friendly | Large tap targets, labels of one or two words, readable text size |
The UI Style Block: One Block for Every Screen
The flagship tutorial built prompts from the Seven Slots formula: job, subject, style, composition, light and color, format, constraints. Screens expand the style and composition slots into a fixed block, written once per app and pasted into every screen prompt unchanged. Test it on one screen, then freeze it.
PROMPT - UI STYLE BLOCK, LEAFDAY PLANT CARE APP: Platform and frame: mobile app, phone portrait, single screen only, no mockup frame, no hands. Layout skeleton: top app bar with screen title, content below, bottom tab bar with four tabs. Type: plain sans serif, one large bold heading per screen, medium labels, small muted supporting text, short real words only. Corners and spacing: cards with 16px rounded corners, generous padding, clear gaps, medium density, nothing touches the screen edges. Palette: background warm off white #FAF7F0, card surface white #FFFFFF, main text deep green charcoal #22301F, primary green #2F6B3A for the main action and active tab only, terracotta #C96F3B for one warning state only, pale sage #DCE8D8 for quiet fills. Components: flat cards, thin light border, simple line icons in one stroke weight, one filled pill button for the main action.
| Line in the block | What it controls |
|---|---|
| Platform and frame | Device, orientation, and furniture; without it, desktop parts appear on phone screens |
| Layout skeleton | Where fixed regions sit; without it, tab bars wander |
| Type | Heading weight and label length; without it, each screen invents a new scale |
| Corners and spacing | Radius, padding, and density; without it, one screen turns dense, the next airy |
| Palette, with hex values | Background, surface, and accent jobs; without it, fresh colors per screen |
| Components | Card, icon, and button treatment; without it, styles change per screen |
Two rules keep the block working: accents get jobs, not just names, and the block is edited in one place only, then the set is regenerated from the new version.
Round A: The Home Screen
The job. LeafDay is a fictional app for tracking indoor plant care: watering, feeding, and light checks. The home screen answers one question at a glance: what needs doing today? It combines a greeting, one large next task card, a plant grid, and the tab bar.
The weak prompt.
PROMPT: a plant care app home screen, clean, modern, green
What goes wrong: a pretty picture of a screen. Expect a giant leaf photograph behind scattered text, plant cards in three styles, labels in flowing script, a desktop side menu, and bright green used for everything, so nothing reads as the main action. One word, green, was left to do palette, layout, and branding.
The improved prompt.
PROMPT: App screen design, home screen for a plant care tracker. Insert the LeafDay UI style block here, unchanged. Content, in order: top app bar with LeafDay at left and a bell icon at right; one greeting line, Good morning, in large bold type; one large next task card, twice the height of the cards below it, with plant name Monstera, task line Water today, and one filled pill button labeled Done; below it, a two column grid of four plant cards, each with a photo area on top, a name in medium type, and one short status line such as Water in 2 days; bottom tab bar with four labeled tabs, Home, Plants, Tasks, Profile, Home active in primary green. Constraints: short real English words only, no invented words, no lorem ipsum, no side menu, no photograph behind text.
The outcome, and why. A screen that reads in the right order: greeting, one big task, four equal plant cards, tab bar. Listing content in order, with relative sizes, gave the hierarchy; describing the plant card once and counting it at four made the grid repeat one design. The block fixed palette jobs in advance, leaving green on the Done button and the active tab. Labels are capped short, because twelve labels are twelve chances for invented spelling.
Iteration step: if the next task card returns the same size as the plant cards, strengthen the size phrase only: "next task card spans the full width and is the tallest element on the screen."
Round B: A Detail Screen That Matches
The job. Tapping the Monstera card opens a plant detail screen: a larger photo, three care facts, a short history list, and a main action. This is where generated sets fall apart, because a fresh prompt describes a fresh app.
The weak prompt.
PROMPT: a plant detail page for a monstera, lots of care information, nice design
What goes wrong: a new design language. The radius changes, a gradient header appears, the button becomes a wide rectangle in a blue the home screen never used, and the care facts arrive as one dense paragraph.
The improved prompt.
PROMPT: App screen design, plant detail screen for a plant care tracker, same app as the home screen. Insert the LeafDay UI style block here, unchanged. Content, in order: top app bar with a back arrow at left, Monstera as title, and a bell icon at right, matching the home screen; one large plant photo area with rounded corners; the name Monstera in large bold type; three care fact rows in a flat white card, each row a line icon, a label, and one value: Water, Every 7 days; Light, Bright indirect; Fed, 12 days ago; a history list of three short rows, Watered, Oct 12; Watered, Oct 5; Fed, Sep 28; at the bottom, one filled pill button labeled Water now in primary green, above the same bottom tab bar as the home screen, Plants active. Constraints: short real English words only, no invented words, no lorem ipsum, no gradient header, no blue.
The outcome, and why. A detail screen that is plainly the same product: same app bar, card radius, button, and tab bar. The content slots changed completely; the style block changed not at all. Naming values in full, Every 7 days rather than "care info," stops facts being compressed into a paragraph, and rows built from an icon, a label, and a value give facts a repeatable shape.
Iteration step: if the photo area returns with text baked over it, add one constraint, "no text on the photo," and regenerate.
Round C: The Dark Mode Variant
The job. The Round A home screen in dark mode. Dark mode is a palette and contrast job, not a new layout job. The palette method is in the dark mode design guide; this round applies it inside a prompt.
The weak prompt.
PROMPT: the same plant app home screen but dark mode, moody, stylish
What goes wrong: the layout is regenerated and returns rearranged, the background goes pure black so card edges vanish, the green turns neon, and terracotta spreads from one warning state to every icon.
The improved prompt.
PROMPT: App screen design, home screen for a plant care tracker, dark mode variant of an existing light screen. Layout, content, order, card sizes, and tab bar identical to the light home screen: nothing moved, added, or removed. Insert the LeafDay UI style block here with the palette line replaced by this dark palette line only: background deep green charcoal #131A13, card surface #1E2A1E, main text warm off white #F2F5EE, muted text soft sage gray #B9C6B2, primary green lightened to #8FD0A0 for the main action and active tab only, terracotta lightened to #E8A37C for one warning state only, quiet fills #2A3A2A. All other block lines unchanged, with cards separated by a lighter surface instead of a border. Constraints: no pure black, no neon, no gradient, no new elements.
The outcome, and why. The home screen, untouched in structure, on a dark ground with cards one step lighter than the background. Pure black removes the surface separation borders gave the light version, so this version builds separation from a surface step, per the dark mode design guide. Accents mixed for a light background lose contrast on a dark one, so they are lightened as stated hex values. Test any palette from a generated screen before use, per the accessible color systems guide.
Iteration step: if muted text returns too dim, raise that one hex value in the palette line, from #B9C6B2 toward #CBD8C4, and regenerate. Contrast repairs belong in the palette line, not in a request for brighter text.
Component-Level Prompting
Whole screens are not always the job. Sometimes you need one pricing card, one empty state, or one onboarding slide. Components prompt faster, and a good set becomes the reference for full screens.
- Pricing card. Name the plan, the price as real text, the feature line count, and the card state.
- Empty state. Ask for the emptiness directly: one illustration area, one heading, one explanation line, one button.
- Settings row set. Prompt rows as a repeat: icon, label, one value or a switch, five times in one card. Name the right side element per row.
- Onboarding slide. One idea per slide: a headline of five words or fewer, one supporting line, one image area, progress dots, a Skip label, plus the shared block and slide number.
A worked mini-example: the empty state.
PROMPT: Single app component, empty state for the Tasks screen of a plant care tracker. Use the LeafDay style block lines for type, corners, palette, and components. Content, centered on the app background: one simple line illustration of a watering can in primary green, same stroke weight as the app icons; one heading in large bold type, Nothing due today; one muted line, Your plants are all watered; one filled pill button labeled Add a task. Constraints: no fake task rows, no plant cards, no extra text, generous empty space around the group.
The outcome, and why. A quiet center with four elements and a clear next action. The list is short because an empty state is mostly space, and stating "generous empty space" protects it from suggested plants and tips.
Failure Fixes: Five Screen Defects
Filler text and garbled labels everywhere
Symptom: headings read as near words, buttons carry flowing script, body areas fill with lorem ipsum. Fix: cut the text requested, demand short real words, or drop to a wireframe level pass with no body text.
PROMPT: (revise content and constraints) Content: headings and labels only, each label one or two real English words, no body paragraphs. Constraints: no lorem ipsum, no invented words, no script fonts, body areas as empty blocks.
Outcome: a dozen short labels that mostly survive intact, and empty blocks for real text.
Screens in a set stop matching
Symptom: the detail screen has a different radius, button shape, and palette from the home screen. Fix: stop editing screen prompts individually. Freeze one style block, paste it unchanged into every prompt, and let only content differ.
PROMPT: (add at the top of every screen prompt) Use this style block exactly, word for word: [paste the full block]. Change nothing in the block for this screen.
Outcome: drift narrows to small rendering variation. Regenerate the wandering screen only.
Impossible layouts
Symptom: cards overlap the tab bar, a sidebar appears on a phone screen, a button sits half off the edge. Fix: restate the platform, give the layout a count and an order, and ban the foreign pattern by name.
PROMPT: (revise the layout line) Layout: phone portrait, single column flow in this order: app bar, greeting, one full width card, two column card grid, bottom tab bar. Constraints: no sidebar, no overlapping elements, nothing touching screen edges.
Outcome: a plain, buildable arrangement. Exotic layouts are usually a platform mix-up.
Rainbow accent drift
Symptom: every card gets its own bright color and the primary green loses its meaning. Fix: give each accent one job in the palette line and ban extra colors in the constraints.
PROMPT: (revise palette and constraints) Palette: primary green for the main action and active tab only, terracotta for one warning state only, everything else in background, surface, text, and pale sage. Constraints: no blue, no purple, no yellow, no multicolor icons.
Outcome: color returns to signaling: only one element carries the main action color.
Type too small to read
Symptom: supporting text renders as tiny gray lines and tab labels shrink to specks. Fix: set a size floor in words, reduce the item count, and lower the density.
PROMPT: (revise the type line) Type: large heading, body and labels at a clearly readable size, nothing set as tiny text, supporting lines short and few. Reduce this screen to four cards and three fact rows.
Outcome: fewer, larger elements that survive a rebuild in a real tool.
Iteration Log: The Home Screen
One variable per generation, logged across Round A.
| Generation | Prompt change | Result | Keep or revert |
|---|---|---|---|
| 1 | Full prompt with style block, first run | Right order and grid, green spread over headings | Keep layout, fix palette |
| 2 | Palette line only: green limited to main action and active tab | Headings back to charcoal, Done stands out | Keep |
| 3 | Content line only: next task card twice plant card height | Clear hierarchy, task reads first | Keep |
| 4 | Type line experiment: smaller muted supporting text | Status lines hard to read at phone size | Revert to generation 3 wording |
The last row is the useful one: a reverted change is a result. The log now records the smallest type line this app can use.
Handoff: What a Designer Still Decides
A generated screen is a strong draft of a layout, not a design file. The gap is a list of decisions the tool never faced, because generated screens show one plant, one user, and one good day.
- Real data lengths. Test a 28 character plant name, a task list of one item and of fourteen, a user with forty plants. Real content is uneven, and uneven content is where grids break.
- All states, not just the full one. Empty, loading, and error states for every list and action. Generation shows the success state only; the component method above produces the rest.
- Accessibility on the real values. Measure text and accent contrast from the actual hex values, per the accessible color systems guide and the WCAG compliance guide. Check tap target size, and walk the focus and reading order as a keyboard or screen reader meets it.
- Real type, set in a real tool. Rebuild with the actual font, weights, and copy; spacing and truncation become true only when real text is set.
- Design tokens. Convert the style block into tokens: named colors, the radius, spacing steps, type sizes, so a team and later a codebase can reuse it without re-prompting.
- Platform details. Safe areas, system bars, and back behavior differ by platform. Check the rebuilt screen on a real device or a faithful preview.
A Short Note on Commercial Use
Prompting skill and usage rights are separate questions. A screen generated for a client app or a paid product carries the terms of the tool and plan that produced it. Before generated screens shape a product you sell, read the rights side in AI-generated images and commercial use.
FAQ
Can an AI tool generate a whole app design in one prompt?
It can generate screens from one long prompt, and the screens will drift. Consistency comes from a shared style block pasted into separate prompts, one screen at a time.
How do I keep five screens consistent?
Freeze one UI style block, paste it word for word into all five prompts, and change only the content list per screen. Fix problems in the block once, then regenerate.
Should prompts include real copy?
Short real copy, yes: headings, labels, button text, and example values, because length changes layout. Long body text, no: leave body areas as empty blocks for the design tool.
Should I prompt a wireframe first or go straight to full color?
Wireframe first when the layout is undecided: a grayscale, text light pass settles grid, order, and counts. Go straight to the full block when the layout is settled, as in Rounds B and C.
What do I do with the output in Figma or in code?
Treat it as a reference layout, not an asset. Rebuild with real components, real type, and tokens from the style block.
What to Read Next
- AI design prompting hub - the pillar page for this series.
- How to Prompt AI Design Tools - the flagship tutorial.
- AI logo prompting tutorial - logo prompts, job by job.
- AI product photo prompting tutorial - product scene prompts.
- Dark mode design guide - dark palettes and contrast.
- Accessible color systems - testing palettes for contrast.
- WCAG compliance and accessibility guide - checks a screen cannot do.
- AI-generated images and commercial use - terms, copyright, disclosure.
Maintained by the Lucky Graphics editorial team. Prompts are shown in full so you can copy them; outcomes describe what each prompt is written to produce.