Zum Hauptinhalt springen

Vollständiger Lernkurs

Frontend Developer + AI

AI-Interfaces, Streaming UX, Freigaben und generative UI

Ein Lernpfad für Frontend-Entwickler zu Chat UI, Streaming, State, Human-in-the-Loop, Accessibility, Browser-Sicherheit und produktiver AI UX.

Beende den Kurs nicht nur mit einem Chat-UI, sondern mit einem Production-Evidence-Paket für eine AI-Oberfläche: explizite State Machine für Streaming, schema-gesteuertes Rendering, Quellenangaben, Approval-Grenzen, zugängliche Statusmeldungen, adversariale Tests, Quality-Telemetrie und ein getesteter Rollback-Pfad.

0%0/10 Lektionen

Der Fortschritt wird lokal in deinem Browser gespeichert.

8–14 Wochen3 Module10 Lektionen2 Assessments

Lern-Betriebssystem

So arbeitest du den Kurs durch und behältst ein belastbares Ergebnis

1. Zustände vor Komponenten entwerfen

Definiere zuerst idle, submitting, streaming, validating, completed, cancelled, retryable error und terminal error. Buttons, Spinner und Antworttext müssen kontrollierten Systemzustand abbilden statt Logik in mehreren Boolean-Flags zu verstecken.

2. Preview vom validierten Ergebnis trennen

Ein Partial Stream verbessert die wahrgenommene Geschwindigkeit, ist aber kein finales Domain-Ergebnis. Rendere nicht vertrauenswürdigen Text sicher und zeige strukturierte Ausgaben, Quellenangaben und vorgeschlagene Aktionen erst nach Schema- und Application-Validierung als bestätigt.

3. Ohne Maus und Magie testen

Teste jedes Lab mit reiner Tastaturnavigation, Screenreader-Statusmeldungen, langsamem Netzwerk, Abbruch, fehlerhaften Payloads, doppelten Events und Prompt-injiziertem Inhalt. Prüfe beobachtbaren UI-Zustand und Side Effects, nicht nur einen schönen Screenshot.

4. UX-Evidenz sichern

Erfasse State-Transition-Traces, Accessibility-Audits, Error Recovery, das Öffnen von Quellen, Approval-Entscheidungen, Time to First Useful Feedback und Task Completion. Eine mediane Antwortzeit allein zeigt nicht, ob Nutzer den Systemzustand verstanden und Kontrolle behalten haben.

Kursregeln

Nicht nur gelesen — sondern nachgewiesen

  • Streaming ist ein Transport-Lifecycle und keine Erlaubnis, Partial Output als bestätigtes Ergebnis darzustellen.
  • Generative UI rendert ein allowlist-basiertes Schema; das Modell liefert weder beliebigen Component Code noch HTML oder Authority.
  • Approval ohne klare Aktion, Target, Konsequenz und Ablehnungspfad ist Zustimmungs-Theater statt Human Control.
  • Accessibility wird an Zustandsübergängen, Fehlern und Recovery getestet, nicht nur durch Scan einer statischen fertigen Seite.
  • Nach einem Production-UX- oder Security-Incident wird der minimierte Interaction Trace zum permanenten Regression Case.

Modul 1

Gemeinsamer AI-Kern

Grundlage für kontrollierte und verifizierbare Interaktion mit AI-Systemen.

ErgebnisDer Entwickler versteht Modellgrenzen und kann AI-generierte Ergebnisse verifizieren.

  1. AI-Grundverständnis und Modellgrenzen

    Kern

    Fähigkeiten, Halluzinationen, Kontextgrenzen, Datenschutz und verantwortungsvolle Nutzung.

    Material →

  2. Prompt- und Context Engineering

    Kern

    Anweisungen, Beispiele, Constraints, Kontext und Prüfung der Ergebnisse.

    Voraussetzungen: AI-Grundverständnis und Modellgrenzen

    Material →

  3. Structured Outputs und Evaluation

    Kern

    Antwortschemata, deterministische Checks, Testfälle und Akzeptanzkriterien.

    Voraussetzungen: Prompt- und Context Engineering

    Material →Ressource →

Checkpoint nach dem Modul

Vertrauenswürdige Interaktions-Baseline

  • ✓ Modell-, Privacy- und Authority-Grenzen sind im Flow erklärt
  • ✓ strukturierte Ergebnisse besitzen Schema und Fallback
  • ✓ kritische Aussagen sind von Source Evidence unterscheidbar

Szenario-Transfer-Lab

Transfer Lab: Vertrauensvertrag für eine AI-Antwort

