Training course · Bolt · UX Design & Prototyping

Bolt for UX Designers

Full-stack prototypes right in the browser: generate web apps from prompts with Bolt, run them in WebContainers and deploy them.

Duration
1 day (7 hrs)
Format
Online or on-site
Language
German or English
Participants
open dates or exclusive for your team
Certificate
Certificate of attendance

Overview

“Bolt for UX Designers” is a hands-on course for roles such as UX and UI designers, Product designers and interaction designers and UX researchers who want to test variants quickly. Rather than learning Bolt in the abstract, you work on tasks from your daily routine – with examples, exercises and templates from UX Design & Prototyping.

Bolt by StackBlitz generates working full-stack applications from prompts and runs them straight away in the browser. WebContainers make this possible: a Node.js runtime runs entirely inside the browser tab, complete with package installation, dev server and terminal. In this one-day course you learn how to build prototypes quickly with React, Vue, Svelte, Next.js, Astro or Node.js backends, how to structure prompts and project instructions, and how to steer the agent precisely rather than letting it rewrite large parts of your app unchecked.

The course combines fast results with sound engineering practice. You read and edit the generated code in the built-in editor, fix errors using the terminal and console, connect databases and authentication, and export projects to GitHub or as an archive. You then publish your application and learn how to keep token consumption, context size and project scope under control. By the end you know exactly which projects Bolt gets to a clickable result fastest, and at what point moving to a local development environment makes sense.

AI coding tools are shifting the boundary between design and development: UX designers can now build interactive prototypes in real code instead of only drawing clickable mock-ups. A screenshot, a sketch or a short description quickly becomes a working interface with real states, form logic and sample data that feels like a finished product in usability testing. AI assistants also translate design tokens, component libraries and accessibility checks straight into code. In this course you learn how vibe coding and AI agents take you from idea to testable prototype faster, how to hand results over cleanly to engineering teams and where the line runs between a prototype and production-ready software.

The course is delivered live – either online in a virtual classroom or on-site in our training rooms in Munich, Salzburg, Berlin, Augsburg, Hanover, Bremen, Stuttgart and Kaiserslautern. We can also run it exclusively for your team.

Who is this course for?

  • UX and UI designers
  • Product designers and interaction designers
  • UX researchers who want to test variants quickly
  • Product owners and product managers with design responsibility
  • Design system teams working closely with frontend engineering

Typical challenges we address

  • Static mock-ups barely capture interactions, states and real data
  • Hand-offs to engineering lose details, spacing and behavioural logic
  • Long waits for engineering capacity to run experiments and A/B variants
  • Accessibility is often considered late and incompletely

What you will be able to do

  • You can explain how WebContainers work and judge which projects run well in Bolt.
  • You generate a full-stack prototype with frontend, backend and database using structured prompts.
  • You debug issues efficiently via terminal, console and precise feedback to the agent.
  • You publish your application and export the code to GitHub for further development.
  • Build interactive, code-based prototypes with AI and test ideas with users much earlier.
  • Translate design systems and tokens into code and improve hand-offs to engineering teams.
  • Review prototypes systematically for accessibility and understand the line between prototype and production code.

Course outline

Module 1 Understanding Bolt and WebContainers
  • Architecture: Node.js, npm and dev server running entirely in the browser
  • Supported frameworks and starter templates at a glance
  • Capabilities and limits of the browser runtime, for instance with native binary packages
  • Using editor, preview, terminal and file tree efficiently
Module 2 Prompting and project control
  • Writing a precise first prompt: stack, pages, data model, style
  • Project and system instructions for recurring conventions
  • Discussion mode for planning, build mode for implementing
  • Iterating in small steps, locking files and rolling back versions
Module 3 Full stack: data, auth and APIs
  • Database and authentication via the built-in backend integration or Supabase
  • Building API routes and server-side logic with Node.js
  • Connecting external APIs and managing keys through environment variables
  • Creating mobile prototypes with Expo and testing them on a device
Module 4 Debugging and code quality
  • Feeding terminal and browser console errors back to the agent effectively
  • Reading, understanding and manually correcting generated code
  • Keeping structure, component boundaries and TypeScript types clean
  • Managing token usage and context size as projects grow
Module 5 Deployment and handover
  • Publishing your app in one click and connecting a custom domain
  • Exporting to GitHub and continuing locally in VS Code, Cursor or Claude Code
  • Security review: secrets, access rights, input validation
  • Decision criteria: evolve the prototype or rebuild it properly
Module 6 Practice lab: UX Design & Prototyping
  • Clickable prototypes in code
  • Generating test variants
  • Turning design tokens into code
  • Checking accessibility
  • Designing microinteractions
  • Synthesising research
Module 7 Data protection, quality & transfer to daily work
  • Prototypes often contain unreleased product ideas and research data from participants: you learn to pseudonymise interview notes in line with the GDPR, clarify rights to fonts, images and generated assets and plan early for the European Accessibility Act.
  • Ground rules for safe AI use in your team
  • Checking results: facts, sources, tests and the four-eyes principle
  • Personal action plan for the next 30 days
  • Open questions, outlook and resources for further learning

