Prompt für den Dark Mode einer App in Codex

Erstelle Dark-Mode-Versionen von App-Screens mit getöntem Hintergrund, gedämpften Akzenten, Textkontrast nach WCAG AA und einer Liste der geänderten Farben.

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.

Funktioniert mit

Codex, ChatGPT

Aus der Sammlung

Mobile Apps

Über diesen Prompt

Codex erstellt dunkle Versionen von zwei Screens und erklärt seine Farbwahl. Die Regeln im Prompt beugen den üblichen Problemen vor: ein getönter dunkler Hintergrund statt reinem Schwarz, ein weniger gesättigter Akzent, damit er auf dem Dunkel nicht leuchtet, und ein Textkontrast, der mindestens WCAG AA erfüllt.

Nenne die umzuwandelnden Screens in den ersten beiden Klammern. Der Startscreen plus ein inhaltsreicher Screen ist ein gutes Paar, denn der eine testet dein zentrales visuelles Element und der andere lange Textstrecken. Nimm die Tönung des Hintergrunds aus deiner Marke, ein Grüngrau für eine grüne Marke oder ein Blaugrau für eine blaue, damit das dunkle Theme sich weiter nach derselben App anfühlt.

Die Liste der geänderten Farben ist der Anfang einer wiederverwendbaren dunklen Palette. Bitte Codex, daraus eine kleine Tabelle mit hellen und dunklen Werten pro Rolle zu machen, und gib sie an den Produktionscode-Schritt weiter, damit der Dark Mode aus Tokens gebaut wird statt Screen für Screen. Jeden hellen Screen mit seinem dunklen Zwilling nebeneinander zu vergleichen ist der schnellste Weg, einen Akzent zu finden, der zu matt geworden ist.

Weitere Prompts aus dieser Sammlung

• 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.
• Prompt für den Onboarding-Flow einer App in CodexGestalte drei verbundene Onboarding-Screens in 390×844, Willkommen, Tagesziel und erster Startscreen, in einem gemeinsamen Stil mit CSS-Illustrationen.
• 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.