EveryGen AI: UI-Mockups mit GPT-Image-2 als statische Konzepte

Ein hilfreiches UI-Mockup macht Informationen, Hierarchie und Zustände des Produkts verständlich. GPT Image 2 kann die visuelle Richtung eines mobilen Bildschirms, eines SaaS-Dashboards oder einer Landingpage erkunden helfen. Jede Ausgabe ist ein statisches Konzeptbild, keine funktionierende Software und keine bearbeitbare Komponentenbibliothek.

Diese Anleitung entwickelt Today, eine fiktive persönliche Aufgaben-App. Beginne mit ihrem mobilen Bildschirm und übertrage dieselben Inhalte und Gestaltungsregeln anschließend auf Desktop- und Marketinglayouts. Die Illustrationen sind von Codex generierte Lehrbeispiele, keine Testausgaben von EveryGen AI.

1. Inhalt und Zustand festlegen

Das mobile Beispiel in EveryGen AI zeigt drei unerledigte Aufgaben. Seine Fortschrittsanzeige muss deshalb 0 of 3 complete lauten und alle drei Aufgaben-Checkboxen müssen leer sein.

Element	Text oder Zustand
Titel	Today
Datum	Tuesday, 29 September
Fortschritt	0 of 3 complete und 0%
Begleitzeile	A little focus goes a long way.
Aufgabe 1	Read 10 pages — Personal · 20 min
Aufgabe 2	Walk for 20 minutes — Health · 20 min
Aufgabe 3	Plan tomorrow — Planning · 10 min
Hauptaktion	Add task
Navigation	Today / Projects / Calendar / Profile

Das sind Beispielinhalte, keine Live-Kontodaten. Die Datumsleiste hebt Dienstag, den 29., hervor. Die Fortschrittszusammenfassung wird aus dem Aufgabenstatus abgeleitet und nicht als Dekoration gewählt.

Lege für ein UI-Briefing in EveryGen AI zuerst fest, was die Person verstehen muss, bevor du über das Aussehen des Bildschirms entscheidest. Dieses Beispiel muss die heutigen Aufgaben und ihren unerledigten Zustand vermitteln. Halte diesen Zweck neben dem Prompt für EveryGen AI fest, damit eine attraktive Variante die erforderlichen Informationen nicht durch dekorative Widgets oder einen unerklärten Status ersetzt.

Bewahre einen freigegebenen Textstand für dein Mockup aus EveryGen AI auf, einschließlich Beschriftungen, Aufgabenwortlaut und dem Zusammenhang zwischen Fortschritt und Erledigung. Behandle ihn als Vorgabe und nicht als Formulierungsvorschlag. Vergleiche das generierte Bild bei der Prüfung von EveryGen AI mit diesem Stand. Schreibe die Quelle nicht um, nur weil die Ausgabe eine plausible Alternative enthält.

Eine statische Checkbox aus EveryGen AI stellt einen Zustand dar, ohne ihn zu speichern oder zu ändern. Entscheide, welchen Zustand das Bild zeigen soll, und prüfe dann, ob die anderen sichtbaren Anzeigen dazu passen. EveryGen AI kann einen vorgeschlagenen Bildschirm illustrieren. Dauerhafte Speicherung, Kontodaten und das Ergebnis beim Betätigen eines Steuerelements müssen separat im funktionierenden Produkt gestaltet werden.

2. Hierarchie und wiederverwendbare Komponenten planen

Statische Lehrübersicht. Layoutmaße sind beispielhafte Gestaltungsvorschläge und keine aus einer implementierten App gewonnenen Abmessungen.

Lies den Bildschirm aus EveryGen AI von der Kopfzeile über Fortschritt, Datumsleiste, Aufgabenliste und Hauptaktion bis zur Navigation. Halte die Aufgabenkarten einheitlich: Checkbox links, Titel und Metadaten in der Mitte, Kategoriesymbol rechts.

Unterscheide in EveryGen AI die hervorgehobene Aktion Add task von der ruhigeren Navigation. Ein Eintrag in der unteren Navigation wechselt Bereiche und sollte nicht mit der Aktion konkurrieren, die eine Aufgabe erstellt.

Gruppiere im mobilen Konzept von EveryGen AI zusammengehörige Informationen, damit Lesende Aufgabentitel, Kategorie und Dauer unterscheiden können. Prüfe wiederholte Karten gemeinsam, statt jede isoliert freizugeben. Ein Kandidat aus EveryGen AI mit uneinheitlicher Ausrichtung kann unterschiedliche Komponentenregeln vermitteln, auch wenn Farben und allgemeiner Stil abgestimmt wirken.

