Prompt für den Startscreen einer mobilen App in Codex

Gestalte einen Startscreen für wiederkehrende Nutzer um das eine Element, das du als wichtigstes nennst, mit Tab-Leiste und echten Zahlen.

Gestalte den Startscreen für einen wiederkehrenden Nutzer an Tag [12] seiner Serie. Das wichtigste Element ist [der heutige Fortschritt zum Tagesziel]; es soll das Erste sein, was man sieht. Darunter: [das Buch, das gerade gelesen wird, mit Seitenfortschritt], ein primärer Button zum [Starten einer Lesesession] und [die Statistik dieser Woche]. Füge unten eine Tab-Leiste mit [Heute, Bibliothek, Statistik, Profil] hinzu.

Funktioniert mit

Codex, ChatGPT

Aus der Sammlung

Mobile Apps

Über diesen Prompt

Codex gestaltet den Startscreen, den ein wiederkehrender Nutzer sieht, im Beispiel an Tag 12 einer Lese-Serie. Der Prompt nennt ein einziges Element, den heutigen Fortschritt zum Tagesziel, und verlangt, dass es das Erste ist, was man bemerkt; darunter ordnet er den Rest der Reihe nach an: das aktuelle Buch, die Hauptaktion und die Statistik dieser Woche, mit einer Tab-Leiste mit vier Tabs unten.

Ersetze jede Klammer durch das Pendant deiner App: die Tageszahl oder den Zustand, der den Nutzer zum wiederkehrenden macht, das wichtigste Element, den Inhalt darunter, die primäre Aktion und die Tab-Namen. Behalte die Vorgabe, ein einziges wichtigstes Element zu benennen. Ohne sie werden Startscreens schnell zu einem Raster aus gleich gewichteten Karten.

Setz den primären Button in Daumenreichweite in die untere Hälfte des Screens und prüf, dass ihm die Tab-Leiste nicht zu nahe kommt. Dieser Screen legt das Muster für die Listen-, Einstellungs- und Zustandsscreens fest, die folgen, deshalb lohnen sich ein, zwei Verfeinerungsrunden, bevor du weitergehst.

Weitere Prompts aus dieser Sammlung

• Prompt für Listen- und Detailscreens einer App in CodexGestalte einen Listenscreen mit Suche und Filter-Chips und den Detailscreen, der sich daraus öffnet, als zwei Dateien mit realistischen Titeln und Zahlen.
• Prompt für den Einstellungsscreen einer App in CodexGestalte einen Einstellungsscreen mit gruppierten Listen, aktuellen Werten in jeder Zeile, Schaltern, wo sie hingehören, und destruktiven Aktionen in Rot.
• Prompt für Leere, Lade- und Fehlerzustände einer App in CodexGestalte den leeren, den ladenden und den Fehlerzustand eines App-Screens als getrennte Dateien, mit derselben Navigation und demselben Kopfbereich wie normal.
• Prompt für den Dark Mode einer App in CodexErstelle Dark-Mode-Versionen von App-Screens mit getöntem Hintergrund, gedämpften Akzenten, Textkontrast nach WCAG AA und einer Liste der geänderten Farben.
• Prompt für die Android-Anpassung mit Material 3 in CodexPasse einen iOS-Screen mit Material 3 an Android an: Top App Bar, Navigationsleiste und FAB, bei gleichen Markenfarben und Schriften.
• Prompt für App-Mockups zu SwiftUI-Code in CodexLass Codex die abgenommenen HTML-Screens in deiner SwiftUI-App umsetzen, mit passendem Layout und Abständen, deinen Theme-Farben und Dynamic Type.