Schulung · Agentic Coding · UX-Design & Prototyping

Agentic Coding für UX-Designer:innen

Autonome Coding-Agenten wirksam einsetzen: Spezifikation statt Prompt, Aufgabenzerlegung, testgetriebene Loops, Multi-Agent-Setups und Governance.

Dauer
2 Tage (14 Std.)
Format
Online oder vor Ort
Sprache
Deutsch oder Englisch
Teilnehmende
offene Termine oder exklusiv für Ihr Team
Abschluss
Teilnahmebescheinigung

Überblick

Das Training „Agentic Coding für UX-Designer:innen“ richtet sich an Rollen wie UX- und UI-Designer:innen, Product Designer:innen und Interaction Designer:innen und UX-Researcher:innen, die Varianten schnell testen möchten und zeigt Schritt für Schritt, wie Agentic Coding im Bereich UX-Design & Prototyping produktiv, sicher und nachvollziehbar eingesetzt wird – von den Grundlagen bis zu fortgeschrittenen Workflows.

Agentic Coding bezeichnet die Arbeit mit KI-Agenten, die Entwicklungsaufgaben weitgehend selbstständig erledigen: Sie lesen Code, planen Änderungen, führen Befehle und Tests aus und korrigieren sich anhand der Ergebnisse. Werkzeuge wie Claude Code, OpenAI Codex, der GitHub Copilot Coding Agent oder der Agent-Modus von Cursor machen diese Arbeitsweise alltagstauglich. Dieses herstellerneutrale Training vermittelt die Methodik dahinter, damit Sie unabhängig vom Werkzeug verlässliche Ergebnisse erzielen und die Rolle der Entwicklerin oder des Entwicklers neu definieren.

Im Zentrum steht der Wechsel vom spontanen Prompt zur belastbaren Spezifikation. Sie lernen, Aufgaben so zu zerlegen und zu beschreiben, dass Agenten sie zuverlässig lösen, testgetriebene Schleifen aufzusetzen, in denen Tests als objektives Abnahmekriterium dienen, und mehrere Agenten parallel oder arbeitsteilig einzusetzen. Darüber hinaus behandeln wir Review-Strategien für agentisch erzeugten Code sowie Governance im Team: Berechtigungen, Sicherheitsgrenzen, Verantwortlichkeiten, Kostenkontrolle und die schrittweise Einführung agentischer Workflows in bestehende Entwicklungsprozesse.

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.

Das Training findet live statt – wahlweise online im virtuellen Klassenraum oder vor Ort in unseren Trainingsräumen in München, Salzburg, Berlin, Augsburg, Hannover, Bremen, Stuttgart und Kaiserslautern. Auf Wunsch kommen wir auch exklusiv für Ihr Team zusammen.

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

Das können Sie nach dem Training

  • Sie verstehen die Funktionsweise von Coding-Agenten und wählen das passende Werkzeug und den passenden Autonomiegrad.
  • Sie schreiben Spezifikationen und Projektkontext, mit denen Agenten verlässlich arbeiten.
  • Sie zerlegen Vorhaben in überprüfbare Teilaufgaben und steuern Agenten über testgetriebene Loops.
  • Sie setzen Multi-Agent-Setups und parallele Arbeit kontrolliert ein.
  • Sie erstellen interaktive, codebasierte Prototypen mit KI und testen Ideen deutlich früher mit Nutzer:innen.
  • Sie übersetzen Designsysteme und Tokens in Code und verbessern die Übergabe an Entwicklungsteams.
  • Sie prüfen Prototypen systematisch auf Barrierefreiheit und kennen die Grenzen zwischen Prototyp und Produktivcode.

Inhalte & Ablauf

Tag 1

Modul 1 Grundlagen agentischer Entwicklung
  • Funktionsweise von Coding-Agenten: Werkzeugaufrufe, Kontextfenster und Feedback-Schleifen
  • Werkzeuge im Vergleich: Terminal-Agenten, IDE-Agenten und Cloud-Agenten
  • Geeignete Aufgaben erkennen und Autonomiegrade bewusst wählen
  • Die neue Rolle im Team: von der Umsetzung zur Steuerung und Abnahme
Modul 2 Spezifikation statt Prompt
  • Aufgaben mit Ziel, Kontext, Randbedingungen und Abnahmekriterien beschreiben
  • Projektkontext dauerhaft in Dateien wie CLAUDE.md, AGENTS.md oder Rules hinterlegen
  • Plan-First-Vorgehen: Lösungsweg vom Agenten entwerfen und vor der Umsetzung prüfen
  • Spezifikationen versionieren und als Teil des Repositorys pflegen
Modul 3 Aufgabenzerlegung und testgetriebene Agenten-Loops
  • Große Vorhaben in unabhängige, überprüfbare Teilaufgaben zerlegen
  • Tests zuerst schreiben lassen und als objektives Abbruchkriterium nutzen
  • Linter, Typprüfungen und Builds als automatische Rückmeldung einsetzen
  • Festgefahrene Loops erkennen und mit neuer Strategie neu starten
Modul 4 Multi-Agent-Setups und Parallelisierung
  • Spezialisierte Subagents für Recherche, Implementierung, Tests und Review definieren
  • Parallele Arbeit mit Branches, Worktrees und isolierten Umgebungen organisieren
  • Orchestrierung: Ergebnisse zusammenführen und Konflikte auflösen
  • Werkzeuge und Datenquellen über MCP gemeinsam nutzbar machen

