Generative UI Beispiele: Die besten Interfaces & Ideen 2026

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 und verständliche Beschriftungen gehören in die wiederverwendbaren Bausteine.

Wenn neue Inhalte erscheinen, darf der Fokus nicht ohne Anlass springen. Eine visuelle Änderung muss auch für Menschen nachvollziehbar sein, die einen Screenreader verwenden.

Wie baust du einen ersten Generative-UI-Prototyp?

Baue zuerst eine begrenzte Funktion mit wenigen Komponenten und einem eindeutig überprüfbaren Ergebnis. Ein Reiseplaner für ein Wochenende ist dafür geeigneter als ein Assistent, der jede beliebige Aufgabe übernehmen soll.

Schritt 1: Formuliere die Aufgabe

Eine brauchbare Ausgangsbeschreibung lautet:

„Der Nutzer erstellt einen Wochenendplan und kann einzelne Aktivitäten austauschen.“

Darin stecken bereits zwei Anforderungen: einen Plan erzeugen und Teile davon bearbeiten.

Ergänze anschließend, welche Informationen die Anwendung benötigt. Für dieses Beispiel wären das Ort, Zeitraum, Interessen und gewünschtes Tempo.

Schritt 2: Definiere erlaubte Komponenten

Für den ersten Prototyp genügen eine Tageskarte, eine Aktivitätskarte, eine Rückfrage und eine Bestätigungsansicht.

Lege für jede Komponente fest, welche Felder erforderlich sind. Eine Aktivitätskarte könnte Titel, Beschreibung, Zeitfenster und Datenstatus enthalten.

Unbekannte Angaben brauchen einen vorgesehenen Zustand. Ein fehlendes Zeitfenster sollte nicht durch eine erfundene Uhrzeit ersetzt werden.

Schritt 3: Trenne Darstellung und Daten

Das Modell kann entscheiden, dass eine Aktivitätskarte gebraucht wird. Öffnungszeiten und Verfügbarkeit sollten aus geeigneten Datenquellen kommen.

Deine Anwendung prüft die zurückgegebenen Daten, bevor sie die Karte anzeigt.

Für die Oberfläche bedeutet das: Es gibt einen sichtbaren Unterschied zwischen einem Vorschlag und einer bestätigten Information. Diese Unterscheidung gehört bereits in den Prototyp.

Schritt 4: Formuliere einen präzisen Entwicklungs-Prompt

Ein möglicher Prompt für dein Entwicklungswerkzeug lautet:

Baue einen mobilen Wochenendplaner mit einer Texteingabe und einem bearbeitbaren Plan. Verwende ausschließlich Tageskarten, Aktivitätskarten, Rückfragen und eine Bestätigungsansicht. Jede Aktivität muss einzeln ersetzt oder entfernt werden können. Halte bestätigte Aktivitäten bei späteren Änderungen fest. Verwende klar gekennzeichnete Beispieldaten. Ergänze Ladezustände, fehlende Angaben und einen Fehlerzustand. Führe keine Buchungen aus.

Dieser Prompt beschreibt Verhalten, Datenstatus und Grenzen. Eine Anweisung wie „Baue eine moderne Reise-App mit KI“ lässt diese Entscheidungen offen.

Schritt 5: Teste widersprüchliche Anfragen

Prüfe nicht ausschließlich den vollständigen Wunschplan. Teste auch:

„Ich möchte alles zu Fuß erreichen, aber möglichst wenig laufen.“

Die Anwendung sollte den Widerspruch erkennen und eine Rückfrage stellen. Sie darf nicht still eine der Bedingungen ignorieren.

Weitere Testfälle sind ein leerer Ort, ein vergangenes Datum und eine Änderung während einer laufenden Anfrage.

Schritt 6: Prüfe auf einem kleinen Bildschirm

Lange Kartentitel, eingeblendete Tastaturen und größere Schrift können die Bedienung verändern.

Teste, ob die aktuelle Auswahl sichtbar bleibt und die Hauptaktion erreichbar ist. Ein Desktop-Prototyp mit viel Platz beantwortet diese Fragen noch nicht.

Welche Technik passt zu deinem Projekt?

Die passende Technik richtet sich nach deiner Plattform und dem Umfang der dynamischen Oberfläche. Für eine einzelne generative Funktion brauchst du eine andere Architektur als für einen Arbeitsbereich mit mehreren Agenten und gemeinsamem Zustand.

Für Webprojekte kann das AI SDK von Vercel helfen, Modellantworten und Werkzeugergebnisse mit Oberflächenkomponenten zu verbinden. Nimm diesen Weg, wenn du bereits eine Webanwendung entwickelst und deren vorhandene Komponenten weiterverwenden möchtest.

CopilotKit bietet Ansätze für Oberflächen, bei denen Agenten Komponenten auswählen oder Ansichten anhand strukturierter Beschreibungen zusammensetzen. Das passt, wenn die Verbindung zwischen Agent, Arbeitszustand und Frontend einen größeren Teil deines Produkts ausmacht.

Für einen kleinen Prototyp kann auch eine eigene Verbindung aus Modellanfrage, Datenprüfung und Komponentenanzeige ausreichen. Dadurch bleibt der erste Ablauf überschaubar.