Prüfe sichere Abstände rund um Hauptaktion und Navigation des Bildschirms aus EveryGen AI. Ihre unterschiedlichen Zwecke sollten im Bild verständlich bleiben und Beschriftungen genug Platz zum Lesen haben. Ein statisches Layout aus EveryGen AI kann weder komfortable Touch-Ziele noch Tastaturzugang beweisen. Diese Eigenschaften brauchen Messungen und Interaktionsprüfungen, nachdem aus dem Entwurf eine echte Oberfläche geworden ist.

3. Den mobilen Bildschirm mit einem vollständigen Prompt generieren

Öffne GPT Image 2 in EveryGen AI, wähle Text to Image und ein Hochformat von 9:16. Beginne mit 1K, um die Komposition vor einer höheren Auflösung zu prüfen. Kontrolliere das tatsächlich verfügbare Ausgabeformat in der Oberfläche. Die Lehrbilder hier belegen keine Exportoption.

Create one complete static mobile UI concept for a fictional task app called Today.
Use a flat 9:16 portrait canvas with no device frame or surrounding scene.

Visual direction:
Cream background, charcoal text, white task cards, deep teal accents,
subtle borders and shadows, clear readable typography, generous safe margins.

Header:
Today
Tuesday, 29 September
A small avatar circle with AL.

Progress card:
0 of 3 complete
0%
A little focus goes a long way.
Show an empty pale progress ring, with no completed green segment.

Add a seven-day strip: Mon 28, Tue 29, Wed 30, Thu 1, Fri 2, Sat 3, Sun 4.
Highlight Tue 29.

Exactly three task cards, all with EMPTY circular checkboxes:
Read 10 pages — Personal · 20 min — book icon
Walk for 20 minutes — Health · 20 min — walking icon
Plan tomorrow — Planning · 10 min — calendar icon

Place one prominent deep-teal Add task button beneath the cards.
Bottom navigation: Today, Projects, Calendar, Profile. Select Today.

Align repeated components, preserve every word, and keep all content visible.
Do not invent extra tasks, checked states, or a working interactive interface.

Von Codex generiertes Konzept. Buttons, Symbole und Navigation sind Pixel in einem Bild und führen keine Aktionen aus.

Formuliere die mobile Anfrage an EveryGen AI für einen Bildschirm und einen freigegebenen Zustand. Ergänze keine unverbundenen Nachrichten, Diagramme oder zusätzlichen Aufgabengruppen, nur um leeren Raum zu füllen. Bewahre den Prompt beim heruntergeladenen Kandidaten aus EveryGen AI auf und kennzeichne die verwendeten Einstellungen. So lassen sich spätere Überarbeitungen mit einer tatsächlich gespeicherten Version statt mit einer erinnerten Erscheinung vergleichen.

Prüfe kleine Beschriftungen im tatsächlichen Export aus EveryGen AI, statt dich auf das Vorschaubild zu verlassen. Eine Überschrift kann richtig aussehen, während in Aufgabenmetadaten Wörter fehlen oder Zeichen verschmelzen. Prüfe das vollständige Bild in seiner vorgesehenen Anzeigegröße und vergrößere danach unsichere Details. Ein Konzept aus EveryGen AI ist nur hilfreich, wenn seine erforderlichen Informationen diese Prüfung bestehen.

Halte die Herkunft der Lehrillustrationen von deiner Ausgabe aus EveryGen AI getrennt. Sie erklären die beabsichtigte Komposition und die Prüfungen, ohne zu beweisen, dass eine Anfrage ihre Pixel reproduziert. Kennzeichne eigene Kandidaten aus EveryGen AI nach Version und bewahre den vollständigen Prompt auf. So erhalten Prüfende eine klare Grundlage, um ein Beispiel von einem beobachteten Ergebnis zu unterscheiden.

4. Das Briefing an ein SaaS-Dashboard anpassen

Nutze ein Querformat und gib der Desktopversion eine klare Informationsarchitektur. Verwende Produktname, Palette, Aufgabenwortlaut und Statusbegriffe erneut. Ersetze die Anweisungen für das mobile Layout durch:

