Tutorial | 25. September 2026 –
UX Tutorial "Just build it" mit Franziska Horst

Wie lassen sich mit KI interaktive Webseiten und Prototypen entwickeln, ohne selbst tief in die Programmierung einzusteigen? Franziska Horst zeigt, wie sie Claude Code und Claude Design in ihrem UX-Workflow einsetzt.

Themen

Und darum geht es

KI-Tools ermöglichen heute Prototypen, die weit über klassische Klickdummys hinausgehen. Franziska Horst zeigt anhand ihres eigenen Workflows, wie sie mit Claude Code interaktive Landingpages entwickelt und Claude dabei als explorativen Sparringspartner nutzt.

Das erwartet dich

  • Einstieg in Claude Code und Claude Design
  • Aufbau eines einfachen Workflows für KI-Prototyping
  • Tipps für bessere Ergebnisse ohne komplizierte Prompts
  • Bedeutung von Zielgruppe, Kontext, Tonalität und Wirkung
  • Einsatz von Animationen und Micro Interactions
  • Übernahme bestehender Figma-Designs in interaktive Prototypen
  • Live-Erstellung einer Landingpage mit Claude Code
  • Iteratives Nachschärfen von KI-generierten Designs
  • Typische Stolpersteine beim Arbeiten mit Claude
  • Tipps zum bewussten Umgang mit Tokens und unterschiedlichen KI-Modellen
  • Erstellung eines Branding Guides mit Claude Design
  • Vergleich und Zusammenspiel von Claude Code und Figma
  • Hinweise zu Berechtigungen, Prompt Injection und Sicherheit
  • Einordnung der Möglichkeiten und Grenzen von KI-generiertem Code

Wichtige Take-Aways für UX-Professionals

  • Für den Einstieg in KI-Prototyping braucht es nicht zwingend komplizierte Prompts. Ein klar formulierter Kontext kann bereits einen großen Unterschied machen.
  • Zielgruppe, Business, gewünschte Wirkung, Tonalität und visuelle Richtung helfen der KI, weniger generische Ergebnisse zu erzeugen.
  • Referenzmaterial ist besonders wertvoll. Bestehende Webseiten, Figma-Designs und Beispiele für Interaktionen können der KI zeigen, in welche Richtung sich ein Design entwickeln soll.
  • Anforderungen müssen nicht immer technisch beschrieben werden. UX-Professionals können Probleme und gewünschtes Verhalten in verständlicher Sprache formulieren und der KI Spielraum für Lösungswege geben.
  • KI kann als explorativer Sparringspartner dienen. Gerade bei Animationen, Interaktionen und Gestaltungsideen entstehen teilweise Lösungen, an die Designer selbst zunächst nicht gedacht haben.
  • Bestehende Figma-Designs können als Ausgangspunkt für interaktivere Prototypen dienen. Das kann beispielsweise User Tests realistischer machen als mit klassischen Klickdummys.
  • UX-Professionals profitieren weiterhin von technischem Grundverständnis. Kenntnisse in HTML, CSS, JavaScript und grundlegenden Entwicklungsprinzipien können die Zusammenarbeit mit Entwickler erleichtern und helfen, KI-Ergebnisse besser einzuschätzen.
  • Nicht jede Aufgabe benötigt das leistungsstärkste KI-Modell. Für kleinere Änderungen können einfachere Modelle ausreichen und den Tokenverbrauch reduzieren.
  • Berechtigungen sollten bewusst vergeben werden. Wenn KI-Tools auf lokale Dateien, Programme oder externe Webseiten zugreifen, sollte genau geprüft werden, welche Aktionen ausgeführt werden.
  • KI-generierter Code sollte nicht automatisch als produktionsreif betrachtet werden. Besonders bei APIs, Datenbanken, sensiblen Daten und sicherheitskritischen Anwendungen ist zusätzliche technische Expertise notwendig.
  • Eine besondere Stärke von Claude Code liegt im schnellen Prototyping. Ideen können früh sichtbar und interaktiv gemacht, getestet und anschließend gemeinsam mit Entwickler weiterentwickelt werden.
  • KI kann die Zusammenarbeit zwischen Design und Entwicklung unterstützen. Statt eine Interaktion nur zu beschreiben, können UX-Designer ihre Idee als funktionierenden Prototypen zeigen und dadurch ein gemeinsames Verständnis schaffen.

Präsentation zum UX Tutorial

  • Download

    prasentationgermanupa.pdf