Bei einer mobilen App musst du prüfen, welche Teile der gewählten Werkzeuge auf deiner Plattform funktionieren. Ein Webbeispiel lässt sich nicht automatisch unverändert in eine native Oberfläche übernehmen.

VP0 liefert Design-Startpunkte für iOS-Apps, standardmäßig auf Basis von Expo React Native. Diese helfen bei der visuellen Grundlage; die generative Logik, Datenanbindung und Berechtigungen bleiben Aufgaben deines Projekts.

Wähle die Technik deshalb erst, wenn der gewünschte Ablauf und die erlaubten Komponenten feststehen.

Wann ist Generative UI die falsche Wahl?

Generative UI passt schlecht, wenn ein fester Ablauf bereits kürzer und verständlicher ist oder Nutzer dieselbe Aktion regelmäßig ausführen. Ein einfacher Schalter für Benachrichtigungen braucht keine KI-Anfrage.

Auch für Zahlungen, Kontoeinstellungen und verbindliche Freigaben würde ich feste Formulare verwenden. Eine KI kann Angaben vorbereiten oder erklären, während der Bestätigungsschritt vorhersehbar bleibt.

Die Kosten entstehen zudem nicht ausschließlich durch Modellanfragen. Du musst fehlerhafte Ausgaben prüfen, Zustände speichern und Änderungen zwischen mehreren Anfragen sauber verarbeiten.

Ein weiterer Stolperstein ist die wechselnde Oberfläche. Wenn erfahrene Nutzer sich bei jeder Aufgabe neu orientieren müssen, kann Anpassung die Bedienung verlangsamen.

Für solche Fälle eignet sich eine klassische Oberfläche mit optionaler KI-Unterstützung: normale Filter und Formulare bleiben verfügbar, während die Texteingabe komplexere Wünsche übersetzt.

Auch ein Design-Startpunkt löst diese Aufgaben nicht. Eine Vorlage liefert Screens und Komponenten, aber keine vollständige Datenlogik und keine Garantie für korrekte Modellentscheidungen.

Das solltest du wählen

Für deinen ersten Versuch würde ich einen bearbeitbaren Planer oder eine Produktauswahl mit wenigen Komponenten bauen. Beide machen den Nutzen sichtbar: Aus einer Anfrage entsteht ein Ergebnis, an dem du direkt weiterarbeiten kannst.

Beginne mit vorhandenen Karten und festen Aktionen. Lass die KI auswählen, welche Inhalte gebraucht werden, und erweitere ihre Freiheit erst, wenn die begrenzte Funktion zuverlässig arbeitet.

Bei einem vorhandenen Produkt lohnt sich ein einzelner Ablauf, den Nutzer heute durch zahlreiche Eingaben oder Rückfragen erledigen. Dort kannst du prüfen, ob eine generative Ansicht tatsächlich Schritte spart.

Bewerte den Prototyp anhand konkreter Aufgaben:

• Findet der Nutzer den passenden nächsten Schritt?
• Kann er einen Vorschlag gezielt korrigieren?
• Bleiben bestätigte Inhalte erhalten?
• Versteht er, welche Angaben noch unsicher sind?
• Kann er bei einem Fehler zur normalen Bedienung zurückkehren?

Für die Veröffentlichung zählt der vollständige Ablauf einschließlich Rückfragen und Fehlerfällen. Eine beeindruckende erste Antwort reicht dafür nicht.

Häufig gestellte Fragen (FAQ)

Was ist das beste Generative-UI-Beispiel für Einsteiger?

Ein bearbeitbarer Wochenplaner ist ein sinnvoller Einstieg. Du brauchst wenige Komponenten, kannst Änderungen direkt sehen und musst zunächst keine verbindlichen Aktionen ausführen. Für den visuellen Start einer iOS-App ist VP0 eine kostenlose Option; die generative Funktion ergänzt du selbst.

Was unterscheidet Generative UI von einem Chatbot?

Generative UI kann passende interaktive Elemente anzeigen, etwa Karten, Filter oder einen bearbeitbaren Plan. Ein reiner Textchat beantwortet die Anfrage sprachlich. Beide Formen lassen sich verbinden, sodass der Chat erklärt und die Oberfläche die Bearbeitung ermöglicht.

Muss die KI für Generative UI neuen Code schreiben?

Nein. Die KI kann vorhandene Komponenten auswählen und mit strukturierten Daten befüllen. Für einen ersten produktiven Einsatz würde ich diesen Ansatz bevorzugen, weil du Darstellung, erlaubte Aktionen und Fehlerzustände vorab festlegen kannst.

Kann ich Generative UI ohne Programmierkenntnisse ausprobieren?

Ja, ein KI-Entwicklungswerkzeug kann beim Aufbau eines Prototyps helfen. Beschreibe Komponenten, Zustände und erlaubte Aktionen konkret. Verwende zunächst Beispieldaten und prüfe jeden Ablauf selbst, bevor du persönliche Daten oder verbindliche Aktionen einbindest.

Wie prüfe ich, ob eine generative Oberfläche besser funktioniert?

Vergleiche sie mit dem bisherigen Ablauf anhand derselben Aufgabe. Beobachte benötigte Schritte, Fehler, Korrekturen und erfolgreiche Abschlüsse. Eine generative Ansicht ist sinnvoll, wenn Nutzer ihr Ziel verständlicher oder mit weniger Aufwand erreichen.