Create a static landscape SaaS dashboard for Today.
Use a left sidebar: Overview, Projects, Calendar, Files.
Place a greeting and summary cards above the main workspace.
Use a task table with Task, Project, Status, and Due columns.
Include a weekly activity chart and a compact calendar in a secondary column.
Use the same cream, charcoal, white, and deep-teal visual system.
Label any invented analytics as example data.
Keep table headings and status labels readable; do not add a mobile device frame.

Lege tatsächliche Beispielzeilen und Diagrammwerte fest, bevor du ein detailliertes Dashboard generierst. Prüfe, dass angezeigte Summen mit diesen Werten übereinstimmen. Ein überzeugendes Diagramm belegt nicht, dass seine Daten stimmen.

Definiere in einem Dashboard-Briefing für EveryGen AI, welche Informationen in den Hauptarbeitsbereich und welche in unterstützende Bereiche gehören. Eine breitere Fläche rechtfertigt keine erfundenen Geschäftskennzahlen. Halte den Inhaltsstand für EveryGen AI ausdrücklich fest, einschließlich der Bedeutung jedes Status und aller Beispielwerte, die das endgültige Bild zeigen soll.

Vergleiche den Aufgabenwortlaut der Desktopansicht aus EveryGen AI mit dem mobilen Text, bevor du die visuelle Einheitlichkeit beurteilst. Die Navigation kann sich an die jeweilige Oberfläche anpassen, während Aufgabenidentität und Statusbegriffe stimmig bleiben. Eine Anpassung in EveryGen AI sollte freigegebene Informationen neu anordnen, statt stillschweigend ein anderes Produkt einzuführen, dessen attraktives Layout nur der ursprünglichen Palette ähnelt.

Behandle ein Diagramm innerhalb eines Dashboards aus EveryGen AI als weiteren Gegenstand, der Vorgaben braucht. Bestimme Quelle und beabsichtigte Aussage vor der Anfrage und überprüfe danach Beschriftungen und Beziehungen unabhängig. Das Auftauchen eines Diagramms in EveryGen AI belegt weder ein gemessenes Ergebnis noch eine Live-Datenverbindung oder einen funktionierenden Filter zur Untersuchung dieser Werte.

5. Das Briefing an eine Landingpage anpassen

Die Landingpage erklärt den Nutzen, bevor sie zum Start auffordert. Sie braucht nicht jedes Steuerelement des Dashboards.

Create a static desktop landing-page concept for the fictional Today app.
Headline: Make room for focused work
Primary CTA: Start planning
Show a product preview and three concise benefit cards:
Stay organized / Focus on what matters / Make real progress.
Use the same deep-teal accent, warm ivory surfaces, and restrained typography.
Keep the headline and CTA readable at ordinary browser size.
Do not invent customer logos, testimonials, prices, or performance statistics.

Das Titelbild des Artikels zeigt, wie diese drei Oberflächen eine gemeinsame visuelle Sprache nutzen können. Generiere einzelne Bildschirme separat, wenn du kleinen Text prüfen musst. Eine Präsentation mit mehreren Geräten lässt jedem Bildschirm weniger Pixel.

Ein Landingpage-Konzept aus EveryGen AI sollte den Zweck des Produkts erklären und seine Hauptaktion leicht auffindbar machen. Wähle die freigegebene Botschaft, bevor du eine Produktvorschau oder unterstützende Karten hinzufügst. Verbinde den CTA-Wortlaut in EveryGen AI mit diesem Zweck. Ein hervorgehobener Button im Bild vermittelt eine Absicht, erstellt aber weder ein Ziel noch einen Anmeldeablauf.

Prüfe die Beziehung zwischen der Landingpage aus EveryGen AI und ihrem Produktbildschirm. Die Vorschau sollte den genannten Nutzen unterstützen, ohne einen widersprüchlichen Aufgabenstatus oder eine unverbundene Funktion zu zeigen. Halte unbelegte Erfahrungsberichte und Kundenbehauptungen aus dem Briefing für EveryGen AI heraus. Visuelle Verfeinerung kann nicht belegen, dass echte Menschen das Produkt verwendet oder ein bestimmtes Ergebnis erzielt haben.

6. Wortlaut, Zustand und Geometrie getrennt prüfen

Vergleiche zuerst jede sichtbare Beschriftung mit dem freigegebenen Text. Zähle dann Karten, Checkboxen, Navigationseinträge und Hauptaktionen. Prüfe zum Schluss Ausrichtung, Kontrast, Abstände und sichere Ränder.

