What this prompt does
This prompt generates a complete, production-oriented insurance quote wizard spec — not a generic form layout, but a step-by-step UX system with specific interaction rules baked in. It encodes hard-won insurance industry knowledge directly into the output: one question group per screen, a sticky real-time price preview, expandable coverage explanations, and a save-and-resume path that removes commitment anxiety.
What makes it work is the anti-pattern block. The template explicitly forbids the mistakes that kill insurance conversion: wall-of-questions single-page forms, legal jargon without plain-English tooltips, hidden fees revealed only at the end, and "call us" as the only exit. The AI cannot accidentally generate those patterns because they are ruled out before generation begins.
The output covers the full funnel — entry CTA with trust badges through comparison view and save-and-resume — so you get a coherent system, not disconnected screen ideas.
When to use it
- You are building a new insurance product landing + quote flow from scratch and need a full UX spec before touching code.
- You are redesigning an existing quote form with high drop-off at step 2 or 3 and want a structured diagnostic and replacement spec.
- You need framework-specific code (React, Vue, Svelte) for an animated multi-step form with live price updating.
- You are pitching an insurance client and need a credible, detailed flow document to present within hours.
- You want a side-by-side good/better/best plan comparison component with real interaction behavior defined.
- You are building a white-label quoting tool and need a base UX template that works across multiple insurance verticals.
Example output
Entry CTA — "Get your home insurance quote in 4 minutes"
Trust badges: Lloyd's registered · 4.8/5 Trustpilot · 256-bit encrypted
Step 1/4 — Your Home
"What kind of property are you insuring?"
[Detached] [Semi-detached] [Flat] [Other]
Pre-selected: Detached (most common)
Step 2/4 — Coverage Dates
Start date: [today + 1 day default]
"What is your property's rebuild value?" [£240,000]
ⓘ "Not sure? Use our rebuild calculator →"
Sticky footer: Estimated premium £42/month — updates on each answer change
Step 3/4 — About You
Name, DOB, claims in last 5 years (tooltip: "A claim is...")
Step 4/4 — Your Quote
Good: £38/mo · Better: £47/mo · Best: £61/mo
[Each column expandable — "What does this cover?"]
[Buy now] [Save quote — email me this]
// Code output: set [framework] to React, Vue, or Svelte — see FAQ for detail
Pro tips
- Set
[time_estimate]to an honest number (4–6 minutes for most flows) — the template uses it in the entry CTA. Inflated claims ("2 minutes") erode trust at the exact moment you are trying to build it. - For
[quote_steps], map your actual required data fields first, then group them thematically. Three to four steps covering property details, coverage dates, personal info, and results is the sweet spot — five or more and you need explicit progress recovery. - The
[framework]variable drives the code output. If you specify React, ask for hooks-based state withuseReducerfor multi-step form state — the prompt is framework-agnostic, so specificity here improves output quality meaningfully. - The real-time price preview is the highest-conversion element in the spec. When implementing, make sure the backend supports partial-quote pricing before step completion — without this, the preview becomes a UX lie.
- Pair this prompt with a dedicated accessibility pass: insurance quote forms must meet WCAG 2.1 AA (field label associations, error announcement via
aria-live, keyboard navigation for the comparison table). The template does not generate accessibility markup by default.
