Bolt.new workshop teaches rapid prototyping for user research
A Bolt.new premium customer workshop walks through building A/B landing page variants with tokenized preview URLs and an admin dashboard for stakeholder feedback using Vite, design markdown, and dev mode components.
Score breakdown
Developers and product teams can use this Bolt.new workflow to validate competing UI directions with real stakeholders before shipping, reducing design risk without needing a separate prototyping tool.
- 01Workshop is led by William Sayer, customer enablement lead at Bolt, alongside customer success engineer Erica.
- 02The example project is an Airbnb-inspired experience landing page built with two layout variants: one photo-focused and one host-focused.
- 03Bolt.new uses Vite under the hood, enabling dev-only components that are hidden when the site is published publicly.
The workshop, hosted on the StackBlitz YouTube channel and presented by Bolt.new's William Sayer and customer success engineer Erica, focuses on a practical user research workflow inside Bolt.new. The central use case is an Airbnb-style experience landing page for a local activity, where product teams might want to test competing layout directions — such as prioritizing photos, the host's profile, or the activity description — before committing to a final design. Attendees build two distinct page variants and use a dev mode toggle (enabled by Bolt's use of Vite under the hood) to switch between them during development, while keeping those dev-only components hidden on the published public site.
The second half of the session introduces a tokenized URL system: unique token strings are appended to Bolt-hosted site URLs and distributed to stakeholders for user testing.
The second half of the session introduces a tokenized URL system: unique token strings are appended to Bolt-hosted site URLs and distributed to stakeholders for user testing. An accompanying admin dashboard lets teams track engagement and collect in-app feedback from those preview links. Additional skills covered include saving a design markdown file to the project root and referencing it in Project Knowledge as a design source of truth, using prompt iteration and the Enhance Prompt feature to refine layouts, and integrating GitHub workflows into the process.
Key facts
- 01Workshop is led by William Sayer, customer enablement lead at Bolt, alongside customer success engineer Erica.
- 02The example project is an Airbnb-inspired experience landing page built with two layout variants: one photo-focused and one host-focused.
- 03Bolt.new uses Vite under the hood, enabling dev-only components that are hidden when the site is published publicly.
- 04A dev mode toggle lets developers switch between page variants during development without exposing them to end users.
- 05A tokenized URL system appends unique token strings to Bolt-hosted URLs for distributing prototypes to stakeholders.
- 06An admin dashboard is built to track stakeholder engagement and collect in-app feedback from tokenized preview links.
- 07Skills covered include design markdown files, Project Knowledge, Vite, A/B testing, tokenized URLs, prompt enhancement, and GitHub workflows.