UI-Design-Prompts für GPT Image 2.6.

Erstelle eine realistische mobile App-Oberfläche für [eine Lauf-App]. Startscreen für eine wiederkehrende Läuferin: Begrüßung „Morgen, Sam“, ein Ring für die Wochendistanz mit „18,4 / 25 km“, ein primärer Button „Lauf starten“, eine Karte zum letzten Lauf mit Routen-Thumbnail, Pace und Zeit sowie eine Tab-Leiste unten: Start, Pläne, Aktivität, Profil. Klare weiße Oberfläche, ein einziger energiegeladener Orangeakzent, klare Typografie. iPhone-Screen, kein Geräterahmen.

Erstelle eine realistische Oberfläche für eine Mobile-Banking-App. Kontostandkarte „4.280,55 €“, Schnellaktionen Senden, Anfordern, Rechnungen zahlen, Aufladen und eine Liste der letzten Umsätze mit Händlerlogos, Datum und Betrag. Ruhige Palette aus Marineblau und Weiß, abgerundete Karten, großzügige Abstände. Sie soll aussehen wie eine echte, veröffentlichte App. iPhone-Screen, kein Rahmen.

Erstelle einen realistischen Startscreen für eine Lieferdienst-App: Adressleiste „Liefern an Bergstraße 24“, Suchfeld, Kategorie-Chips (Pizza, Sushi, Salate, Desserts), eine hervorgehobene Restaurantkarte mit Bewertung und Lieferzeit und eine Liste „Beliebt in deiner Nähe“. Warme, appetitliche Fotos, weißer Hintergrund, ein einziger roter Akzent. iPhone-Screen, kein Rahmen.

Erstelle drei mobile Onboarding-Screens nebeneinander für [eine Meditations-App]: 1) Willkommen mit einer ruhigen Illustration und „Besser atmen in 5 Minuten am Tag“, 2) Ziele auswählen mit auswählbaren Chips, 3) eine Erinnerungszeit mit einem Zeitwähler festlegen. Durchgehend sanfte Lavendelpalette, abgerundete Buttons, Fortschrittspunkte. Keine Geräterahmen.

Erstelle einen realistischen Unterhaltungs-Screen einer Messaging-App: Kontaktname „Maya“ mit Online-Status, abwechselnde Nachrichtenblasen mit realistischen kurzen Nachrichten, ein geteiltes Foto, eine Sprachnachricht mit Wellenform und ein Eingabefeld mit Anhang- und Senden-Icon. Helles Theme, blauer Akzent. iPhone-Screen, kein Rahmen.

Erstelle einen realistischen Einstellungs-Screen im iOS-Stil für [eine Notiz-App]: gruppierte Listen für Account, Synchronisierung, Darstellung, Mitteilungen, Datenschutz und Hilfe, mit den aktuellen Werten rechts, Schaltern für iCloud-Sync und Erinnerungen und einer roten Zeile „Abmelden“ ganz unten. Nativer iOS-Look, heller Modus. iPhone-Screen, kein Rahmen.

Erstelle einen mobilen Empty State für [eine Aufgaben-App], wenn noch keine Aufgaben da sind: eine einfache, freundliche Illustration, die Überschrift „Deine Liste ist leer“, eine Zeile Begleittext und ein primärer Button „Erste Aufgabe hinzufügen“. Minimalistisch, viel Weißraum. iPhone-Screen, kein Rahmen.

Erstelle eine mobile Oberfläche im Dark Mode für [einen Musikplayer]: Albumcover, Titel „Night Drive“, Name des Künstlers, ein Fortschrittsbalken mit Zeitangaben, Wiedergabesteuerung und eine Songtext-Vorschau. Tiefer Anthrazit-Hintergrund (kein reines Schwarz), ein einziger Neon-Cyan-Akzent, Text mit hohem Kontrast. iPhone-Screen, kein Rahmen.

Erstelle einen Desktop-Hero für die Landingpage [eines Projektmanagement-SaaS]: Logo und Navigation oben, die Überschrift „Projekte ausliefern ohne Status-Meetings“, eine Unterzeile, zwei Buttons „Kostenlos starten“ und „Demo buchen“ und darunter ein großer Produkt-Screenshot eines Kanban-Boards. Klares weißes Layout, ein einziger Violettakzent, 16:9, kein Browserrahmen.

Erstelle die Desktop-Startseite eines Portfolios für die Produktdesignerin „Lena Ortiz“: große Editorial-Überschrift, kurzes Intro, ein Raster aus sechs Projektkarten mit Titelbildern und Titeln und ein Kontaktlink. Gebrochen weißer Hintergrund, schwarze Serifen-Überschriften, minimalistisch und wie eine Galerie. 16:9.

Erstelle eine realistische Produktseite für einen Onlineshop für [eine Kaffeetasse aus Keramik]: links eine Galerie mit Produktfotos, rechts Titel, Preis „32 €“, Farbfelder, Mengenauswahl, ein Button „In den Warenkorb“, Versandinfos und eine Bewertungsübersicht „4,8 (212 Bewertungen)“. Warme, neutrale Palette. Desktop, 16:9.

