Generative UI Beispiele: Die besten Interfaces & Ideen 2026

About this offer

Von Lawrence Dauchy, Gründer von VP0 Veröffentlicht am 4. Oktober 2026 Die besten Generative-UI-Beispiele sind Oberflächen, die aus einer Anfrage eine konkrete Handlung machen: eine Reiseplanung mit bearbeitbaren Tageskarten, eine Produktsuche mit passenden Filtern oder eine Lern-App mit Übungen zum aktuellen Verständnis. Für den visuellen Start einer iOS-App liefert VP0 kostenlose Designvorlagen, auf denen du solche Interaktionen aufbauen kannst. Welche Oberfläche sinnvoll ist, entscheidet die Aufgabe: vergleichen, planen, verstehen oder bearbeiten. Ein überzeugendes Interface zeigt passende Inhalte, hält wichtige Bedienelemente stabil und lässt dich Vorschläge korrigieren. Für 2026 würde ich mit einer klar begrenzten Aufgabe und geprüften Komponenten beginnen, bevor die KI ganze Ansichten frei zusammensetzt. Was ist Generative UI und wie funktioniert sie? Generative UI bezeichnet Benutzeroberflächen, deren Inhalte, Komponenten oder Zusammenstellung durch ein KI-Modell passend zur aktuellen Aufgabe bestimmt werden. Aus einer Texteingabe kann dadurch eine interaktive Ansicht entstehen, etwa eine Auswahl von Produktkarten mit einem Vergleichsbereich. Ein klassischer Chat antwortet auf „Plane mir ein Wochenende in Hamburg“ mit Text. Eine generative Oberfläche könnte zusätzlich eine Tagesplanung, verschiebbare Aktivitäten und einen Budgetregler anzeigen. Dafür braucht die KI nicht jedes Mal neuen Oberflächencode zu schreiben. Du kannst vorhandene Komponenten definieren und das Modell entscheiden lassen, welche davon erscheinen und welche geprüften Daten sie erhalten. Für die Umsetzung sind drei Formen hilfreich: Auswahl vorhandener Komponenten: Das Modell wählt beispielsweise eine Wetterkarte oder einen Terminwähler. Zusammenstellung nach einer strukturierten Beschreibung: Das Modell beschreibt eine Ansicht, die deine Anwendung aus erlaubten Bausteinen aufbaut. Freie Erzeugung einer Oberfläche: Das Modell erzeugt eine individuelle Darstellung, deren Ausführung und Bedienbarkeit zusätzliche Kontrolle brauchen. Für eine erste veröffentlichte Funktion würde ich vorhandene Komponenten verwenden. Damit bleiben Beschriftungen, Abstände und Interaktionen berechenbar. Auch die Unterscheidung zwischen Entwicklung und Nutzung zählt: Eine KI kann beim Programmieren ein statisches Dashboard erstellen. Generative UI entsteht, wenn die Anwendung später während der Nutzung passende Oberflächenelemente auswählt oder zusammensetzt. Welche Generative-UI-Beispiele sind besonders nützlich? Besonders nützlich sind Beispiele, bei denen du ein Ergebnis direkt bearbeiten kannst. Die folgenden Ideen sind als konkrete Produktkonzepte gedacht, nicht als Rangliste getesteter Apps. 1. Reiseplanung mit bearbeitbaren Tageskarten Du gibst ein: „Plane drei Tage in Wien, mit wenig Fußwegen, vegetarischen Restaurants und einem freien Nachmittag.“ Die Oberfläche zeigt für jeden Tag eine Karte mit Aktivitäten, Zeitfenstern und Wegen. Über einen Button kannst du eine Aktivität austauschen, ohne den gesamten Plan neu anzufordern. Ein Regler verändert das gewünschte Tempo. Bereits bestätigte Termine bleiben bestehen, während die übrigen Vorschläge angepasst werden. Die Qualität liegt in den Details: Öffnungszeiten brauchen verlässliche Daten, Reisezeiten müssen nachvollziehbar sein und noch ungeprüfte Angaben eine erkennbare Kennzeichnung erhalten. Buchungen gehören in einen eigenen Bestätigungsschritt. 2. Produktsuche mit erklärbaren Empfehlungen Eine Anfrage wie „Ich suche einen leisen Staubsauger für eine kleine Wohnung mit Katze“ erzeugt Produktkarten mit passenden Merkmalen. Jede Karte beantwortet dieselben Fragen: Warum passt dieses Produkt? Welche Einschränkung gibt es? Welche Angabe wurde tatsächlich geprüft? Daneben erscheinen Filter für Gewicht, Lautstärke und Zubehör. Änderst du eine Bedingung, aktualisiert sich die Auswahl. Praktisch ist ein Vergleichsbereich, in den du einzelne Produkte aufnehmen kannst. Deine Auswahl bleibt erhalten, auch wenn du anschließend nach günstigeren Alternativen suchst. Preise und Verfügbarkeit kommen aus dem Produktbestand, nicht aus einer freien Modellantwort. 3. Lern-App mit Übungen zum Verständnis Du fragst nach einer Erklärung für Bruchrechnung. Nach einer kurzen Einführung erscheint eine Aufgabe mit auswählbaren Antworten. An deiner Antwort erkennt die Anwendung, welcher nächste Schritt sinnvoll sein könnte. Bei Schwierigkeiten zeigt sie eine visuelle Aufteilung; bei einer korrekten Lösung folgt eine anspruchsvollere Aufgabe. Die Oberfläche braucht einen sichtbaren Ausweg: „Noch einmal erklären“, „Anderes Beispiel“ oder „Zur Übersicht“. Eine falsche Antwort sollte eine konkrete Hilfestellung auslösen. Ein pauschaler Hinweis wie „Leider falsch“ erklärt weder den Denkfehler noch den nächsten Versuch. 4. Projektplanung aus einer unstrukturierten Beschreibung Du beschreibst eine Produktidee in einem Absatz. Daraus entstehen Aufgabenkarten mit vorgeschlagenen Abhängigkeiten und offenen Fragen. Unbekannte Informationen bleiben offen. Hat niemand einen Termin genannt, darf die KI keinen verbindlichen Abgabetag vortäuschen. Du kannst Aufgaben verschieben, Verantwortliche auswählen und einen Vorschlag verwerfen. Erst nach deiner Freigabe wird daraus ein gespeicherter Projektplan. Für kleine Teams ist eine Ansicht mit „Jetzt“, „Danach“ und „Später“ oft verständlicher als ein umfangreiches Planungssystem mit zahlreichen Feldern. 5. Datenanalyse mit veränderbaren Ansichten Eine Anfrage wie „Warum sind die Bestellungen diese Woche zurückgegangen?“ erzeugt eine Zusammenfassung mit passenden Diagrammen und Filtern. Du kannst anschließend zwischen Zeiträumen, Vertriebskanälen oder Produktgruppen wechseln. Die Anwendung sollte Beobachtung und Erklärung unterscheiden. Sinkende Bestellungen nach einer Preisänderung beweisen noch keinen ursächlichen Zusammenhang. Ein brauchbares Interface zeigt deshalb auch Datenlücken und alternative Erklärungen. Fehlen Vergleichswerte, darf die Ansicht das benennen, statt eine überzeugend klingende Ursache zu erfinden. 6. Kundendienst mit einem nächsten Schritt Du beschreibst, dass eine Bestellung beschädigt angekommen ist. Die Oberfläche zeigt die betroffene Bestellung, eine Auswahl der Artikel und ein Feld für Fotos. Nach der Eingabe entsteht eine Vorschau der Anfrage. Du kannst Angaben ändern, bevor sie versendet wird. Für häufige Anliegen sind solche Abläufe hilfreicher als ein Chat, der sämtliche Informationen einzeln abfragt. Die KI hilft bei der Zuordnung, während die Anwendung die erlaubten Aktionen festlegt. Wie sehen überzeugende generative Interfaces aus? Überzeugende generative Interfaces haben ein stabiles Grundgerüst und einen anpassbaren Arbeitsbereich. Navigation, Einstellungen und gespeicherte Inhalte sollten zuverlässig erreichbar bleiben, während sich die Ansicht zur Aufgabe verändert. Chat mit eingebetteten Karten Dieses Muster passt zu kurzen Aufgaben wie einer Produktsuche oder Terminauswahl. Der Chat erklärt den Vorschlag, die Karte bietet die passende Interaktion. Begrenze die Karten auf das, was gerade gebraucht wird. Werden gleichzeitig mehrere Diagramme, Auswahlfelder und Listen eingefügt, verliert die Unterhaltung ihre Übersicht. Geteilter Arbeitsbereich Für Reisepläne, Dokumente oder Projekte bietet sich ein geteilter Arbeitsbereich an: Unterhaltung auf einer Seite, bearbeitbares Ergebnis auf der anderen. Auf dem Smartphone lässt sich zwischen beiden Ansichten wechseln. Eine ausgewählte Karte sollte beim Wechsel weiterhin eindeutig zugeordnet sein. Der Vorteil: Du musst den aktuellen Plan nicht zwischen älteren Chatnachrichten suchen. Direkte Eingabe im bestehenden Screen Eine Such- oder Befehlsleiste kann eine vorhandene Oberfläche ergänzen. Du schreibst beispielsweise „Zeige offene Aufgaben für diese Woche“, und der Arbeitsbereich passt seine Filter an. Dieses Muster eignet sich, wenn Nutzer bereits mit der Anwendung vertraut sind. Die Texteingabe verkürzt einen bekannten Ablauf, während normale Bedienelemente verfügbar bleiben. Für eine iOS-App kann ein VP0-Design das Grundgerüst liefern. Die Auswahl passender Karten und die Verbindung mit Daten ergänzt du in deiner Anwendung. Welche Regeln machen Generative UI verständlich? Generative UI wird verständlich, wenn die Anwendung zeigt, was vorgeschlagen wurde, was bereits feststeht und was du als Nächstes tun kannst. Dafür brauchst du klare Zustände und gezielte Interaktionen. Halte Orientierungspunkte stabil Navigation, Zurück-Button und Einstellungen sollten an derselben Stelle bleiben. Wenn sich der Arbeitsbereich verändert, braucht der Nutzer weiterhin vertraute Wege. Auch die Hauptaktion einer Karte sollte konsistent sein. „Übernehmen“ darf nicht nach jeder Anfrage an einer anderen Position auftauchen. Zeige, was sich verändert hat Nach „Mach den Reiseplan günstiger“ sollte erkennbar sein, welche Unterkünfte oder Aktivitäten ersetzt wurden. Eine kurze Änderungsübersicht reicht häufig aus. Zusätzlich hilft eine Möglichkeit, die vorherige Fassung wiederherzustellen. Bereits bestätigte Inhalte solltest du nur verändern, wenn der Nutzer das ausdrücklich verlangt. Lass einzelne Vorschläge bearbeiten Einzelne Karten brauchen gezielte Aktionen wie „Ersetzen“, „Bearbeiten“ oder „Entfernen“. Bei einem Wochenplan sollte „Mittwoch ändern“ nicht automatisch den gesamten Plan verwerfen. Das kostet Aufmerksamkeit und kann bereits geleistete Arbeit verlieren lassen. Plane Zwischenzustände Die Anwendung muss auch dann verständlich bleiben, wenn noch kein vollständiges Ergebnis vorliegt. Geeignete Zustände sind: Die Anfrage wird verarbeitet. Zusätzliche Informationen fehlen. Ein Teil des Ergebnisses ist verfügbar. Eine Datenabfrage ist fehlgeschlagen. Eine Aktion wartet auf Bestätigung. Ein endloser Ladeindikator gibt dem Nutzer keine Entscheidungsmöglichkeit. Biete bei längeren Vorgängen einen Abbruch und bei Fehlern einen erneuten Versuch an. Prüfe Barrierefreiheit an den Komponenten Tastaturbedienung, Fokusreihenfolge u