Beim Shippen einer App oder SaaS stocken Design-Kalender bei drei Assets: Splash / Launch, Feature-Benefit-Cards und Empty-State-Illustrationen. Komponenten existieren in Figma, aber Store-Screenshots und Onboarding fehlen noch an Visuals; Outsourcing dauert eine Woche pro Runde, während Copy ständig wechselt.
Image 2 passt besser: Behandle den Bedarf als UI-Visual-Slot-Produktionslinie — Brand-Farbe und Typ-Hierarchie fixieren, dann Splash → Onboarding → Feature Cards → Empty State → Settings-Mock → Store-Frame liefern. Dieser Post teilt 6 getestete image-2-Prompts für review-fertige App / UI Screens.
Nutze es als Produkt-Design-Playbook: ein Job pro Frame, Copy wörtlich, Button- und Titel-Rechtschreibung vor Export prüfen.
📌 Prompts unten sind auf Englisch (Image 2 verarbeitet strukturiertes Englisch und In-Image-Text zuverlässig). UI-Copy, Marken und barrierefreien Kontrast manuell prüfen; finaler Feinschliff sollte in Figma auf 8pt-Grid mit echten Komponenten landen.
1. Warum Image 2 zu „App / UI screen“-Arbeit passt
Gegenüber der Hoffnung, ein generisches Illustrationsmodell habe Glück, gewinnt Image 2, weil:
-
In-Image-Text bleibt lesbar — Splash-Titel, dreizeilige Feature Cards, Empty-State-CTAs — Benchmark-~99% Text-Rendering schlägt „generieren und Typo in PS einfügen“ für KI-Interface-Grafik-Lieferung.
-
Multi-Turn-Edits tauschen Copy ohne Layout-Zerstörung — PM ändert eine Onboarding-Zeile; per Chat ersetzen, Illustration und Button-Form behalten — hier glänzen Image2-Konversations-Edits.
-
Stil-Constraints werden Design-System-Felder — Brand-HEX, Eckenradius, Schattenstärke, Illustrationsstil (flat / soft 3D) in jedem Prompt macht die Serie wie ein Design System.
Für Produkt- und Design-Partner: UI-Visual-Assets können aus einer Informationsarchitektur generiert werden, nicht aus Warten auf einen Illustrations-Kalender.
2. Standard-Workflow (fünf Schritte)
-
UI-Visual-Slots auflisten — mindestens sechs: ① Splash/Launch ② Onboarding-Seite ③ Feature-Benefit-Cards (3 Punkte) ④ Empty State ⑤ Settings/Profil-Mock ⑥ App Store / Store-Screenshot-Frame. Nie eine voll interaktive App in ein Bild quetschen.
-
Brand- und Typ-Constraints schreiben — Primär-/Sekundärfarben, heller/dunkler Grund, Titel-Längenlimits; keine gefälschten markenrechtlich geschützten OS-Chrome (generische Statusleisten sind ok).
-
Ein Job pro Frame + wörtliches Copy — jeder beantwortet eine Nutzerfrage: erster Öffnungs-Eindruck? warum bleiben? was wenn keine Daten? wie sieht es im Store aus?
-
Seitenverhältnisse vereinheitlichen — Splash/Store oft 9:16; Feature Cards 1:1 oder 4:5; eine Ratio-Familie im Set halten.
-
Drei Checks vor Figma — Rechtschreibung, Kontrast, Eckenradius vs. DS — Drift mit Image 2 Multi-Turn-Edits statt Full Re-Rolls fixen.
3. Sechs getestete UI-Prompts (Copy-Paste)
Beispielprodukt: eine fiktive Produktivitäts-App „FlowDay“. Name und Benefits durch deine ersetzen. Brand-Akzent in jedem Prompt (Beispiel: #4F46E5 Indigo).
Slot 1: Splash / Launch Screen
Szenario: Cold-Start-Brand-Eindruck — zentriertes Mark + kurzer 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.
Ergebnis: ein review-fertiges App-Splash-Visual.
Slot 2: Onboarding-Einzel-Seite
Szenario: Value-Seite beim ersten Öffnen — 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.
Ergebnis: Onboarding-Copy und Art als Einheit — schnell für A/B-Zeilen.
Slot 3: Feature-Benefit-Cards (drei Punkte)
Szenario: Site-Feature-Reihe oder Paywall-Header mit drei gleichen 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.
Ergebnis: strukturierte Feature Cards — der Frame, der Textgenauigkeit am meisten braucht.
Slot 4: Empty-State-Screen
Szenario: keine Tasks/Benachrichtigungen — freundliche Anleitung, nicht „es ist kaputt“.
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.
Ergebnis: Empty State wird handlungsfähig statt leer.
Slot 5: Settings / Profil-Mock
Szenario: IA Stakeholdern zeigen — nicht interaktiv ist ok.
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.
Ergebnis: Settings-Mock gut genug für Meetings, ohne tappbar zu tun.
Slot 6: Store-Screenshot-Frame (mit Gerät)
Szenario: 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.
Ergebnis: ASO-Richtungs-Frame; echte Screenshots später in Figma tauschen.
4. Universelle Ausfüll-Vorlage
Nur Job-Zeile und In-Image-Copy pro Slot ändern:
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. Outsource-Illustration vs Image 2 UI-Slots vs Icon-Collage
| Dimension | Vollständige Outsource-Illustration | Image 2 UI-Slot-Linie | Icon / Screenshot-Collage |
|---|---|---|---|
| Copy-Revisionsgeschwindigkeit | Langsam (neu zeichnen) | Schnell (Multi-Turn eine Zeile) | Schnell aber billig wirkend |
| Design-System-Konsistenz | Hängt vom Brief ab | HEX / Stil-Felder fixieren es | Leichte Drift |
| Beste Phase | Brand-Major-Versionen | Wöchentliche Iteration, Reviews, ASO-Entwürfe | Nur interne Entwürfe |
| Hauptrisiko | Zeitplan | Typo & Grid manuell prüfen | Conversion / Polish-Lücke |
6. Wer sollte diese Methode nutzen?
✅ PMs / Projektleiter
Splash, Empty States und Store-Richtung mit Image 2 vor Reviews füllen — weniger „leer lassen“-Slides.
✅ UI / UX Designer
image-2 als visuelle Explorations-Schicht: Farbe und Typ fixieren, generieren, dann echte Komponenten in Figma ausrichten.
✅ Indie Builder / kleine Teams
Kein dedizierter Illustrator? Eine Prompt-Familie liefert trotzdem kohärenten App-Splash und Feature Cards.
✅ Growth & ASO Ops
Store-Captions wechseln oft — Multi-Turn-Edits schlagen komplettes Neubauen des Device-Frames.
7. Drei häufige Failure Modes
-
❌ Ein Bild, das eine voll tappbare App vortäuscht — Image 2 wird zu unübersichtlicher UI-Suppe. Nach Slot splitten; Interaktions-Prototypen in Figma/Code lassen.
-
❌ Vages Copy wie „irgendein Feature-Text“ — Typo-Drift killt UI-Design-Lieferung. Titel und Buttons müssen
exactly: "..."sein. -
❌ Gefälschte OS-Marken-Details ohne Kontrast-Checks — generische Statusleisten reichen; hell-auf-hell Barrierefreiheit vor Export prüfen.
8. Abschluss
Image 2 für App / UI-Visuals ist nicht „eine flashigere Single rollen“ — es ist Brand Lock → UI Slots → wörtliches Copy → Multi-Turn Polish → Figma Finish.
Wenn dir das nächste Mal Splash, Feature Card oder Empty State fehlt, kein Stock-Collage. Image2-Workbench öffnen und diese sechs Slots laufen — du bekommst ein einheitliches, lesbares AI Interface-Set für Review, Iteration und Store-Frame-Starts.
Splash hält die Marke, Cards nennen den Wert, Empty State zeigt den nächsten Schritt — das ist der image-2 Produkt-Design-Loop.
Praxisnotizen; Prompts frei kopierbar und anpassbar. Copy, Marken und Store-Screenshot-Regeln vor dem Shippen bestätigen.
