Prompt für Listen- und Detailscreens einer App in Codex

Gestalte einen Listenscreen mit Suche und Filter-Chips und den Detailscreen, der sich daraus öffnet, als zwei Dateien mit realistischen Titeln und Zahlen.

Gestalte den Listenscreen [Bibliothek] und den Detailscreen [Buch] als zwei Dateien. Die Liste zeigt [12 Bücher] mit Cover, Titel, Autor und Fortschritt, dazu ein Suchfeld und Filter-Chips für [Lese ich, Gelesen, Will ich lesen]. Der Detailscreen öffnet sich aus einem Listeneintrag und zeigt [Leseverlauf und Notizen]. Verwende realistische Titel und Zahlen.

Funktioniert mit

Codex, ChatGPT

Aus der Sammlung

Mobile Apps

Über diesen Prompt

Codex gestaltet zwei verknüpfte Screens in getrennten Dateien: eine Liste mit 12 Einträgen, jeder mit Cover, Titel, Autor und Fortschritt, darüber ein Suchfeld und Filter-Chips, und den Detailscreen, der sich beim Antippen eines Eintrags öffnet. Weil beide zusammen entstehen, sieht ein Eintrag in seiner Zeile und in der Vollansicht gleich aus.

Ändere die Klammern auf das Listen- und Detail-Paar deiner App: Produkte und eine Produktseite, Aufgaben und eine Aufgabenansicht, Rezepte und ein Rezept. Setze die Anzahl der Einträge so, wie ein echter Nutzer sie hätte, und nenne deine tatsächlichen Filterzustände. Der Schlusssatz zu realistischen Titeln und Zahlen ist wichtiger, als er aussieht; ein sehr langer Titel neben einem Buch bei 3 % und einem anderen bei 100 % zeigt, ob das Zeilenlayout standhält.

Prüf danach, ob der Übergang von der Liste zum Detail sich durchgehend anfühlen würde: dasselbe Cover, derselbe Titelstil und dieselbe Darstellung des Fortschritts in beiden Dateien. Der Screen [Bibliothek] aus diesem Schritt ist außerdem die Grundlage für den Prompt zu leeren, ladenden und fehlerhaften Zuständen, also bring zuerst seinen Normalzustand in Ordnung.

Weitere Prompts aus dieser Sammlung

• 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.
• Prompt für App-Briefing und Screen-Liste in CodexBeschreibe Nutzer, Kernablauf und Plattform deiner App und lass Codex alle Screens der ersten Version gruppiert auflisten, mit dem Zweck jedes Screens.