Shipping an app or SaaS, design calendars stall on three assets: splash / launch, feature benefit cards, and empty-state illustrations. Components exist in Figma, but store screenshots and onboarding still lack visuals; outsourcing takes a week per round while copy keeps changing.
Image 2 fits a better path: treat the need as a UI visual slot production line—lock brand color and type hierarchy, then ship splash → onboarding → feature cards → empty state → settings mock → store frame. This post shares 6 tested image-2 prompts for review-ready App / UI screens.
Use it as a product-design playbook: one job per frame, copy verbatim, proof button and title spelling before export.
📌 Prompts below are in English (Image 2 handles structured English and in-image text reliably). Manually proof UI copy, trademarks, and accessible contrast; final polish should still land in Figma on an 8pt grid with real components.
1. Why Image 2 fits “App / UI screen” work
Versus hoping a generic illustration model gets lucky, Image 2 wins because:
-
In-image text stays readable — splash titles, three-line feature cards, empty-state CTAs—benchmark-tier ~99% text rendering beats “generate then paste type in PS” for AI interface art delivery.
-
Multi-turn edits swap copy without wrecking layout — PM changes one onboarding line; chat-replace that line while keeping illustration and button shape—Image2 conversational edits shine here.
-
Style constraints become design-system fields — brand HEX, corner radius, shadow strength, illustration style (flat / soft 3D) in every prompt makes the series feel like one Design System.
For product and design partners: UI visual assets can be generated from an information architecture, not from waiting on an illustration calendar.
2. Standard workflow (five steps)
-
List UI visual slots — minimum six: ① splash/launch ② onboarding page ③ feature benefit cards (3 points) ④ empty state ⑤ settings/profile mock ⑥ App Store / store screenshot frame. Never cram a full interactive app into one image.
-
Write brand and type constraints — primary/secondary colors, light/dark ground, title length caps; avoid forging trademarked OS chrome (generic status bars are fine).
-
One job per frame + verbatim copy — each answers one user question: first open impression? why stay? what if there’s no data? how does it look in the store?
-
Unify aspect ratios — splash/store often 9:16; feature cards 1:1 or 4:5; keep one ratio family inside a set.
-
Three checks before Figma — spelling, contrast, corner radius vs DS—fix drift with Image 2 multi-turn edits instead of full re-rolls.
3. Six tested UI prompts (copy-paste)
Example product: a fictional productivity app “FlowDay.” Swap the name and benefits for yours. Keep a brand accent in every prompt (sample: #4F46E5 indigo).
Slot 1: Splash / launch screen
Scenario: cold-start brand impression—centered mark + short tagline.
App splash / launch screen mock with Image 2 for mobile UI.
Vertical 9:16, clean modern iOS-like frame (generic status bar, no trademarked icons).
Centered app mark: simple indigo rounded-square icon with white "F" monogram.
Headline exactly: "FlowDay"
Subline exactly: "Plan less. Finish more."
Background: soft indigo-to-white gradient, subtle geometric glow, ample padding.
Sharp legible type, Image2 text accuracy, premium SaaS look.
Do not clutter with fake notifications. No watermark.
Result: a review-ready app splash visual.
Slot 2: Onboarding single page
Scenario: first-open value page—copy + illustration.
Mobile onboarding screen UI mock using Image 2.
Vertical 9:16, light mode, generous bottom padding for a primary button.
Top illustration: soft 3D calendar and checkmarks, brand color #4F46E5 accents.
Title exactly: "Your day, in one timeline"
Body exactly: "Drag tasks into focus blocks. FlowDay keeps priorities visible."
Primary button label exactly: "Continue"
Keep layout airy, 8pt rhythm feel, Image 2 commercial UI quality.
Do not invent extra menus. Do not misspell.
Result: onboarding copy and art as one unit—fast for A/B lines.
Slot 3: Feature benefit cards (three points)
Scenario: site feature row or paywall header with three equal cards.
App feature benefit cards board with Image 2 (UI marketing).
1:1 or 4:5, white background, three equal cards in a row with soft shadow.
Card icons in #4F46E5. Exact English labels:
Card1 title: "Focus Blocks" / line: "Timeboxed deep work"
Card2 title: "Smart Reminders" / line: "Nudge only what matters"
Card3 title: "Weekly Review" / line: "See progress at a glance"
Modern SaaS marketing UI, crisp type, Image2 text accuracy.
No fake App Store badges. No overcrowded icons.
Result: structured feature cards—the frame that most needs text accuracy.
Slot 4: Empty-state screen
Scenario: no tasks/notifications—friendly guidance, not “it’s broken.”
Empty-state mobile screen with Image 2 for product UI.
Vertical 9:16, light gray background, large friendly illustration center:
soft 3D empty inbox with a single indigo plus badge.
Title exactly: "Nothing here yet"
Body exactly: "Create your first focus block to start the day."
Secondary text button exactly: "Create task"
Clean, calm, accessible contrast, Image 2 UI illustration quality.
Do not make it look like an error. No scary red alerts.
Result: empty state becomes actionable instead of blank.
Slot 5: Settings / profile mock
Scenario: show IA to stakeholders—non-interactive is fine.
Settings / profile screen mock with Image 2 (non-interactive UI visual).
Vertical 9:16, light mode list UI, rounded group cells.
Header: avatar circle + name "Alex Chen" + plan chip "Pro".
List rows with exact labels: "Notifications" / "Calendars" / "Appearance" / "Export Data".
Accent switches and chevrons in #4F46E5, generous spacing, SF-like but generic typography.
Image2 clean UI mock quality. Do not copy real iOS glyphs trademarked details.
No tiny unreadable text.
Result: settings mock good enough for meetings without pretending it’s tappable.
Slot 6: Store screenshot frame (with device)
Scenario: listing asset—phone chrome + key UI + top caption.
App Store screenshot composition with Image 2.
Vertical 9:16 marketing frame: large caption on top, phone device mock below.
Caption exactly: "Focus blocks that actually stick"
Inside the phone: a clean task timeline UI using brand #4F46E5, legible list titles.
Soft studio shadow under device, light gray backdrop, premium DTC style.
Image 2 commercial ASO visual. Exact text, no gibberish.
Do not invent fake star ratings. Do not overcrowded stickers.
Result: ASO direction frame; swap real screenshots later in Figma.
4. Universal fill-in template
Change only the job line and on-image copy per slot:
Image 2 App / UI visual slot.
Brand lock: primary #[HEX], [light|dark] mode, [flat|soft-3D] illustration style.
Frame job (ONE only): [splash / onboarding / feature cards / empty state / settings mock / store screenshot].
Aspect: [9:16 | 1:1 | 4:5].
On-image copy exactly: "[titles/buttons]" — verbatim, no extra claims.
Do not: [fake OS trademarks / unreadable microcopy / cluttered chrome].
Output: review-ready UI visual, Image2 quality.
5. Outsourced illustration vs Image 2 UI slots vs icon collage
| Dimension | Full outsourced illustration | Image 2 UI slot line | Icon / screenshot collage |
|---|---|---|---|
| Copy revision speed | Slow (redraw) | Fast (multi-turn one line) | Fast but cheap-looking |
| Design-system consistency | Depends on brief | HEX / style fields lock it | Easy drift |
| Best stage | Brand major versions | Weekly iteration, reviews, ASO drafts | Internal drafts only |
| Main risk | Schedule | Must human-proof type & grid | Conversion / polish gap |
6. Who should use this method?
✅ PMs / project leads
Fill splash, empty states, and store direction with Image 2 before reviews—fewer “leave blank” slides.
✅ UI / UX designers
Treat image-2 as the visual exploration layer: lock color and type, generate, then align real components in Figma.
✅ Indie builders / small teams
No dedicated illustrator? One prompt family still yields a coherent app splash and feature cards.
✅ Growth & ASO ops
Store captions change often—multi-turn edits beat remaking the whole device frame.
7. Three common failure modes
-
❌ One image that fakes a full tappable app — Image 2 turns into cluttered UI soup. Split by slot; keep interaction prototypes in Figma/code.
-
❌ Vague copy like “some feature text” — type drift kills UI design delivery. Titles and buttons must be
exactly: "...". -
❌ Forged OS trademark details without contrast checks — generic status bars are enough; proof light-on-light accessibility before export.
8. Closing
Image 2 for App / UI visuals is not “roll a flashier single”—it’s brand lock → UI slots → verbatim copy → multi-turn polish → Figma finish.
Next time you’re missing a splash, feature card, or empty state, don’t collage stock. Open the Image2 workbench and run these six slots—you’ll get a unified, readable AI interface set ready for review, iteration, and store-frame starts.
Splash holds the brand, cards state the value, empty state shows the next step—that’s the image-2 product-design loop.
Practical notes; prompts are free to copy and adapt. Confirm copy, trademarks, and store screenshot rules before shipping.
