What this prompt does
This prompt generates a complete B2B SaaS onboarding flow spec from seven inputs: product name, product type, activation metric, setup steps, team size range, step count, and your target framework. It does not produce generic wireframe advice -- it outputs a structured, step-by-step design with actual UI components, field definitions, and framework code for the wizard itself.
The template enforces industry-proven constraints directly in the system instruction: no gatekeeping product access behind completed onboarding, no mandatory video tutorials, and explicit protection of the team invite step because that step drives viral growth. Those anti-patterns are baked into the prompt instructions, so the AI will push back or route around them even if you give it a vague product description.
What makes it useful is the activation metric variable. When you define your aha moment concretely -- for example, 'first report generated' or 'first API call returning data' -- the prompt threads that goal through the first-value moment, the completion celebration, and the persistent checklist, keeping all seven output sections aligned toward the same north-star behavior.
The [product_type] variable does real work: 'project analytics SaaS' produces a data-source-first setup flow, while 'team collaboration tool' shifts the wizard to lead with the invite step and defer integrations. Fill it precisely and the step ordering in sections 1 through 3 will reflect your actual user priority.
When to use it
- You are building or redesigning the onboarding flow for a new SaaS product and need a full UI spec before writing a line of code.
- Your activation rate is low and you want to audit the current flow against a properly structured B2B onboarding pattern.
- You are pitching a product redesign to stakeholders and need a detailed, annotated prototype description quickly.
- Your engineering team needs a component-level brief for the step wizard, including progress tracking logic and save state behavior.
- You are a solo founder validating an onboarding concept before hiring a designer.
- You need a data import UX that handles CSV, API, and manual entry in one consistent flow.
Example output
Product name: Trackflow
Product type: B2B project analytics SaaS
Activation metric: First dashboard with live data
Setup steps: Connect data source, invite team, create first project
Team size: 5-50
Step count: 4
Framework: React
Welcome Screen:
Heading: "Welcome, [First Name]. Let us get Trackflow live in 8 minutes."
Role selector: Admin / Analyst / Viewer
Progress estimate: dynamically recalculates based on role
Step 1 -- Connect Data Source
Title: "Where does your project data live?"
Options: Jira (OAuth), CSV upload, Manual entry
Skip label: "I'll connect later -- start with sample data"
Tooltip: "You can connect multiple sources after setup."
Step 2 -- Invite Your Team
Bulk email textarea, shareable invite link (one click copy)
Role dropdown per invitee: Admin / Member / Viewer
Helper: "Teams that invite 3+ members reach their first dashboard faster."
Step 3 -- Create Your First Project
Title: "Name your first project"
Fields: Project name, description (optional), data source assignment
Skip: "Use the default demo project"
Step 4 -- First-Value Moment
Auto-navigate to first populated dashboard
Banner: "Your first live dashboard is ready."
CTA: "Explore your data"
Completion:
Confetti animation, checkmark sweep
Next steps: Set up alerts, explore templates, invite more team members
Persistent checklist (sidebar):
[x] Connect data source
[x] Invite team
[ ] Set up your first alert
[ ] Explore the template library
React wizard shell (section 8):
<StepWizard steps={steps} persistKey="trackflow-onboarding" />
-- progress stored in localStorage, resumed on next login
Pro tips
- Be specific with [activation_metric] -- "user sees value" is useless; "user publishes their first integration" gives the AI a concrete hook to thread through sections 5 and 6. The more precise, the tighter the first-value moment and completion celebration become.
- Set [step_count] to 3-5 for B2B. The prompt rules prevent mandatory completion, but fewer steps means less temptation to add scope creep in the output. If your setup genuinely requires 7+ steps, split them into a primary flow and a deferred 'advanced setup' checklist.
- Use the persistent checklist output (section 7) as your product backlog input -- it tells you exactly what the AI considers secondary setup tasks, which maps directly to your post-onboarding email sequence.
- Pair this with a component library context. If you prefix the prompt with 'We use Shadcn/UI and Tailwind CSS' or 'We use Vuetify 3,' the framework code in section 8 will target your actual stack rather than producing abstract pseudocode.
- Run the prompt twice with different [team_size_range] values -- the invite step and role assignment UI should differ meaningfully between a 2-10 person team and a 50-500 person enterprise. If the outputs look identical, your product likely needs two distinct onboarding paths.