Ein Zustand 1 of 3 erfordert genau eine erledigte Aufgabe. Ein Zustand 0 of 3 erfordert keine. Gib keinen Fortschrittsring frei, der seiner Aufgabenliste widerspricht, nur weil der Bildschirm ausgearbeitet aussieht.

Lade für eine Korrektur den gespeicherten Kandidaten in Image to Image hoch und beschreibe eine beobachtbare Änderung, zum Beispiel:

Correct only the second task label to Walk for 20 minutes.
Preserve the other copy, three empty checkboxes, zero progress,
layout, colors, navigation, and Add task button.

Vergleiche die gesamte Überarbeitung mit der vorherigen Version. Eine Anweisung, andere Bereiche zu erhalten, garantiert nicht, dass sie identisch bleiben.

Beurteile dein Konzept aus EveryGen AI in getrennten Durchgängen: freigegebener Text, dargestellter Zustand und Layout. Ein korrekter Titel bestätigt keinen Fortschrittsindikator, und ausgerichtete Karten bestätigen nicht ihren Inhalt. Notiere das beobachtete Problem vor einer Überarbeitungsanfrage. Das hilft, eine Korrektur in EveryGen AI auf ein Problem auszurichten, das auch andere Prüfende erkennen können.

Prüfe beim Vergleich einer Überarbeitung aus EveryGen AI mit ihrer Ausgangsversion jeden zuvor akzeptierten Bildschirmteil. Die Bitte, eine Beschriftung zu ändern, kann anderswo eine Checkbox, Abstände oder Navigation verändern. Halte verworfene Varianten von freigegebenen Dateien getrennt. Die Anweisung an EveryGen AI beschreibt deine Absicht. Das resultierende Bild braucht weiterhin eine Prüfung der gesamten Komposition.

Halte für ein Layout, das ein responsives Produkt werden soll, fest, wie sich das Konzept aus EveryGen AI neu anordnen sollte, statt seine Pixel in eine andere Form zu strecken. Entscheide, was hervorgehoben bleibt und was sich verschieben darf. Das Bild aus EveryGen AI kann dieses Gespräch leiten. Die Implementierung muss das tatsächliche Verhalten bei schmalen und breiten Ansichten festlegen.

7. Das ausgewählte Konzept in einen echten Entwurf überführen

Speichere das freigegebene Bild zusammen mit Textstand, beabsichtigten Zuständen und offenen Problemen. Baue das Layout mit bearbeitbarem Text und Komponenten in einem Gestaltungswerkzeug oder einer Codebasis nach. Prüfe Tastaturnavigation, responsives Verhalten, Kontrast und echte Interaktionen in dieser Implementierung.

Ein generiertes Mockup hilft beim Besprechen einer Richtung. Es belegt keine Einhaltung von Barrierefreiheitsanforderungen, liefert keine Schriftlizenzen und ersetzt keine Tests einer funktionierenden Oberfläche.

Übergib das Konzept aus EveryGen AI mit dem freigegebenen Text, dem dargestellten Zustand und einer kurzen Liste offener Entscheidungen. Erkläre, welche Steuerelemente nur abgebildet sind und welche Interaktionen das künftige Produkt unterstützen muss. Bewahre den Export aus EveryGen AI als Referenz neben der bearbeitbaren Implementierung auf. So können Entwickelnde der beabsichtigten Informationshierarchie folgen, ohne Rasterpixel als Komponenten zu behandeln.

Baue wiederholte Karten aus EveryGen AI als echte wiederverwendbare Komponenten mit bearbeitbarem Text und ausdrücklich definiertem Zustand nach. Lege Lade-, Leer-, Auswahl- und Fehlerverhalten im funktionierenden Produkt fest, statt anzunehmen, das Bild beantworte diese Fragen. Ein Mockup aus EveryGen AI kann die ausgewählte visuelle Richtung vermitteln. Die Anwendung braucht aber eigene Regeln für Daten, Fokus, Validierung und Interaktion.

Nimm den implementierten Entwurf anhand echter Aufgaben ab: eine Aufgabe lesen, ihren Status ändern, navigieren und zum richtigen Kontext zurückkehren. Vergleiche das Ergebnis mit den Vorgaben aus EveryGen AI und berücksichtige praktische Anpassungen für responsives Layout und Barrierefreiheit. Halte die Rolle der Studie aus EveryGen AI klar. Sie unterstützt Gestaltungsentscheidungen und Prüfung, während eine funktionierende Oberfläche ihr eigenes Verhalten nachweisen muss.