Schulung – Bolt – UX-Design & Prototyping

Bolt für UX-Designer:innen

Full-Stack-Prototypen direkt im Browser: mit Bolt per Prompt Web-Apps erzeugen, in WebContainers ausführen und veröffentlichen.

Dauer
6 Stunden, ein Termin
Format
Online oder vor Ort
Sprache
Deutsch oder Englisch
Teilnehmende
offene Termine oder exklusiv für Ihr Team
Abschluss
Teilnahmebescheinigung

Überblick

„Bolt für UX-Designer:innen“ ist ein praxisorientiertes Training für Rollen wie UX- und UI-Designer:innen, Product Designer:innen und Interaction Designer:innen und UX-Researcher:innen, die Varianten schnell testen möchten. Sie lernen Bolt nicht abstrakt, sondern an Aufgaben aus Ihrem Arbeitsalltag kennen – mit Beispielen, Übungen und Vorlagen aus dem Bereich UX-Design & Prototyping.

Bolt von StackBlitz erzeugt aus Prompts lauffähige Full-Stack-Anwendungen und führt sie unmittelbar im Browser aus. Möglich machen das WebContainers: Eine Node.js-Laufzeitumgebung läuft vollständig im Browser-Tab, inklusive Paketinstallation, Dev-Server und Terminal. In dieser eintägigen Schulung lernen Sie, wie Sie mit Bolt in kurzer Zeit Prototypen mit React, Vue, Svelte, Next.js, Astro oder Node.js-Backends bauen, wie Sie Prompts und Projektanweisungen strukturieren und wie Sie den Agenten gezielt steuern, statt ihn unkontrolliert großflächig umbauen zu lassen.

Der Kurs verbindet schnelle Ergebnisse mit professionellem Handwerk. Sie lesen und bearbeiten den generierten Code direkt im integrierten Editor, beheben Fehler über Terminal und Konsole, binden Datenbanken und Authentifizierung an und exportieren Projekte nach GitHub oder als Archiv. Anschließend veröffentlichen Sie Ihre Anwendung und lernen, wie Sie Token-Verbrauch, Kontextgröße und Projektumfang im Griff behalten. So wissen Sie am Ende genau, für welche Vorhaben Bolt der schnellste Weg zum klickbaren Ergebnis ist und ab wann ein Wechsel in die lokale Entwicklungsumgebung sinnvoll wird.

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 erklären, wie WebContainers funktionieren, und schätzen ein, welche Projekte in Bolt gut laufen.
  • Sie erzeugen mit strukturierten Prompts einen Full-Stack-Prototyp mit Frontend, Backend und Datenbank.
  • Sie debuggen Fehler gezielt über Terminal, Konsole und präzise Rückmeldungen an den Agenten.
  • Sie veröffentlichen Ihre Anwendung und exportieren den Code nach GitHub zur Weiterentwicklung.
  • 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

Modul 1 Bolt und WebContainers verstehen
  • Architektur: Node.js, npm und Dev-Server vollständig im Browser
  • Unterstützte Frameworks und Starter-Vorlagen im Überblick
  • Möglichkeiten und Einschränkungen der Browser-Laufzeit, etwa bei nativen Binärpaketen
  • Editor, Vorschau, Terminal und Dateibaum effizient nutzen
Modul 2 Prompting und Projektsteuerung
  • Den ersten Prompt präzise formulieren: Stack, Seiten, Datenmodell, Stil
  • Projekt- und Systemanweisungen für wiederkehrende Konventionen
  • Diskussionsmodus zum Planen, Build-Modus zum Umsetzen
  • Kleinschrittig iterieren, Dateien gezielt sperren und Versionen zurückspielen
Modul 3 Full-Stack: Daten, Auth und APIs
  • Datenbank und Authentifizierung über die integrierte Backend-Anbindung oder Supabase
  • API-Routen und serverseitige Logik mit Node.js bauen
  • Externe APIs anbinden und Schlüssel über Umgebungsvariablen verwalten
  • Mobile Prototypen mit Expo erstellen und auf dem Gerät testen
Modul 4 Debugging und Codequalität
  • Fehlermeldungen aus Terminal und Browser-Konsole gezielt an den Agenten zurückgeben
  • Generierten Code lesen, verstehen und manuell korrigieren
  • Struktur, Komponenten-Zuschnitt und TypeScript-Typen sauber halten
  • Token-Verbrauch und Kontextgröße bei wachsenden Projekten steuern
