Generative UI-Leitplanken: Entwerfen für Absichten, ohne Ihr Designsystem zu beschädigen

Von festen Layouts bis hin zu zielgerichtetem Design

Bei einem festen Layout legen Designer jeden Bildschirm im Voraus fest. Bei der generativen Benutzeroberfläche entscheidet ein KI-Modell, welche Schnittstelle für eine bestimmte Anfrage angezeigt wird. Google beschreibt generative UI als ein Modell, das nicht nur Inhalte, sondern ein ganzes Erlebnis generiert, und liefert nun darauf basierende Experimente in der Gemini-App und im AI-Modus in der Google-Suche aus. Bei Entwicklertools beschreibt das Vercel AI SDK eine einfachere Version: Das Modell ruft ein Tool auf und das Ergebnis dieses Toolaufrufs wird als React-Komponente gerendert.

Was sich für UX ändert

Designer hören auf, jeden Bildschirm zu zeichnen, und fangen an, die Regeln zu entwerfen: welche Komponenten vorhanden sind, wann jede einzelne angemessen ist und was sich niemals ändern darf. Der Rahmen um generierte Inhalte wie Navigation, Eingabe, Rückgängigmachen und Einstellungen sollte fest bleiben, damit die Leute nie ihren Platz verlieren. Generierte Bereiche sollten klar gekennzeichnet sein und die Benutzer sollten in der Lage sein, zu einer einfachen, vorhersehbaren Ansicht zu wechseln.

Leitplanke 1: ein genehmigter Komponentenkatalog

Das sicherste Muster besteht darin, das Modell Komponenten auswählen und füllen zu lassen, anstatt sie zu erfinden. A2UI, ein von Google entwickeltes offenes Protokoll, funktioniert folgendermaßen: Agenten senden deklarative Komponentenbeschreibungen und der Client rendert sie mit seinen eigenen nativen Widgets, ohne beliebigen Code vom Agenten auszuführen. Ihr Katalog kann klein sein: Tabellen, Karten, Diagramme, Formulare, Listen, alle von Ihrem Team erstellt und getestet.

Leitplanke 2: Token statt Rohwerte

Geben Sie dem Modell semantische Token wie color.text.primary oder space.4 und lehnen Sie Ausgaben ab, die rohe Hexadezimalwerte oder beliebige Schriftgrößen verwenden. Dadurch bleiben Kontrast, Typografie und Abstände im System erhalten und Themen wie Dunkelmodus oder hoher Kontrast funktionieren weiterhin automatisch.

Leitplanke 3: Vor dem Rendern validieren

Führen Sie automatische Überprüfungen der generierten Ausgabe durch, bevor Sie sie anzeigen: erforderliche Felder vorhanden, Farbkontrast, Überschriftenreihenfolge, Beschriftungen bei Eingaben, Fokusreihenfolge, Größe des Berührungsziels und Unterstützung für reduzierte Bewegung. Wenn eine Prüfung fehlschlägt, greifen Sie auf ein einfaches, bekanntermaßen gutes Layout zurück, anstatt eine fehlerhafte Benutzeroberfläche anzuzeigen.

• Schemavalidierung: nur bekannte Komponenten und Eigenschaften
• Zugänglichkeit: Kontrast, Beschriftungen, Rollen, Fokusreihenfolge
• Inhaltsbeschränkungen: maximale Elemente, Textlänge, Bildgrößen
• Fallback: eine einfache Liste oder eine Textantwort, wenn die Validierung fehlschlägt