Preferences picker screen
Multi-step onboarding screen with a progress bar, a use-case question, and a 3×2 selection card grid. Two cards pre-selected with blue state highlights. Left side shows a full-bleed background image. Copy and paste into Bolt, Claude Code, Replit, or Lovable for any SaaS or app onboarding flow.
About this vibe coding template
A two-column onboarding step template for the use-case or persona selection screen that most SaaS products and web apps include in their signup flow. The left column shows a full-bleed background image that fills the panel with visual depth, making a functional screen feel designed. The right column handles the interaction: a thin progress bar showing step position in the flow, a direct question as the headline, a one-line prompt below it, a 3×2 grid of selection cards, and a full-width blue CTA at the bottom. Each card shows a small icon, a label, and a circular checkbox. Two cards open pre-selected with blue borders, a light blue icon tint, and a filled blue checkbox. Unselected cards use neutral grey borders and empty checkboxes. Paste into Bolt, Claude Code, Replit, or Lovable and ask the AI to update the card labels, icons, pre-selected state, and question copy to match your onboarding flow.
Common questions about this template
Where in a signup flow should I use a preferences picker screen?
A preferences picker works best on the second or third step of onboarding, after account creation and before the user reaches the main product. Use it to capture the user's primary use case, role, or goals so the product can personalize the first-run experience and improve activation rates.
How do I change which cards are pre-selected?
Ask your vibe coding tool to move the selected class from one card to another. Adding the selected class to a card gives it a blue border, a light blue icon background, and a filled checkbox. Removing it returns the card to the default neutral grey state.
How do I add or remove a card option from the grid?
Ask Bolt, Claude Code, Replit, or Lovable to add a new card inside the grid and copy the structure of an existing card. To remove a card, ask the AI to delete the corresponding card element. The 3-column grid will reflow automatically.
How do I update the progress bar to show a different step?
Ask your vibe coding tool to update the width of the progress fill element. The fill is set to 50% by default to indicate step 2 of 4. Change it to 25% for step 1, 75% for step 3, or 100% for step 4, and update the step label text below the bar to match.
Use this AI coding template for
- ·Use-case and persona selection steps in multi-step SaaS onboarding flows
- ·Preference picker screens for AI tools and apps that personalize the product experience
- ·Any segmentation step that needs a clean selection card grid with clear visual states