Modul 5 Deployment und Übergabe
  • Anwendung mit einem Klick veröffentlichen und eigene Domain verbinden
  • Export nach GitHub und Weiterarbeit lokal in VS Code, Cursor oder Claude Code
  • Sicherheitscheck: Secrets, Zugriffsrechte, Eingabevalidierung
  • Entscheidungskriterien: Prototyp weiterführen oder neu aufsetzen
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

Grundkenntnisse in JavaScript oder TypeScript und ein Verständnis gängiger Webkonzepte wie Komponenten, APIs und Datenbanken. Fachanwender mit technischer Affinität können ebenfalls gut folgen. 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

Laptop mit aktuellem Chromium-basiertem Browser oder Firefox, ein Bolt-Account (für intensives Arbeiten ein kostenpflichtiger Plan) sowie ein kostenloser GitHub-Account.

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.

Termine & Standorte

Pro Standort schlagen wir Ihnen einen Termin in rund vier Wochen vor. Ihr Wunschtermin ist jederzeit möglich.

  • München Mo, 14. Dezember 2026 6 Std. Anfragen
  • Salzburg Mi, 16. Dezember 2026 6 Std. Anfragen
  • Berlin Do, 10. Dezember 2026 6 Std. Anfragen
  • Augsburg Mo, 14. Dezember 2026 6 Std. Anfragen
  • Hannover Mi, 16. Dezember 2026 6 Std. Anfragen
  • Bremen Mi, 16. Dezember 2026 6 Std. Anfragen
  • Stuttgart Mo, 14. Dezember 2026 6 Std. Anfragen
  • Kaiserslautern Do, 10. Dezember 2026 6 Std. Anfragen
  • Online Di, 15. Dezember 2026 6 Std. Anfragen

Häufige Fragen

Brauche ich für Bolt eine lokale Entwicklungsumgebung?

Nein. Dank WebContainers laufen Paketinstallation, Dev-Server und Terminal komplett im Browser, Sie müssen nichts lokal installieren. Erst wenn Sie ein Projekt langfristig weiterentwickeln oder in eine bestehende Toolchain integrieren möchten, lohnt sich der Export nach GitHub und die Arbeit in einem lokalen Editor. Beides üben wir im Kurs.

Was unterscheidet Bolt von Lovable?

Beide erzeugen Web-Apps per Prompt. Bolt bietet mehr Freiheit bei der Wahl des Frameworks, zeigt Code, Terminal und Dateibaum sehr direkt und eignet sich gut für Entwickler, die nah am Code bleiben wollen. Lovable setzt auf einen festen React-Stack mit stärkerem Fokus auf Design-Iteration und Supabase. Die Wahl hängt vom Projekt und Team ab.

Kann ich mit Bolt auch Mobile-Apps bauen?

Ja, über die Expo-Integration lassen sich React-Native-Prototypen erzeugen und per Expo Go direkt auf dem Smartphone testen. Für einfache Apps und Klickprototypen funktioniert das gut. Für native Gerätefunktionen, Store-Veröffentlichung und komplexe Offline-Logik ist meist eine lokale Weiterentwicklung erforderlich, die wir im Kurs einordnen.

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 „Bolt 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 6 Stunden Live-Training mit Trainer:in, Kursunterlagen, Übungsumgebung und Teilnahmebescheinigung.

Kann ich einen eigenen Wunschtermin angeben?

Ja. Für jeden Standort schlagen wir Ihnen einen Termin in rund vier Wochen vor. Im Anfrageformular können Sie aber jederzeit einen Wunschtermin oder Zeitraum im Freitext angeben – wir prüfen die Verfügbarkeit und melden uns 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 und Kaiserslautern. Auf Wunsch führen wir das Training auch exklusiv für Ihr Team durch.

Kann der Kurs auf unser Team zugeschnitten werden?

Ja. Maßgeschneiderte Kurse kosten ca. 4.500 € mehr, je nach Thema und nach Absprache. Wir stimmen Inhalte, Beispiele und Übungen vorab mit Ihnen ab.

Weitere Kurse für UX-Designer:innen

Weitere Kurse zu Bolt

Alle 10 Kurse zu Bolt

Bolt – MünchenBolt – SalzburgBolt – BerlinBolt – AugsburgBolt – HannoverBolt – BremenBolt – StuttgartBolt – KaiserslauternBolt – Online