Nimm eine AI-Antwort, die Erklärung, Fakten und eine empfohlene Aktion mischt. Trenne Modelltext, validierte Felder, Quellenangaben, Unsicherheit und Action Proposal, sodass Nutzer die Herkunft erkennen und einen Vorschlag nicht mit einer bereits ausgeführten Aktion verwechseln.

Abgabe

Response Schema + annotierter Wireflow + Content-Regeln für Loading, Evidence, Unsicherheit, veraltete Quellenangaben, Validation Failure und nicht verfügbare Quellen.

Structured Outputs →RAG-Zitate →AI UX →Roadmap Frontend Developer + AI →
  • ✓ ein ungültiger Payload erreicht keine privilegierte Komponente
  • ✓ eine Quellenangabe öffnet eine konkrete Quelle oder zeigt einen expliziten unavailable state
  • ✓ Unsicherheit wird nicht durch dekorative Sicherheit verborgen
  • ✓ Action Proposal ist visuell und semantisch von einer abgeschlossenen Aktion getrennt

Modul 2

AI-Interaktionsmuster

Interface-Muster für probabilistische Systeme und länger laufende AI-Interaktionen.

ErgebnisDas Interface stellt Streaming, Unsicherheit, Freigaben und Fehler korrekt dar.

  1. Chat-UI und Streaming-Antworten

    Kern

    SSE, partielle Ausgaben, Abbruch, Wiederholungen und optimistische Zustände.

    Material →

  2. Human-in-the-Loop und Freigabe-UI

    Kern

    Aktionsbestätigung, Risikokontext, Undo und Audit Trail für folgenreiche AI-Aktionen.

    Material →

  3. Barrierefreiheit für AI-Interfaces

    Empfohlen

    Screenreader, Fokussteuerung, Statusupdates und Progressive Disclosure.

    Material →

  4. Projekt: produktionsreifes AI-Assistant-Interface

    ProjektPraxis + Assessment

    Streaming-Chat mit Zitaten, Freigaben, Fehlerzuständen und Barrierefreiheit.

    Voraussetzungen: Chat-UI und Streaming-Antworten, Human-in-the-Loop und Freigabe-UI

    Material →Praxis →Assessment →

Checkpoint nach dem Modul

Resiliente AI-Oberfläche

  • ✓ der Streaming-Lifecycle hat explizite Übergänge, Cancellation und Retry Policy
  • ✓ generiertes UI ist auf ein allowlist-basiertes Schema begrenzt
  • ✓ Approval zeigt Aktion, Ziel, Konsequenz und einen Ablehnungspfad ohne Side Effect

Szenario-Transfer-Lab

Transfer Lab: Streaming-, Cancellation- und Approval-State-Machine

Baue eine Assistant-Oberfläche für eine lange Antwort und eine vorgeschlagene Tool-Aktion. Reproduziere langsamen Stream, Disconnect, Duplicate Chunk, Abbruch während der Generierung, fehlerhaften finalen Payload und erneutes Öffnen des Approvals nach Änderung des Zielzustands.

Abgabe

Ausführbares UI + State-Transition-Tabelle + automatisierte Component/E2E-Tests + Trace, das Request, Stream, Validation, Approval und autoritatives Action Result verbindet.

Streaming und Backpressure →Human in the loop →Tool-Calling-Verträge →Praxis: Production-AI-Interface →
  • ✓ späte oder doppelte Events setzen das UI nicht in einen falschen Zustand zurück
  • ✓ Cancellation stoppt die Darstellung und besitzt einen definierten Backend-Reconciliation-Pfad
  • ✓ Partial Output gilt nie vor finaler Validation als abgeschlossen
  • ✓ Approval prüft Target und Permission unmittelbar vor dem Side Effect erneut

Modul 3

Sicherheit und Production UX

Browser-Sicherheit, Vertrauen, Erklärbarkeit, strukturiertes Rendering und Qualitäts-Telemetrie.

ErgebnisDas AI-Interface bietet sichere Aktionen, Evidenz, Fallbacks und messbare UX-Qualität.

  1. Prompt Injection und Browser-Sicherheit

    Kern

    Nicht vertrauenswürdige Inhalte, XSS-Grenzen, Tool-Freigaben und Schutz vor Datenabfluss.

    Material →

  2. Generative UI und strukturiertes Rendering

    Kern

    Schema-gesteuerte Komponenten, Validierung, eingeschränktes Rendering und sichere Fallbacks.

    Material →

  3. Milestone: vertrauenswürdiges AI-Frontend

    MeilensteinPraxis + Assessment

    Eine barrierefreie, beobachtbare und sichere AI Experience für den Production Review.

    Voraussetzungen: Prompt Injection und Browser-Sicherheit, Generative UI und strukturiertes Rendering

    Material →Praxis →Assessment →