Practical scenarios from your field

Clickable prototypes in code

Turn sketches, wireframes or screenshots into working web prototypes with navigation, form validation, loading and error states and realistic sample data that can be tested directly in the browser.

Generating test variants

Produce several design variants of a flow in parallel, for example onboarding or checkout, and prepare them for usability tests or A/B experiments with minimal adjustments.

Turning design tokens into code

Structure colours, typography, spacing and radii from your design system as tokens and convert them into CSS variables, Tailwind configuration or theme files for component libraries.

Checking accessibility

Examine prototypes for contrast, semantic HTML, keyboard navigation, focus order and ARIA attributes and have concrete WCAG-based improvements applied directly in the code. Issues are fixed before reaching engineering.

Designing microinteractions

Describe transitions, animations and feedback states and implement them in CSS or JavaScript, so you can judge timing and effect early in the real medium rather than in a drawing tool.

Synthesising research

Cluster notes from interviews and usability tests, surface patterns and pain points and derive prioritised design hypotheses that feed straight into the next prototype iteration.

Possible hands-on projects

Onboarding prototype

A multi-step onboarding flow as a web app with a progress indicator, validation and saved inputs, ready for moderated usability testing.

Token converter

A small tool that reads exported design tokens and generates CSS variables, a colour palette with contrast ratios and a preview page.

Component playground

An overview page showing your design system’s buttons, forms and cards in every state, including light and dark mode. It doubles as a living reference.

Prerequisites

Basic JavaScript or TypeScript skills and an understanding of common web concepts such as components, APIs and databases. Technically minded business users can follow along well too. You have experience in UX or UI design and with common design tools; no programming skills are required, although a basic understanding of HTML and CSS helps.

Technical requirements

A laptop with an up-to-date Chromium-based browser or Firefox, a Bolt account (a paid plan for intensive use) and a free GitHub account.

Data protection & compliance

Prototypes often contain unreleased product ideas and research data from participants: you learn to pseudonymise interview notes in line with the GDPR, clarify rights to fonts, images and generated assets and plan early for the European Accessibility Act.

Suggested dates

All dates are suggestions – your preferred date is always possible.

  • Thu, 26 November 2026 Online Request
  • Thu, 10 December 2026 Stuttgart Request
  • Thu, 7 January 2027 Online Request
  • Mon, 11 January 2027 Berlin Request
  • Mon, 25 January 2027 Online Request
  • Tue, 2 February 2027 Munich Request

Frequently asked questions

Do I need a local development environment for Bolt?

No. Thanks to WebContainers, package installation, dev server and terminal all run in the browser, so nothing needs to be installed locally. Only when you want to develop a project long term or integrate it into an existing toolchain does exporting to GitHub and working in a local editor pay off. We practise both in the course.

How is Bolt different from Lovable?

Both generate web apps from prompts. Bolt offers more freedom in choosing a framework and exposes code, terminal and file tree very directly, which suits developers who want to stay close to the code. Lovable relies on a fixed React stack with a stronger focus on design iteration and Supabase. The right choice depends on project and team.

Can I build mobile apps with Bolt?

Yes. Through the Expo integration you can generate React Native prototypes and test them on your phone with Expo Go. This works well for simple apps and clickable prototypes. Native device features, app store publishing and complex offline logic usually call for local development, and the course explains where that boundary lies.

Do I need to know how to code as a designer?

No. You describe interfaces and behaviour in plain language, with sketches or screenshots, and the AI tool generates the code. It helps to understand basic terms such as component, state or CSS class so you can steer precisely. We cover these concepts hands-on in the course, so you can adapt and evolve prototypes on your own.

Can the engineering team reuse the prototype code?

Sometimes, but more often it serves as a precise specification. Prototypes are optimised for speed, not for security, performance or maintainability. If you use the same component library and tokens as the product from the outset, reuse becomes much more likely. In the course you work out how to design hand-offs that benefit both sides.

How much does “Bolt for UX Designers” cost?

The course costs a flat €949 plus VAT per participant – whether online or on-site. This includes 1 training day(s) with a live trainer, course materials, a lab environment and a certificate of attendance.

Can I suggest my own date?

Yes. Our suggested dates are just a guide. In the request form you can always describe your preferred date or period in free text – we check availability and confirm within one working day.

Is the course online or on-site?

Both are possible: live online in a virtual classroom or on-site in Munich, Salzburg, Berlin, Augsburg, Hanover, Bremen, Stuttgart or Kaiserslautern. We can also run the course exclusively for your team.

More courses for UX Designers

More Bolt courses

All 10 Bolt courses

Bolt · MunichBolt · SalzburgBolt · BerlinBolt · AugsburgBolt · HanoverBolt · BremenBolt · StuttgartBolt · KaiserslauternBolt · Online