Prompts für das UI-Design mobiler Apps.

Wir gestalten [Pagely, eine App für die tägliche Lesegewohnheit]. Die Nutzer sind [Erwachsene, die täglich 10–30 Minuten lesen wollen, es aber immer wieder vergessen]. Der Kernablauf: [ein Tagesziel festlegen, mit Timer lesen, eine Serie halten]. Plattform: [zuerst iOS].

Liste jeden Screen auf, den die erste Version braucht, gruppiert nach Onboarding, Kernablauf und Einstellungen. Nenne für jeden Screen seinen Zweck in einem Satz und die drei wichtigsten Dinge darauf.

Gestalte den Onboarding-Flow als drei Screens: Willkommen, Tagesziel wählen und der erste Startscreen. Jeder Screen ist eine eigenständige HTML-Datei in 390×844 mit Inline-CSS und Systemschriften. Verwende einen einheitlichen Stil für alle drei: [warmer cremefarbener Hintergrund, tiefes Grün für Aktionen, ein Korallenakzent, eine Serifenschrift für Überschriften]. Zeig auf dem Zielscreen eine Fortschrittsanzeige und zeichne Illustrationen mit CSS.

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.

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.

Gestalte den Einstellungsscreen mit den üblichen gruppierten Listen von [iOS]: [Account, Tagesziel, Erinnerungen, Darstellung, Daten und Datenschutz, Hilfe]. Zeig die aktuellen Werte rechts in jeder Zeile, verwende einen Schalter für [Erinnerungen] und setz destruktive Aktionen wie [Account löschen] in Rot ans Ende.

Gestalte für den Screen [Bibliothek] drei weitere Zustände als separate Dateien: leer (ein neuer Nutzer ohne Bücher, mit einem klaren nächsten Schritt), lädt (Skeleton-Platzhalter, die zum echten Layout passen) und Fehler (offline, mit einem Button zum erneuten Versuchen). Lass Navigation und Kopfbereich genau wie beim normalen Screen.

Erstelle Dark-Mode-Versionen der Screens [Start] und [Bibliothek]. Kehr nicht einfach die Farben um: Verwende einen dunklen [grüngrauen] Hintergrund statt reinem Schwarz, senke die Sättigung des Akzents, halte den Textkontrast bei WCAG AA oder besser und sag mir, welche Farben du geändert hast und warum.

Passe den Screen [Start] mit den Konventionen von Material 3 für Android an: Top App Bar, Navigationsleiste und, falls es passt, ein Floating Action Button für [Session starten]. Behalte unsere Markenfarben und Schriften. Liste auf, was sich gegenüber der iOS-Version geändert hat.

Setz die abgenommenen Onboarding- und Startscreens in unserer [SwiftUI]-App um. Übernimm Layout und Abstände aus den HTML-Dateien in [designs/], verwende die Farben aus [Theme.swift], unterstütze Dynamic Type und nutze bestehende Komponenten, wo sie passen.