Prompt für den Onboarding-Flow einer App in Codex

Gestalte drei verbundene Onboarding-Screens in 390×844, Willkommen, Tagesziel und erster Startscreen, in einem gemeinsamen Stil mit CSS-Illustrationen.

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.

Funktioniert mit

Codex, ChatGPT

Aus der Sammlung

Mobile Apps

Über diesen Prompt

Codex gestaltet drei Screens als separate HTML-Dateien in iPhone-Größe: einen Willkommens-Screen, einen Screen zur Wahl eines Tagesziels mit Fortschrittsanzeige und den ersten Startscreen, auf dem ein neuer Nutzer landet. Wenn du alle drei zusammen verlangst, teilen sie sich einen Satz aus Farben, Schrift und Abständen, statt dass jeder Screen seinen eigenen erfindet.

Die Stilzeile in Klammern ist deine visuelle Richtung in einem Satz: Hintergrund, Aktionsfarbe, ein Akzent und eine Überschriftenschrift. Halte die Farben knapp und benenne sie nach ihrer Rolle; „tiefes Grün für Aktionen“ sagt Codex, wohin eine Farbe gehört, eine Liste aus fünf Hex-Codes nicht. Fragt dein Onboarding etwas anderes als ein Ziel ab, etwa Interessen oder die Erlaubnis für Mitteilungen, benenne den mittleren Screen entsprechend um.

Lies die drei Dateien in der Reihenfolge, in der ein neuer Nutzer sie erlebt. Auf einem Codex-Design-Canvas stehen sie von links nach rechts, sodass ein Stilbruch oder eine Fortschrittsanzeige, die sich nie bewegt, leicht auffällt. Kläre den Flow hier, denn der nächste Prompt gestaltet die Version des dritten Screens für wiederkehrende Nutzer.

Weitere Prompts aus dieser Sammlung

• Prompt für den Startscreen einer mobilen App in CodexGestalte einen Startscreen für wiederkehrende Nutzer um das eine Element, das du als wichtigstes nennst, mit Tab-Leiste und echten Zahlen.
• 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.