ISby Informeek Studio·Made with Claude·11 November 2026
LiveClick Continue through every step, then go back
The prompt
Claude · Claude Opus 5.5
Design a stepper UI for a three-step onboarding form in a white card (24px radius, soft shadow) on a pale grey page (#f2f5f9). At the top, three numbered circles joined by thin bars. The current step is a navy (#0b1324) circle with a soft ring; finished steps turn green (#0f9d76) and show a tick; the bar between two steps fills with green from left to right when you move on. Steps: 1, "Name your workspace" with fields for workspace name and address; 2, "How big is your team?" with four choice tiles in a 2 by 2 grid (Just me, 2 to 10, 11 to 50, 50+) where the selected tile gets a navy outline; 3, "Invite your team" with email and role fields. Each step has a small green "Step 1 of 3" label. Steps slide sideways and fade as you move forward or back, and the card height animates to fit each step. Buttons: Back (hidden on step 1) and Continue, which becomes Finish on step 3. After Finish, show a success state with a green tick, "You're all set" and a "Start over" button. Stack the choice tiles in one column on phones.
Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.
Use it in three steps
Copy the prompt with the button above.
Paste it into your tool, such as v0, Lovable, Bolt or Claude.
Make it yours by renaming the steps and fields after your own sign-up flow.
About this stepper UI design
A stepper UI tells people how long a form is before they give up on it. This one shows three numbered steps at the top of an onboarding card, and as you move on, the bar between steps fills with green and the finished step swaps its number for a tick. Nobody has to wonder how much is left.
Each step slides in from the side while the old one slides away, and the card smoothly changes height to fit, so short and long steps never leave awkward gaps. The second step uses choice tiles instead of a dropdown, which is faster to answer on a phone. A success screen closes the flow instead of dumping people back at step one.
Why the prompt works
It spells out every state of a step: current, finished and upcoming.
It writes the real fields and options, so the form looks like a product.
It describes the transitions, sideways slide and animated height.
It designs the ending, a success state with a way to start over.
Where to use it
Sign-up and onboarding flows, checkout, booking forms and setup wizards. Three to five steps is the sweet spot.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
We use cookies to measure how the site is used and, if you allow it, to show advertising. Prompts you copy and previews you try are never collected. See our privacy policy.