Checkpoint nach dem Modul

Production-UX-Gate

  • ✓ Keyboard- und Screenreader-Szenarien bestehen Acceptance Checks
  • ✓ Prompt Injection und unsicheres Rendering besitzen Regression Cases
  • ✓ Quality-, Task-Success- und UX-Telemetrie können Rollout stoppen und Rollback auslösen

Szenario-Transfer-Lab

Transfer Lab: Accessibility, adversariale UX und Release Gate

Teste den fertigen Flow als probabilistische Oberfläche statt als statische Seite. Ergänze Keyboard-only- und Screenreader-Szenarien, Reduced Motion, schmalen Viewport, prompt-injizierte Quellen, unsichere URLs, Citation Mismatch, Timeout und Rollback zur vorherigen Schema-Version.

Abgabe

Versioniertes UX-Evaluation-Set + Accessibility-Report + Security-Regression-Suite + Canary-Dashboard und Runbook mit Stop-, Fallback- und Rollback-Kriterien.

Prompt-Injection-Guardrails →AI-Evaluation →AI Incident Response →Knowledge Map →
  • ✓ Statusänderungen werden angekündigt, ohne den Fokus zu stehlen
  • ✓ nicht vertrauenswürdiger Modell- oder Quelleninhalt erzeugt kein ausführbares Markup und keine unsichere Navigation
  • ✓ Evaluation misst Task Completion, Recovery, Evidence Use und Accessibility getrennt
  • ✓ Schema-Inkompatibilität oder schwere Regression aktiviert dokumentierten Fallback oder Rollback

Capstone-Vertrag

Capstone: vertrauenswürdige produktive AI-Assistant-Oberfläche

Baue eine End-to-End-AI-Oberfläche, in der Streaming, Evidence, strukturiertes Rendering und folgenreiche Aktionen explizite Verträge haben. Beweise, dass Nutzer den Systemzustand verstehen, Quellen prüfen, Aktionen abbrechen oder ablehnen, nach Fehlern wiederherstellen und die Kernaufgabe zugänglich abschließen können.

Was abzugeben ist

  • — Interaction/State Model für Request, Stream, Validation, Approval, Action Result, Cancellation, Retry und Terminal States
  • — versionierte Response- und Generative-UI-Schemas mit allowlist-basierten Komponenten, sicherem Text/URL-Rendering und rückwärtskompatiblem Fallback
  • — Evidence UX mit Quellenangaben, Freshness/Unavailable States, Unsicherheit und klarer Trennung von Model Proposal und authoritative result
  • — Approval Contract mit Actor, Action, Target, Parametern, Risk Context, Expiry, Permission Recheck und Audit Event
  • — automatisierte Accessibility-, Component-, E2E- und adversariale Tests für Keyboard, Screenreader, Injection sowie fehlerhafte, doppelte und veraltete Events
  • — UX-Evaluation-Set und Telemetrie für Task Completion, Recovery, Validation Failure, Approval Outcome und Time to First Useful Feedback
  • — Canary-, Feature-Flag-, Fallback- und Rollback-Runbook mit Schema-/Versions-Kompatibilitätsprüfungen

Wann es als fertig gilt

  • ✓ jeder sichtbare Zustand entspricht einem definierten Systemzustand und besitzt einen zugänglichen Namen oder eine Ankündigung
  • ✓ Partial oder fehlerhafter Output wird nicht zu validierter Tatsache, Komponente oder abgeschlossener Aktion
  • ✓ Nutzer können Evidence prüfen, sicher ablehnen, den Flow abbrechen und sich nach retryable Failure erholen
  • ✓ nicht vertrauenswürdiger Inhalt umgeht weder Rendering noch Navigation, Permission oder Approval Boundaries
  • ✓ das Release Gate blockiert schwere Accessibility-, Security-, Evidence-Integrity- oder Task-Completion-Regressionen
  • ✓ Rollback stellt ein kompatibles UI/Schema-Envelope wieder her, ohne Audit Trail unfertiger Actions zu verlieren

Abschlusspraxis und Assessment

Der Kurs endet mit einem praktischen Artefakt und einer Abnahmerubrik. Das Ergebnis gilt erst nach erfüllten Akzeptanzkriterien als abgeschlossen, nicht bloß nach dem Lesen der Materialien.

Projekt: produktionsreifes AI-Assistant-Interface →Milestone: vertrauenswürdiges AI-Frontend →Roadmap öffnen →