Erstelle einen Preisbereich mit drei Plänen: Free „0 €“, Pro „12 €/Monat“ (hervorgehoben als „Am beliebtesten“) und Team „29 €/Monat“. Jeder Plan listet fünf Funktionen mit Häkchen und hat einen Button. Dazu ein Umschalter monatlich/jährlich mit dem Hinweis „20 % sparen“. Klare weiße Oberfläche, ein einziger grüner Akzent. 16:9.

Erstelle eine Desktop-Seite für einen Blogartikel: Titel „Wie wir unsere Build-Zeit um 70 % gesenkt haben“, Avatar des Autors und Datum, ein breites Titelbild, gut lesbarer Fließtext in einer zentrierten Spalte, ein Codeblock und rechts ein Inhaltsverzeichnis. Editorial-Stil, großzügiger Zeilenabstand. 16:9.

Erstelle die Startseite für ein Restaurant im Viertel namens „Olive & Ember“: ein Hero mit Food-Foto über die volle Breite und dem Namen, Öffnungszeiten, ein Button „Tisch reservieren“, eine kurze Vorschau der Speisekarte mit Preisen und der Standort mit Karte. Warme, rustikale, elegante Typografie. Desktop, 16:9.

Erstelle eine Registrierungsseite im Split-Screen: links ein Formular mit E-Mail, Passwort, einem Button „Account erstellen“ und „Weiter mit Google“, rechts eine Produktillustration mit einem kurzen Kundenzitat. Klar und vertrauenswürdig, blauer Akzent. Desktop, 16:9.

Erstelle eine mobile Landingpage für [eine KI-Schreib-App]: Überschrift, Unterzeile, ein Button „Kostenlos testen“, drei Feature-Blöcke mit kleinen UI-Vorschauen, ein Kundenzitat und ein Footer. 390 px breit, langes Scroll-Layout komplett gezeigt, kein Rahmen.

Erstelle eine freundliche 404-Seite für [eine Reisebuchungsseite]: eine verspielte Illustration eines verlorenen Koffers, die Überschrift „Diese Seite hat einen anderen Flug genommen“, ein Suchfeld und Links zu Start, Reiseziele und Hilfe. Petrolfarbener Akzent passend zur Marke, viel Weißraum. Desktop, 16:9.

Erstelle ein realistisches Analytics-Dashboard: Navigation in einer Seitenleiste links, Auswahl des Zeitraums, vier KPI-Karten (Besucher 48.210; Registrierungen 1.284; Conversion 2,7 %; Umsatz 38.400 €), ein Liniendiagramm der täglichen Besucher, ein Balkendiagramm nach Kanal und eine Tabelle der Top-Seiten. Helles Theme, ruhige Blaupalette, echte Interface-Elemente. 16:9.

Erstelle ein Board für eine CRM-Vertriebspipeline mit den Spalten Lead, Qualifiziert, Angebot, Gewonnen: Deal-Karten mit Firmenname, Wert, Avatar der verantwortlichen Person und Tagen in der Phase. Obere Leiste mit Suche und einem Button „Neuer Deal“. Klar, dicht, aber gut lesbar. Desktop, 16:9.

Erstelle eine Admin-Tabelle für Nutzer: Suche, Filter für Rolle und Status, Spalten Name, E-Mail, Rolle, Status, Zuletzt aktiv, mit Status-Badges (Aktiv, Eingeladen, Gesperrt), Aktionen pro Zeile und Paginierung. Neutrale graue Oberfläche, ein einziger Indigoakzent. Desktop, 16:9.

Erstelle die Wochenansicht einer Kalender-Web-App: links ein kleiner Monatskalender und eine Liste der Kalender, im Hauptbereich ein Raster von Montag bis Sonntag mit farbcodierten Terminen, ein Button „Erstellen“ und ein geöffnetes Popover mit Termindetails zu einem Termin. Helles Theme. 16:9.

Erstelle einen E-Mail-Client mit drei Spalten: links die Ordner, in der Mitte die Nachrichtenliste mit Absender, Betreff, Vorschau und Uhrzeit, rechts die geöffnete E-Mail mit Antworten-Buttons. Klar und vertraut, blauer Akzent. Desktop, 16:9.

Erstelle eine Desktop-App für einen KI-Assistenten: links eine Seitenleiste mit dem Chatverlauf, im Hauptbereich eine Unterhaltung mit einer Frage und einer langen formatierten Antwort mit Aufzählung und Codeblock, unten ein Eingabefeld mit Anhang und Modellauswahl. Minimalistische, neutrale Oberfläche. 16:9.

Ein Set aus sechs einfachen Linien-Icons für die Tab-Leiste einer App: Start, Suche, Bibliothek, Statistik, Profil, Einstellungen. Einheitliche Strichstärke von 2px, abgerundete Enden und Ecken, einfarbig, kein Text, gleichmäßig verteilt in einer Reihe.

Ein Set aus acht Duotone-Feature-Icons für eine SaaS-Website: Geschwindigkeit, Sicherheit, Integrationen, Analytics, Zusammenarbeit, Automatisierung, Support, Mobil. Gleiches Raster und gleicher Eckenradius, zweifarbig in Blau, kein Text.

