What this prompt does
This prompt designs a 3-step SaaS onboarding wizard built to get a new user to value fast, specified tightly enough to build with real component structure, states, and copy. The three steps are workspace setup with inline validation, inviting teammates via email chips and bulk paste with role selection, and connecting the first integration with a success state. A persistent progress indicator and save-as-you-go mean a refresh never loses input, and each step has a skip option plus a completion moment.
The variables shape the flow to your product. [stack] (for example, React with Framer Motion) sets the component and animation conventions. [product] gives the wizard context so the copy and steps fit. [first_integration] defines what step three connects — Slack versus another tool changes the success state. [copy_tone] drives the microcopy throughout, so the empty, loading, and error messages all read in the voice you want.
When to use it
- You are building first-run onboarding and want a short, forgiving path to value
- You want workspace setup, teammate invites, and a first integration in three steps
- You need save-as-you-go so users who abandon and return keep their input
- You want a persistent progress indicator and a per-step skip option
- You need empty, loading, and error states for each step
- You want copy-ready microcopy in a specific tone
Example output
The model returns the step flow, the components, and example copy fenced and copy-ready. Step one is workspace setup (name, logo, industry) with inline validation; step two invites teammates via email chips and bulk paste with role selection; step three connects your first integration with a success state. A progress indicator, save-as-you-go persistence, per-step skip, a completion moment, and empty/loading/error states are all specified, with microcopy in your chosen tone.
Pro tips
- Insist on save-as-you-go (deliverable 4); users abandon and return, and losing input on refresh kills activation more than any missing feature
- Keep required fields minimal — every extra one bleeds users, so let steps be skippable where you can
- Set
[first_integration]to your real first connection so step three's success state matches that flow - Use
[copy_tone]to keep the microcopy consistent across empty, loading, and error states - Match
[stack]to your frontend so the components and any animation hooks are usable - Describe
[product]clearly so the wizard's context and example copy fit what users are actually onboarding into - Treat the completion moment as a pointer to first value, not just confetti; it should hand the user a concrete next action inside the product
- Design the empty, loading, and error state for each step alongside the happy path, since a stalled integration connect is where users bounce
