Interact — Lead-Gen Quiz
Quiz FunnelQuiz-as-lead-magnet: giant black headline, a violet 'Make a quiz' CTA, and a builder mockup that promises cover → questions → result → email gate.
- Mood
- Marketer-friendly, conversion-obsessed, approachable. A quiz built to turn traffic into email leads — a personality/result payoff traded for an email.
- Colors
- White canvas, heavy black display type, a signature periwinkle/violet accent on CTAs and highlights. Clean, high-contrast, one bold accent.
- Type
- Very large tight black sans headline (huge, two lines), muted gray subhead carrying a metric ('40% lead conversion rate'), sans everywhere. Confidence through scale.
- Layout
- FLOW-FIRST quiz funnel: (1) COVER — title + subtitle + big Start button; (2) QUESTIONS — one question, 2–4 image/text option cards, auto-advance, progress dots; (3) EMAIL-GATE — capture before payoff; (4) RESULT — personalized outcome + tailored CTA/offer. Marketing homepage: centered giant headline, subhead with a conversion stat, violet CTA, then a tilted builder-UI mockup below the fold.
- Motion
- Option-card hover lift, auto-advance slide between questions, progress fill, result-reveal fade, counters on stats.
- Texture
- Bright and flat with soft card shadows, rounded option cards, a subtle device/browser frame around the builder mockup.
- Imagery
- Generate: a light quiz-builder UI mockup (cover screen, question editor with content/design tabs, publish button), quiz cover cards with a big title + start button, multiple-choice option cards, and a personality/result screen that ends in an email-capture card. Tool: GPT-Image for the builder + quiz UI mockups; kie-ai Flux for cover-card background art.
- Don't
- No dark backgrounds, no more than one accent hue, no dense paragraphs, no forms before the result tease. Don't bury the Start button or the email gate.
Use in a session
interact-quiz
Tell Claude: build [my thing] using swipe ref interact-quiz
Full recreation prompt
Recreate a landing page in the "Interact — Lead-Gen Quiz" style (Quiz Funnel). This is a VIBE / STYLE-TRANSFER task, not a clone: apply the design DNA below to MY content and section structure, do not copy the reference's copy or exact layout. For this archetype the LAYOUT field carries the funnel/quiz FLOW — preserve that conversion structure, not just the look.
Design DNA:
- Mood: Marketer-friendly, conversion-obsessed, approachable. A quiz built to turn traffic into email leads — a personality/result payoff traded for an email.
- Colors: White canvas, heavy black display type, a signature periwinkle/violet accent on CTAs and highlights. Clean, high-contrast, one bold accent.
- Typography: Very large tight black sans headline (huge, two lines), muted gray subhead carrying a metric ('40% lead conversion rate'), sans everywhere. Confidence through scale.
- Layout: FLOW-FIRST quiz funnel: (1) COVER — title + subtitle + big Start button; (2) QUESTIONS — one question, 2–4 image/text option cards, auto-advance, progress dots; (3) EMAIL-GATE — capture before payoff; (4) RESULT — personalized outcome + tailored CTA/offer. Marketing homepage: centered giant headline, subhead with a conversion stat, violet CTA, then a tilted builder-UI mockup below the fold.
- Motion: Option-card hover lift, auto-advance slide between questions, progress fill, result-reveal fade, counters on stats.
- Texture: Bright and flat with soft card shadows, rounded option cards, a subtle device/browser frame around the builder mockup.
- Avoid: No dark backgrounds, no more than one accent hue, no dense paragraphs, no forms before the result tease. Don't bury the Start button or the email gate.
Imagery (generate real assets, do not use placeholders): Generate: a light quiz-builder UI mockup (cover screen, question editor with content/design tabs, publish button), quiz cover cards with a big title + start button, multiple-choice option cards, and a personality/result screen that ends in an email-capture card. Tool: GPT-Image for the builder + quiz UI mockups; kie-ai Flux for cover-card background art.
Reference exemplar: https://www.tryinteract.com. Build the funnel around the content I give you next, faithfully channeling this aesthetic and this flow, and generate the matching imagery described above.