Everygen
Ein KI-Bildgenerator kann eine Appansicht visualisieren, aber keine Interaktion belegen. Nutze ein statisches Konzept für Hierarchie und Gestaltung; Tastatur, Fehlerzustände und Responsive-Verhalten brauchen eine reale Implementierung.
Eine Aufgabe wählen
Ein fiktiver Terminbildschirm soll einen verfügbaren Slot auswählbar machen. Notiere Dienst, Datum, Zeiten, Preis und Hauptaktion. Vermische nicht Dashboard, Onboarding und Checkout in einem Bild.
Inhaltszonen benennen
Beispiel-Prompt: „Statisches mobiles Termin-UI, Dienstzusammenfassung, Datumsauswahl, wenige Zeitslots, Auswahlübersicht und eine Hauptaktion. Klare Abstände, ruhiger Akzent, frontal, keine Geräteattrappe.“ Plane zuerst die Entscheidungshierarchie.
Ein kleines System festhalten
Notiere Typografiecharakter, Abstände, Kontrast und Ecken. Vergleiche ausgewählte und ungewählte Elemente. Ersetze wichtige Zahlen und Labels kontrolliert; visuelle Ähnlichkeit zu einer anderen App ist kein fertiges Designsystem.
Kein Verhalten aus Pixeln ableiten
Prüfe Leserichtung und Aktionsplatz. Frage nach langen Namen oder leerer Verfügbarkeit, ohne diese Zustände als getestet darzustellen. Fokus, Touchflächen und Screenreaderlabels werden im echten Produkt geprüft.
Die Richtung implementieren
Übertrage Hierarchie in Inhalte, wiederverwendbare Controls und Responsive-Regeln. Baue Lade-, Leer-, Fehler- und Erfolgszustände mit echten Daten. Prüfe die implementierte Oberfläche statt nur das Mockup.
UI-Konzept weitergeben
Bewahre Aufgabe, Zustandsbeschreibung und Gestaltungsentscheidungen mit dem Bild. Kennzeichne ungeprüfte Verhaltensfragen. Ein verständlicher Entwurf ist ein Startpunkt für Implementierung und Tests.
Für einen echten Produktnachweis nutze den Screencast-Leitfaden. Wiederkehrende Markenregeln findest du im Brand-Kit-Ablauf.
