E-commerce Pro
Three-step checkout flow
The prompt
Build a three-step checkout flow: contact, shipping, payment. Layout: two columns on desktop. Left column is the active step at max-width 560px. Right column is a sticky order summary at 380px that never collapses on desktop and becomes a collapsible bar pinned to the top on mobile. Completed steps collapse to a single summary line with an 'Edit' text link on the right. Order summary contents, always visible: line items with thumbnail, name, quantity…
157 more words behind Pro
Unlock all 24 promptsThe opening is above. Pro unlocks the full text — the structure, constraints and design tokens that do the real work.
About this prompt
A checkout that reduces abandonment through hierarchy and honesty about cost, not through dark patterns.
Tags:#light-mode#checkout#forms#accessible
Prompt Setup Guide
How to use this prompt & FAQs
Follow these simple steps to generate high-converting websites using Three-step checkout flow.
STEP 01
Copy System Prompt
Click the copy button above to grab the structured system prompt for "Three-step checkout flow".
STEP 02
Paste into AI Builder
Open Lovable, Bolt, Cursor, Claude, Replit and paste the system prompt into the composer or initial prompt box.
STEP 03
Generate & Refine
Replace any bracketed text like [App Name] with your specific details, then click generate.
Frequently Asked Questions
More like this