Ein modernes App-Icon für [einen Habit-Tracker]: ein einfaches Häkchen, verschmolzen mit einer Flammenform, mittig auf einem abgerundeten Quadrat mit sanftem Verlauf von Koralle zu Orange. Flach, klar, auch in kleinen Größen erkennbar, kein Text.

Ein Set aus vier einfachen Illustrationen für Empty States im selben Stil: keine Nachrichten, keine Suchergebnisse, keine Dateien, alle Aufgaben erledigt. Flache Formen, zwei Farben, weiche Schatten, freundlich und minimalistisch, transparenter Hintergrund.

Ein minimalistisches Logo für ein Designstudio namens „North Canvas“: ein geometrischer Nordpfeil kombiniert mit einem quadratischen Rahmen, daneben die Wortmarke „North Canvas“ in einer klaren serifenlosen Schrift. Einfarbig, funktioniert auf hellen und dunklen Hintergründen.

Erstelle drei App-Store-Screenshots nebeneinander für [eine Budget-App]. Jeder zeigt einen Smartphone-Screen mit der App-Oberfläche und darüber eine große Bildunterschrift: „Sieh, wohin dein Geld geht“, „Setz dir Ziele, die du wirklich erreichst“, „Werde gewarnt, bevor du zu viel ausgibst“. Helle, einheitliche Markenfarben, Proportionen 1290×2796.

Ein Banner für den Produktlaunch [eines Design-Tools] mit der Ankündigung „Neu: Canvas 2.0“, einem schräg gestellten Screenshot der App-Oberfläche, einer kurzen Unterzeile und einem Button „Jetzt ausprobieren“. Klarer Verlaufshintergrund, moderner Tech-Stil, 16:9.

Ein quadratischer Social-Media-Post, der ein neues Feature „Der Dark Mode ist da“ für [eine Notiz-App] ankündigt, mit der App-Oberfläche hell und dunkel nebeneinander, getrennt durch eine Diagonale. Kräftige Überschrift, Markenfarben, 1:1.

Ein Open-Graph-Bild für einen Blogartikel mit dem Titel „UI-Design mit KI: So geht’s“, links der Titel in großer Schrift, rechts eine kleine Collage aus App-Screens. Klarer Hintergrund, Akzentfarbe der Marke, 1200×630.

Ein Galeriebild für Product Hunt für [ein UI-Design-Plugin]: die Überschrift „Gestalte direkt in deinem Coding-Agenten“, ein großer Screenshot eines Canvas mit mehreren App-Screens nebeneinander und drei kurze Labels mit Vorteilen. Klar, hoher Kontrast, 1270×760.

Eine aufgeräumte Szene mit Geräte-Mockup: ein Laptop und ein Smartphone auf einem hellen Schreibtisch, beide zeigen [das Dashboard und den mobilen Startscreen unserer App], weiches Tageslicht, wenige Requisiten, Stil eines Produkt-Marketingfotos, 16:9.

Eine kurze Animation in Schleife, in der ein mobiler Button „In den Warenkorb“ angetippt wird: Er wird etwas kleiner, färbt sich grün und zeigt ein Häkchen, dann kehrt er in den Normalzustand zurück. Flacher UI-Stil, weißer Hintergrund, kein zusätzlicher Text.

Eine Animation in Schleife, in der eine Kartenliste lädt: Graue Skeleton-Platzhalter schimmern von links nach rechts, dann blenden echte Karten mit Avataren und Text ein. Klare, helle Oberfläche.

Eine Animation in Schleife, in der ein Schalter in den Einstellungen von aus auf an wechselt: Der Knopf gleitet nach rechts, die Spur füllt sich grün und ein kleines Label wechselt von „Aus“ zu „An“. Minimalistische Oberfläche, weißer Hintergrund.

Eine Animation in Schleife mit Pull-to-Refresh in einem mobilen Feed: Die Liste wird nach unten gezogen, ein Ladekreisel erscheint und dreht sich, dann gleiten neue Einträge oben herein. Klare, helle Oberfläche.

Bild 1 ist unser aktueller App-Screen. Bild 2 ist eine Stilreferenz. Gestalte Bild 1 mit den Farben, der Typografie und dem Eckenradius von Bild 2 neu. Lass Layout, Inhalt und Text von Bild 1 exakt gleich.

Ändere nur den eingekreisten Button: Mach ihn zum primären Button mit vollflächig dunkelgrünem Hintergrund und dem weißen Label „Weiter“. Lass alles andere auf dem Screen exakt gleich.

Ersetze nur den eingekreisten Bereich durch eine Karte mit Kundenzitat: ein Foto der Kundin, das Zitat „Wir haben unser Redesign in einer Woche ausgeliefert“, der Name „Priya N.“ und die Position „Head of Product“. Übernimm die vorhandenen Stile. Lass alles andere unverändert.

Bau das angehängte Mockup-Bild als eine eigenständige HTML-Datei in [390×844] nach, mit Inline-CSS und Systemschriften. Übernimm Layout, Abstände, Farben und Text exakt. Zeichne Icons als Inline-SVG.