Mobile Apps mit mehreren Bildschirmen bei 390×844 gestalten: Prompts, Abläufe und Reviews
Wenn du einen KI-Agenten ohne Regeln für Viewport und Ablauf um eine mobile App bittest, erhältst du meist eine Desktop-Website in einer schmalen Spalte: winzige Labels, eine kopflastige Navigation und vier verschachtelte Karten, die um Platz konkurrieren. Echte mobile UI beginnt bei 390×844, widmet jeden Bildschirm einer primären Aufgabe und prüft drei bis fünf verbundene Bildschirme nebeneinander.
Die wichtigsten Punkte
- Richte Entwürfe an 390×844 aus – oder an gerätespezifischen Viewports wie 198×242 für Uhren – und platziere primäre Aktionen in natürlicher Daumenreichweite.
- Liefere sowohl eine interaktive index.html als auch eine screens.html mit allen Bildschirmen nebeneinander, damit du den Zusammenhang von Liste über Details bis zum Abschluss auf einen Blick beurteilen kannst.
- Konzentriere jede Arbeit auf eine direkt erlebbare Zustandsänderung, etwa das Bewegen entlang einer Gezeitenkurve, die Bestätigung eines Abholpunkts oder das Aufdrehen einer Spielzeugkapsel.
- Entferne verschachtelte Karten, die bei 390 px Bildschirmbreite zu viel horizontalen Innenabstand verbrauchen.
npx skills add oil-oil/oil-uiMehr als 30 mobile App-Demos mit mehreren Bildschirmen und Prompts findest du unter /de/inspiration/mobile-app-design/.
Warum eine mobile App keine schmale Webseite ist
Auf einem Desktop-Monitor mit 1440 px können Nutzer Seitenleiste, Kopfleiste und ein mehrspaltiges Raster gleichzeitig erfassen. Auf einem Smartphone mit 390×844 gehört die Aufmerksamkeit dem Schritt direkt unter dem Daumen. Suchfeld, Werbebanner, vier Kategorie-Badges und ein zweispaltiges Kartenraster auf einem einzigen Smartphone-Bildschirm lassen jedes Bedienelement beengt wirken.
Die mobilen Arbeiten in der Oil-UI-Galerie zeigen, wie fokussierte Bildschirme aussehen: Tide dreht sich um das Ziehen einer Zeitleiste, bei dem Dünungshöhe, Wind und Gezeitenkurve synchron reagieren; Pickup (ride) verbindet eine Live-Karte mit einem Bottom Sheet für die Bestätigung des Abholpunkts, die Ankunft des Fahrers und Zieländerungen während der Fahrt; Pact (bank) und Luma (sleep) geben Typografie und Raum zum Atmen Vorrang vor dekorativen Widgets.
| Arbeit und Modell | Viewport | Bildschirm 1 (Einstieg) | Bildschirm 2 (Zentrale Interaktion) | Bildschirm 3 (Ergebnis / Zustand) |
|---|---|---|---|---|
| Tide Surf-Prognose (GPT 6.1 Sol) | 390×844 Smartphone | Gespeicherte Surfspots mit Hinweis auf das beste Zeitfenster | 7-Tage-Kurven für Dünung, Wind und Gezeiten an einem Spot | Bewegen auf der Zeitleiste zur Untersuchung einer bestimmten Stunde |
| Pickup Ride-Hailing (Claude Sonnet 5.5) | 390×844 Smartphone | Bestätigung des Abholpunkts und Fahrpreisschätzung | Live-Ankunft des Fahrers mit Fahrzeug- und Kennzeichenprüfung | Zieländerung während der Fahrt und neue Fahrpreisberechnung |
| Luma Meditation und Schlaf (GPT 6.1 Sol) | 390×844 Smartphone | Ruhige Abendansicht nach Schlafzielen geordnet | Aktive Atemanleitung und Audiowiedergabe | Morgendliche Zusammenfassung von Schlafrhythmus und -dauer |
| Splitwater Schwimmuhr (GPT 6.1 Sol) | 198×242 Uhr | Aktives Schwimmen (reines Schwarz, eine große Bahnenzahl) | Countdown-Ring für die Pause am Beckenrand mit haptischem Signal | Wassersperre durch Drehen der Krone und Zusammenfassung nach dem Schwimmen (5 Bildschirme) |
Vollständige Abläufe mit screens.html nebeneinander prüfen
Wer eine mobile App nur anhand des Startbildschirms beurteilt, übersieht fehlerhafte Übergänge und uneinheitliche Kopfleistenhöhen. Im Oil-UI-Arbeitsablauf erzeugen Agenten zwei Ansichten für mobile Arbeiten:
Eine interaktive index.html bei 390×844
Hier kannst du Navigationstabs antippen, Bottom Sheets öffnen, Slider ziehen und Zustandsübergänge direkt im Browser testen.
Eine screens.html mit 3 bis 5 wichtigen Bildschirmen nebeneinander
Einstiegsbildschirm, aktive Interaktion und Abschlusszustand stehen auf einer Fläche nebeneinander, damit du typografische Skalierung, Safe-Area-Abstände und Farbkontinuität über den gesamten Ablauf prüfen kannst.
Hochauflösende Screenshot-Prüfung pro Bildschirm
Jeder Bildschirm wird bei 390×844 mit DPR=2 aufgenommen, um Touch-Ziele (mindestens 44 px), Abstand zur Home-Anzeige unten und Zeilenumbrüche der Labels zu prüfen.
Prompt-Vorlage für mobile Apps mit mehreren Bildschirmen
Verwende diese Prompt-Struktur in Claude Code, Codex oder Cursor, um eine kohärente mobile Oberfläche mit mehreren Bildschirmen zu erzeugen:
Verwende Oil UI, um eine [App-Kategorie, z. B. Reiseplaner für Gruppen / App für persönliches Budget] bei einem mobilen Viewport von 390×844 zu gestalten und zu implementieren.
- Zentrale Aufgabe und Bediengefühl: [Beschreibe die prägende Interaktion, z. B. Stopps per Drag-and-drop neu im Tagesplan anordnen und die Fahrzeiten live aktualisieren / eine Ausgabe mit zwei Tipps erfassen und den Wochenbudgetbalken anpassen sehen].
- Drei erforderliche Bildschirme:
1. Bildschirm 1: [Hauptansicht, z. B. Reiseübersicht nach Tagen];
2. Bildschirm 2: [Aktiver Interaktionszustand, z. B. einen Stopp ziehen oder das Sheet zum Aufteilen von Ausgaben öffnen];
3. Bildschirm 3: [Abgeschlossener Zustand oder sekundäre Detailansicht].
- Ergebnisse: Erstelle sowohl eine interaktive index.html als auch eine screens.html mit allen drei Bildschirmen nebeneinander. Gestalte für Daumenreichweite und eine bildschirmfüllende mobile Hierarchie statt mit verschachtelten Desktop-Karten.Auch wenn deine produktive App React Native, Flutter oder SwiftUI verwendet, legt ein früher HTML-Prototyp mit drei Bildschirmen Abstände und Hierarchie in wenigen Minuten fest.
Funktionierende Beispiele und Prompts aus der Galerie
Öffne die Live-Demos bei 1440 px oder 390 px und untersuche, wie Modell und Prompt die fertige Oberfläche geprägt haben.
Tide
Surf- und Gezeitenprognose-App
Eine Surf- und Gezeitenprognose-App für Surfer (390×844): eine Liste gespeicherter Surfspots und für jeden Spot die Wellenhöhe, Periode, Windrichtung und -geschwindigkeit für heute und die nächsten sieben Tage, eine Gezeitenkurve sowie ein Vorschlag für die beste Zeit. Gezeiten und Bedingungen ändern sich mit der Zeit; deshalb steht die Datenvisualisierung im Mittelpunkt: Beim Ziehen der Zeitachse aktualisieren sich Wellen, Wind und Tide gemeinsam. Entwirf die Spotliste, die Detailansicht eines Spots und das Ziehen der Zeitachse zu einem bestimmten Zeitpunkt. Liefere `index.html` und ein `screens.html` mit drei nebeneinander angeordneten Bildschirmen.
Arbeit und Prompt ansehen →
Pickup
Fahrtvermittlungs-App
Der Bildschirm nach dem Buchen einer Fahrt in einer Fahrtvermittlungs-App (390×844): ein herannahendes Auto auf einer Karte, Fahrer- und Fahrzeugdetails, voraussichtliche Ankunft und Fahrtfortschritt nach dem Abholen. Zeichne Straßennetz und Route in Code, statt echte Karten-Screenshots zu verwenden. Das Warten auf das Auto ist der Moment mit der größten Anspannung, deshalb muss seine Entfernung sofort erkennbar sein. Erstelle drei Zustände: Warten, Auto eingetroffen und laufende Fahrt. Liefere `index.html` und `screens.html` mit den drei Bildschirmen nebeneinander.
Arbeit und Prompt ansehen →
Luma
Meditation und Schlaf
Eine App, die Erwachsenen mit Schlafproblemen beim Entspannen und Einschlafen hilft (390×844), mit englischsprachiger Oberfläche: eine Abendroutine, angeleitete Atmung und Meditation, ein Mix aus Schlafgeräuschen und ein Morgenbericht über die vergangene Nacht. Die Atemführung ist der Kern: Das Bild dehnt sich im Atemrhythmus aus und zieht sich zusammen, etwa 4 Sekunden einatmen, 7 halten und 8 ausatmen. Nachts sollte die Darstellung angenehm für die Augen sein. Der Morgenbericht soll die Nacht auf einen Blick verständlich machen, ohne Kennzahlen anzuhäufen. Vermeide das Klischee eines violetten Sternenhimmel-Gradients mit Mondillustration. Entwirf drei Bildschirme: Heute Abend mit Abendroutine, empfohlenen Übungen und Geräuschmix; eine laufende Atemübung; und einen Morgenbericht mit Einschlafdauer, Wachphasen, Schlafstadien über die Nacht und einem Vergleich mit dieser Woche. Liefere `index.html` und `screens.html` mit den drei Bildschirmen nebeneinander.
Arbeit und Prompt ansehen →
Pact
Digitales Banking
Eine digitale Banking-App für Freiberufler und junge Berufstätige (390×844) mit englischsprachiger Oberfläche: Kontostand, letzte Transaktionen, Ausgaben dieses Monats, Sparziele, Kartenverwaltung und Überweisungen. Bankname, Kartendesigns und Händlerlogos sind sämtlich fiktiv. Überweisungen und Kartensteuerung stehen im Mittelpunkt: Empfänger auswählen, einen Betrag über einen Ziffernblock eingeben und die Überweisung bestätigen – all das soll beruhigend und effizient wirken. Das Einfrieren einer Karte mit einem Tippen soll einen klaren Zustandswechsel erzeugen. Entwirf drei Bildschirme: Start mit Kontostand, letzten Transaktionen und Monatsausgaben; Karten mit Kartenansicht, Einfrieren, Limits und kontaktloser Zahlung; sowie den Überweisungsablauf von der Betragseingabe bis zum erfolgreichen Senden. Liefere `index.html` und `screens.html` mit den drei Bildschirmen nebeneinander.
Arbeit und Prompt ansehen →Mobile Sheets, Fehlerkorrektur und haptische Minispiele mit Oil UI Pro ausarbeiten
Oil UI Pro behandelt mobile Navigationsmuster, Bottom Sheets und die Korrektur von Formularfehlern im Feld sowie spezielle Layout- und Zustandschecklisten für haptische Apps und Minispiele wie Klak (Spielzeugkapseln), Ding! Mint Arcade (Coin Pusher) und Gotcha! (Greifautomat).
npx github:oil-oil/oil-cli install oil-ui-proHäufige Fragen
Warum zeigen die mobilen App-Beispiele in der Galerie drei oder fünf Bildschirme nebeneinander?
Ein einzelner statischer Startbildschirm verrät selten, ob eine App tatsächlich funktioniert. Die Darstellung aller wichtigen Bildschirme über screens.html zeigt den Weg vom Anfang bis zum Ende; in der Live-Demo kannst du mit jedem Bildschirm interagieren.
Kann ich Oil UI für Projekte mit React Native, Flutter oder SwiftUI verwenden?
Ja. Viele Teams lassen den Agenten zunächst eine schnelle HTML-Vergleichsseite mit drei Bildschirmen bei 390×844 erstellen, um Layout, Typografie und Farbe im Browser festzulegen. Anschließend übertragen sie die bestätigte Richtung in SwiftUI-, Flutter- oder React-Native-Komponenten.
Wie behandelt Oil UI andere Bildschirme wie Smartwatches, Fernseher oder Fahrzeugdisplays?
Indem zuerst der physische Betrachtungsabstand und die Eingabehardware berücksichtigt werden. Bei Yeying (TV-App bei 1920×1080) sind Fokuszustände der Fernbedienung aus drei Metern eindeutig erkennbar; bei Yantu (Fahrzeugdisplay bei 1920×720) vergrößert sich die Abbiegeanweisung während der Fahrt dynamisch; bei Splitwater (Uhr bei 198×242) ist das Entsperren über die Krone bei nassem Bildschirm Teil des Zustandsmodells.
Was ist der häufigste KI-Layoutfehler auf Mobilgeräten?
Karten mit Innenabstand werden auf einem 390-px-Bildschirm in weitere Container mit Innenabstand verschachtelt, sodass kaum 260 px für den eigentlichen Inhalt bleiben. Volle Breite und feine Trennlinien statt äußerer Kartenrahmen schaffen sofort mehr Raum.