Tag 2

Modul 5 Review, Sicherheit und Governance im Team
  • Review-Strategien für große, agentisch erzeugte Änderungen
  • Berechtigungen, Sandboxing und Schutz vor Prompt Injection festlegen
  • Agenten in CI-Pipelines und Pull-Request-Prozesse einbinden
  • Teamrichtlinien, Verantwortlichkeiten, Kosten und schrittweise Einführung planen
Modul 6 Praxislabor: UX-Design & Prototyping
  • Klickbare Prototypen in Code
  • Varianten für Tests erzeugen
  • Design-Tokens in Code übersetzen
  • Barrierefreiheit prüfen
  • Microinteractions gestalten
  • Research-Ergebnisse auswerten
Modul 7 Datenschutz, Qualität & Transfer in den Alltag
  • 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.
  • Spielregeln für den sicheren KI-Einsatz im Team
  • Ergebnisse prüfen: Fakten, Quellen, Tests und Vier-Augen-Prinzip
  • Persönlicher Umsetzungsplan für die nächsten 30 Tage
  • Offene Fragen, Ausblick und Ressourcen zum Weiterlernen

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.

Voraussetzungen

Sie haben mehrjährige Entwicklungserfahrung, arbeiten sicher mit Git, Tests und CI und haben idealerweise bereits erste KI-Coding-Werkzeuge genutzt. 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.

Technische Voraussetzungen

Eigener Laptop mit Git, Terminal und Ihrer Entwicklungsumgebung sowie Zugang zu mindestens einem Coding-Agenten wie Claude Code, Codex, Copilot oder Cursor.

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.

Terminvorschläge

Alle Termine sind Vorschläge – Ihr Wunschtermin ist jederzeit möglich.

  • Mi, 25. November 2026 – Do, 26. November 2026 Online Anfragen
  • Mi, 9. Dezember 2026 – Do, 10. Dezember 2026 Salzburg Anfragen
  • Di, 15. Dezember 2026 – Mi, 16. Dezember 2026 Online Anfragen
  • Do, 14. Januar 2027 – Fr, 15. Januar 2027 Bremen Anfragen
  • Mi, 27. Januar 2027 – Do, 28. Januar 2027 Online Anfragen
  • Mo, 8. Februar 2027 – Di, 9. Februar 2027 Augsburg Anfragen

Häufige Fragen

Worin unterscheidet sich Agentic Coding von Vibe Coding?

Vibe Coding setzt auf schnelle, intuitive Iteration in natürlicher Sprache und eignet sich besonders für Prototypen. Agentic Coding ist ein ingenieurmäßiger Ansatz für professionelle Codebasen: Präzise Spezifikationen, Tests als Abnahmekriterium, klare Berechtigungen und strukturierte Reviews sorgen dafür, dass Agenten auch in komplexen, langlebigen Projekten verlässliche und wartbare Ergebnisse liefern.

Ist der Kurs an ein bestimmtes Werkzeug gebunden?

Nein. Der Kurs vermittelt Methoden, die mit Claude Code, OpenAI Codex, dem GitHub Copilot Coding Agent, Cursor und vergleichbaren Werkzeugen funktionieren. Die Übungen zeigen Unterschiede und Gemeinsamkeiten, etwa bei Kontextdateien, Berechtigungen und Subagents. Sie können mit dem Werkzeug arbeiten, das in Ihrem Unternehmen eingesetzt wird oder werden soll.

Wie behalten wir bei autonomen Agenten die Kontrolle über Qualität und Sicherheit?

Kontrolle entsteht durch mehrere Ebenen: eng gefasste Berechtigungen und Sandboxing, Tests und statische Analysen als automatische Prüfinstanz, verpflichtende menschliche Reviews vor dem Merge und klare Teamregeln zu Verantwortlichkeiten. Im Kurs entwickeln Sie ein Governance-Konzept, das zu Ihren Prozessen, Sicherheitsanforderungen und regulatorischen Vorgaben passt.

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.

Was kostet die Schulung „Agentic Coding für UX-Designer:innen“?

Die Schulung kostet pauschal 949 € zzgl. gesetzl. MwSt. pro Teilnehmer:in – unabhängig davon, ob sie online oder vor Ort stattfindet. Enthalten sind 2 Trainingstag(e) mit Live-Trainer:in, Kursunterlagen, Übungsumgebung und Teilnahmebescheinigung.

Kann ich einen eigenen Wunschtermin angeben?

Ja. Unsere Terminvorschläge sind eine Orientierung. Im Anfrageformular können Sie jederzeit einen Wunschtermin oder Zeitraum im Freitext angeben – wir prüfen die Verfügbarkeit und bestätigen innerhalb eines Werktags.

Findet der Kurs online oder vor Ort statt?

Beides ist möglich: live online im virtuellen Klassenraum oder vor Ort in München, Salzburg, Berlin, Augsburg, Hannover, Bremen, Stuttgart oder Kaiserslautern. Auf Wunsch führen wir das Training auch exklusiv für Ihr Team durch.

Weitere Kurse für UX-Designer:innen

Weitere Kurse zu Agentic Coding

Alle 32 Kurse zu Agentic Coding

Agentic Coding · MünchenAgentic Coding · SalzburgAgentic Coding · BerlinAgentic Coding · AugsburgAgentic Coding · HannoverAgentic Coding · BremenAgentic Coding · StuttgartAgentic Coding · KaiserslauternAgentic Coding · Online