Entwicklung & Technik · UX-Design & Prototyping
KI-Schulungen für UX-Designer:innen
Mit KI-Coding-Werkzeugen verschiebt sich die Grenze zwischen Design und Entwicklung: UX-Designer:innen können interaktive Prototypen in echtem Code erstellen, statt nur klickbare Mock-ups zu zeichnen. Aus einem Screenshot, einer Skizze oder einer Beschreibung entstehen in kurzer Zeit funktionsfähige Oberflächen mit echten Zuständen, Formularlogik und Beispieldaten, die sich im Usability-Test wie ein fertiges Produkt anfühlen. Dazu kommen Design-Tokens, Komponentenbibliotheken und Barrierefreiheitsprüfungen, die KI-Assistenten direkt in Code übersetzen. Im Kurs lernen Sie, wie Sie mit Vibe Coding und KI-Agenten schneller von der Idee zum testbaren Prototyp kommen, wie Sie Ergebnisse sauber an Entwicklungsteams übergeben und wo die Grenzen zwischen Prototyp und produktionsreifer Software liegen.
Für wen ist das Training?
- UX- und UI-Designer:innen
- Product Designer:innen und Interaction Designer:innen
- UX-Researcher:innen, die Varianten schnell testen möchten
- Product Owner und Produktmanager:innen mit Gestaltungsverantwortung
- Design-System-Teams an der Schnittstelle zur Frontend-Entwicklung
Typische Herausforderungen, die wir adressieren
- Statische Mock-ups bilden Interaktionen, Zustände und echte Daten nur unzureichend ab
- Übergaben an die Entwicklung verlieren Details, Abstände und Verhaltenslogik
- Lange Wartezeiten auf Entwicklungskapazität für Experimente und A/B-Varianten
- Barrierefreiheit wird oft erst spät und unvollständig berücksichtigt
Praxisszenarien aus Ihrem Bereich
Klickbare Prototypen in Code
Aus Skizzen, Wireframes oder Screenshots lauffähige Web-Prototypen mit Navigation, Formularvalidierung, Lade- und Fehlerzuständen sowie realistischen Beispieldaten erzeugen, die direkt im Browser getestet werden können. Änderungswünsche setzen Sie direkt im Gespräch um.
Varianten für Tests erzeugen
Mehrere Gestaltungsvarianten eines Flows parallel generieren, etwa für Onboarding oder Checkout, und sie für Usability-Tests oder A/B-Experimente mit wenigen Anpassungen bereitstellen. Unterschiede bleiben dabei klar dokumentiert.
Design-Tokens in Code übersetzen
Farben, Typografie, Abstände und Radien aus dem Designsystem als Tokens strukturieren und in CSS-Variablen, Tailwind-Konfigurationen oder Theme-Dateien für Komponentenbibliotheken überführen. So sprechen Design und Entwicklung dieselbe Sprache.
Barrierefreiheit prüfen
Prototypen auf Kontraste, semantisches HTML, Tastaturbedienung, Fokusreihenfolge und ARIA-Attribute untersuchen und konkrete Verbesserungen gemäß WCAG direkt im Code umsetzen lassen. So werden Barrieren behoben, bevor sie in die Entwicklung wandern.
Microinteractions gestalten
Übergänge, Animationen und Feedback-Zustände beschreiben und als CSS- oder JavaScript-Code umsetzen, um Timing und Wirkung früh im echten Medium statt im Zeichenprogramm zu bewerten. Varianten lassen sich direkt vergleichen.
Research-Ergebnisse auswerten
Notizen aus Interviews und Usability-Tests clustern, Muster und Pain Points herausarbeiten und daraus priorisierte Gestaltungshypothesen ableiten, die direkt in neue Prototyp-Iterationen einfließen. Zitate bleiben dabei nachvollziehbar zugeordnet.
Mögliche Praxisprojekte im Kurs
Onboarding-Prototyp
Ein mehrstufiger Onboarding-Flow als Web-App mit Fortschrittsanzeige, Validierung und gespeicherten Eingaben, bereit für moderierte Usability-Tests. Testpersonen erleben dabei realistische Fehlermeldungen und Ladezustände statt statischer Bildschirme.
Token-Konverter
Ein kleines Tool, das exportierte Design-Tokens einliest und daraus CSS-Variablen, eine Farbpalette mit Kontrastwerten und eine Vorschauseite erzeugt. Kontrastprobleme werden sofort markiert.
Komponenten-Playground
Eine Übersichtsseite, die Buttons, Formulare und Karten Ihres Designsystems in allen Zuständen zeigt, inklusive Hell- und Dunkelmodus. Sie dient als lebendige Referenz für Design und Entwicklung.
Alle 9 Kurse für UX-Designer:innen
Vibe & Agentic Coding (9)
Datenschutz & Compliance
Prototypen enthalten oft unveröffentlichte Produktideen und Research-Daten von Testpersonen: Sie lernen, Interviewnotizen DSGVO-konform zu pseudonymisieren, Urheberrechte an Schriften, Bildern und generierten Assets zu klären und Anforderungen aus dem Barrierefreiheitsstärkungsgesetz früh einzuplanen.
Voraussetzungen
Sie haben Erfahrung in UX- oder UI-Design und mit gängigen Designwerkzeugen; Programmierkenntnisse sind nicht erforderlich, ein Grundverständnis von HTML und CSS ist hilfreich.
Häufige Fragen
Muss ich als Designer:in programmieren können?
Nein. Sie beschreiben Oberflächen und Verhalten in natürlicher Sprache, mit Skizzen oder Screenshots, und das KI-Werkzeug erzeugt den Code. Hilfreich ist, Grundbegriffe wie Komponente, Zustand oder CSS-Klasse zu kennen, um gezielt nachzusteuern. Diese Begriffe vermitteln wir im Kurs praxisnah, sodass Sie Prototypen selbstständig anpassen und weiterentwickeln können.
Kann das Entwicklungsteam den Prototyp-Code übernehmen?
Manchmal ja, oft dient er vor allem als präzise Spezifikation. Prototypen sind auf Geschwindigkeit optimiert, nicht auf Sicherheit, Performance oder Wartbarkeit. Wenn Sie früh dieselbe Komponentenbibliothek und dieselben Tokens wie das Produkt verwenden, steigt die Wiederverwendbarkeit deutlich. Im Kurs klären Sie, wie Sie Übergaben so gestalten, dass beide Seiten profitieren.
Unverbindlich anfragen
Wir melden uns innerhalb eines Werktags mit Terminbestätigung oder Alternativvorschlag.