När en app eller SaaS ska shipas fastnar designkalendern på tre assets: splash / launch, feature benefit cards och empty-state illustrations. Komponenter finns i Figma, men store-screenshots och onboarding saknar fortfarande visuals; outsourcing tar en vecka per runda medan copy hela tiden ändras.
Image 2 passar en bättre väg: behandla behovet som en UI visual slot-produktionslinje — lås varumärkesfärg och typografihierarki, ship sedan splash → onboarding → feature cards → empty state → settings mock → store frame. Det här inlägget delar 6 testade image-2-prompts för review-ready App / UI screens.
Använd det som product-design playbook: ett jobb per frame, copy ordagrant, kontrollera knapp- och titelstavning före export.
📌 Prompts nedan är på engelska (Image 2 hanterar strukturerad engelska och text i bild pålitligt). Kontrollera UI-copy, varumärken och tillgänglig kontrast manuellt; slutpolish ska fortfarande landa i Figma på 8pt-grid med riktiga komponenter.
1. Varför Image 2 passar “App / UI screen”-arbete
Jämfört med att hoppas att en generisk illustrationsmodell har tur vinner Image 2 eftersom:
-
Text i bild förblir läsbar — splash-titlar, tre-raders feature cards, empty-state CTA:er — benchmark-nivå ~99% text rendering slår “generera och klistra in typ i PS” för leverans av AI interface art.
-
Multi-turn edits byter copy utan att förstöra layout — PM ändrar en onboardingrad; chat-ersätt den raden medan illustration och knappform behålls — Image2 conversational edits briljerar här.
-
Stilbegränsningar blir design-systemfält — brand HEX, corner radius, skuggstyrka, illustrationsstil (flat / soft 3D) i varje prompt gör att serien känns som ett Design System.
För product- och designpartners: UI visual assets kan genereras från information architecture, inte från att vänta på en illustrationskalender.
2. Standard workflow (fem steg)
-
Lista UI visual slots — minst sex: ① splash/launch ② onboarding page ③ feature benefit cards (3 punkter) ④ empty state ⑤ settings/profile mock ⑥ App Store / store screenshot frame. Proppa aldrig en full interaktiv app i en bild.
-
Skriv brand- och typbegränsningar — primary/secondary colors, light/dark ground, titellängdsgränser; undvik förfalskad varumärkes-OS-chrome (generic status bars är fine).
-
Ett jobb per frame + ordagrant copy — varje svarar på en användarfråga: första öppningens intryck? varför stanna? vad om det inte finns data? hur ser det ut i store?
-
Enhetliga aspect ratios — splash/store ofta 9:16; feature cards 1:1 eller 4:5; håll en ratio-familj inom en set.
-
Tre kontroller före Figma — stavning, kontrast, corner radius vs DS — fixa drift med Image 2 multi-turn edits istället för full re-roll.
3. Sex testade UI-prompts (copy-paste)
Exempelprodukt: en fiktiv productivity-app “FlowDay.” Byt namn och benefits mot dina. Håll ett brand accent i varje prompt (exempel: #4F46E5 indigo).
Slot 1: Splash / launch screen
Scenario: cold-start varumärkesintryck — centrerad mark + kort 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.
Resultat: en review-ready app splash visual.
Slot 2: Onboarding single page
Scenario: value page vid första öppning — 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.
Resultat: onboarding copy och art som en enhet — snabbt för A/B-rader.
Slot 3: Feature benefit cards (three points)
Scenario: site feature row eller paywall header med tre lika 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.
Resultat: strukturerade feature cards — den frame som mest behöver textnoggrannhet.
Slot 4: Empty-state screen
Scenario: inga tasks/notifikationer — vänlig guidance, inte “det är trasigt”.
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.
Resultat: empty state blir actionable istället för tom.
Slot 5: Settings / profile mock
Scenario: visa IA för stakeholders — non-interactive är 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.
Resultat: settings mock tillräckligt bra för möten utan att låtsas att den är 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.
Resultat: ASO direction frame; byt till riktiga screenshots senare i Figma.
4. Universell fill-in template
Ändra bara job line och 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. Outsourcad illustration vs Image 2 UI slots vs icon collage
| Dimension | Fullt outsourcad illustration | Image 2 UI slot line | Icon / screenshot collage |
|---|---|---|---|
| Copy-revideringshastighet | Långsam (omritning) | Snabb (multi-turn en rad) | Snabb men billigt utseende |
| Design-systemkonsistens | Beror på brief | HEX / style fields låser det | Lätt drift |
| Bästa steg | Brand major versions | Veckovis iteration, reviews, ASO drafts | Endast interna drafts |
| Huvudrisk | Schema | Mänsklig proof av type & grid krävs | Conversion / polish gap |
6. Vem ska använda den här metoden?
✅ PMs / project leads
Fyll splash, empty states och store direction med Image 2 före reviews — färre “lämna tomt”-slides.
✅ UI / UX designers
Behandla image-2 som visual exploration layer: lås color och type, generera, align sedan riktiga komponenter i Figma.
✅ Indie builders / small teams
Ingen dedicated illustrator? En prompt family ger ändå coherent app splash och feature cards.
✅ Growth & ASO ops
Store captions ändras ofta — multi-turn edits slår att göra om hela device frame.
7. Tre vanliga failure modes
-
❌ En bild som låtsas vara en full tappable app — Image 2 blir cluttered UI soup. Dela upp per slot; håll interaktionsprototyper i Figma/code.
-
❌ Vag copy som “some feature text” — type drift dödar UI design-leverans. Titlar och knappar måste vara
exactly: "...". -
❌ Förfalskade OS-varumärkesdetaljer utan contrast checks — generic status bars räcker; proof light-on-light accessibility före export.
8. Avslutning
Image 2 för App / UI visuals är inte “roll a flashier single” — det är brand lock → UI slots → verbatim copy → multi-turn polish → Figma finish.
Nästa gång splash, feature card eller empty state saknas, gör ingen stock collage. Öppna Image2 workbench och kör dessa sex slots — du får en unified, readable AI interface set redo för review, iteration och store-frame starts.
Splash håller varumärket, cards formulerar värdet, empty state visar nästa steg — det är image-2 product-design loop.
Praktiska anteckningar; prompts är fria att kopiera och anpassa. Bekräfta copy, varumärken och store screenshot-regler före shipping.
