Kern•10–16 Stunden

Produktionsreife Oberfläche für einen KI-Assistenten

Baue ein produktionsreifes Frontend für einen KI-Assistenten mit Streaming, Zitaten, Freigaben, Abbruch, Fehlerzuständen und Barrierefreiheit.

Streaming-UIState ManagementFreigabenBarrierefreiheitsicheres Rendering

Szenario

Aufgabe

Ein Nutzer arbeitet mit einem KI-Assistenten, der Antworten streamt, Quellen zeigt und riskante Aktionen vorschlagen kann. Die Oberfläche muss den Zustand erklären, Abbruch ermöglichen und eine explizite Bestätigung verlangen.

Schrittweise Umsetzung

1. Zustandsmodell entwerfen

Ergebnis: Die UI besitzt explizite Idle-, Loading-, Streaming-, Error- und Approval-Zustände.

Aufgaben

→State Machine beschreiben
→Abbruch hinzufügen
→Content von Commands trennen

Prüfungen

✓Keine versteckten Übergangszustände
✓Wiederholtes Absenden dupliziert den Request nicht

2. Streaming und Zitate implementieren

Ergebnis: Antworten werden stabil aktualisiert und zeigen ihre Evidenz.

Aufgaben

→Chunks verarbeiten
→Source Cards hinzufügen
→Abstention-Zustand ergänzen

Prüfungen

✓Out-of-order Chunks zerstören die UI nicht
✓Unbekannte Zitate werden nicht als valide dargestellt

3. Freigabe-UX hinzufügen

Ergebnis: Riskante Aktionen werden nicht ohne Zustimmung ausgeführt.

Aufgaben

→Konsequenzen anzeigen
→Bestätigen/Ablehnen ergänzen
→Audit Summary hinzufügen

Prüfungen

✓Kein Auto-Confirm
✓Der Nutzer sieht die exakte Aktion vor der Ausführung

4. Accessibility und Fehler prüfen

Ergebnis: Die Oberfläche ist zugänglich und kann sich von Fehlern erholen.

Aufgaben

→Tastaturtest durchführen
→Screenreader-Status prüfen
→Netzwerkfehler simulieren

Prüfungen

✓Fokus geht nicht verloren
✓Fehler besitzen Retry oder einen sicheren Exit

Akzeptanzkriterien

Streaming kann abgebrochen werden
Zitate werden validiert
Riskante Aktionen benötigen Freigabe
Die UI besteht den Tastatur-Flow
Evidence für Fehlerzustände liegt vor

Bewertungsraster

Wie das Ergebnis bewertet wird

Bestehensgrenze: 72/100 · Auszeichnung: 90/100

UI-Zustandsmodell

Streaming-, Fehler-, Abbruch- und Freigabezustände sind explizit beschrieben.

25 Punkte

Unzureichend

Zustände sind vermischt oder Race Conditions bleiben bestehen.

Kompetent

Die zentralen Zustände sind explizit und getestet.

Stark

Deterministic Replay, Concurrency-Tests und Recovery-Pfade sind umgesetzt.

Erforderliche Nachweise

✓ Link zu Artefakt oder Code
✓ README mit Entscheidungen und Kompromissen
✓ Evidence der ausgeführten Prüfungen
✓ State-Diagramm oder Transition Table

Zitate und sicheres Rendering

Quellen werden validiert und nicht vertrauenswürdiger Inhalt kann nicht als Befehl ausgeführt werden.

25 Punkte

Unzureichend

Eine unbekannte Quelle wird als valide angezeigt.

Kompetent

Zitate werden validiert und besitzen einen Fallback.

Stark

Provenienz, Schema-Validierung und Security-Tests sind umgesetzt.

Erforderliche Nachweise

✓ Link zu Artefakt oder Code
✓ README mit Entscheidungen und Kompromissen
✓ Evidence der ausgeführten Prüfungen
✓ Beispiel einer validen und invaliden Citation

Freigabe-UX

Riskante Aktionen zeigen Kontext, Bestätigen/Ablehnen und einen Audit-Nachweis.

25 Punkte

Unzureichend

Eine Aktion kann ohne explizite Zustimmung ausgeführt werden.

Kompetent

Die Freigabe blockiert die Ausführung und zeigt die Konsequenzen.

Stark

Undo, delegierte Freigaben und ein belastbarer Audit Trail sind umgesetzt.

Erforderliche Nachweise

✓ Link zu Artefakt oder Code
✓ README mit Entscheidungen und Kompromissen
✓ Evidence der ausgeführten Prüfungen
✓ Aufzeichnung des Freigabeablaufs

Barrierefreiheit und Fehlerbehandlung

Tastatur, Fokus, Ansagen und Retry-Verhalten funktionieren zuverlässig.

25 Punkte

Unzureichend

Fokus geht verloren oder Streaming-Updates werden nicht angesagt.

Kompetent

Der Kernablauf ist zugänglich und wiederherstellbar.

Stark

Automatisierte Accessibility-Tests und Progressive Disclosure sind umgesetzt.

Erforderliche Nachweise

✓ Link zu Artefakt oder Code
✓ README mit Entscheidungen und Kompromissen
✓ Evidence der ausgeführten Prüfungen
✓ Keyboard-/Screenreader-Checkliste