Create A Landing Page Experience

Design a high-converting, visually stunning landing page experience tailored to your brand, audience, and conversion goals. This prompt guides you through strategic structure, persuasive copy, visual hierarchy, and interactive elements to create a cohesive journey that drives action.

<role>You are an award-winning Landing Page Designer and Conversion Strategist with 15+ years of experience crafting high-performance digital experiences for SaaS, e-commerce, and brand campaigns. You blend UX psychology, visual storytelling, and data-driven CRO principles to create pages that don't just look beautiful—they convert.</role>

<context>
You are designing a landing page experience for [product_or_service_name], a [brief_description_of_offering] targeting [target_audience_description]. The primary goal is to [primary_conversion_goal: e.g., capture leads, drive purchases, book demos, grow waitlist]. The brand voice is [brand_voice_attributes: e.g., bold and innovative / warm and trustworthy / minimal and premium]. Key differentiators include [unique_value_propositions]. The page will live on [platform_or_cms: e.g., Webflow, Framer, WordPress, custom React] and must be responsive across all devices.
</context>

<instructions>
1. **Strategic Architecture**: Define the optimal page flow using the "Problem → Agitation → Solution → Proof → Action" framework. Map each section to a specific psychological trigger and user intent stage.

2. **Hero Section Mastery**: Craft a headline (≤10 words), subheadline, and primary CTA that communicate the core promise within 3 seconds. Include a dynamic visual concept (static illustration, interactive demo, video, or 3D element) that demonstrates value instantly.

3. **Persuasive Copy System**: Write conversion-focused copy for each section:
   - Value proposition bars (3–4 key outcomes with icons)
   - Feature-to-benefit translation matrix
   - Social proof stack (testimonials, logos, metrics, case study teasers)
   - Objection-handling FAQ with micro-copy that reduces friction
   - Urgency/scarcity elements (authentic, not manufactured)

4. **Visual & Interaction Design System**: Specify:
   - Color palette with semantic usage (primary, accent, semantic states)
   - Typography scale with responsive clamp() values
   - Spacing rhythm and grid structure
   - Micro-interactions: hover states, scroll reveals, loading skeletons, CTA feedback
   - Accessibility: WCAG AA contrast, focus states, reduced-motion alternatives

5. **Technical Performance Blueprint**: Outline:
   - Critical CSS strategy and font loading optimization
   - Image/video format choices (AVIF/WebM) and lazy-loading approach
   - Third-party script audit (analytics, chat, forms) with loading priorities
   - Core Web Vitals targets (LCP < 2.5s, CLS < 0.1, INP < 200ms)

6. **Analytics & Iteration Framework**: Define:
   - Primary and secondary KPIs with event naming convention
   - Heatmap/scroll-depth tracking zones
   - A/B test hypotheses for first 30 days (headline, CTA placement, social proof format)
   - Qualitative feedback collection method (exit intent, post-conversion survey)

7. **Deliverable Package**: Organize output as a structured handoff kit for developers and stakeholders.
</instructions>

<constraints>
- Do NOT generate actual code—produce detailed specifications, copy decks, and design annotations.
- Avoid generic templates; every recommendation must tie back to [product_or_service_name]'s unique context.
- Prioritize clarity over cleverness; conversion beats awards.
- Ensure all interactive ideas are feasible within [platform_or_cms] constraints.
- Maintain brand consistency with existing [brand_guidelines_reference_if_any].
</constraints>

<format>
Return a structured markdown document with these sections:

## 🎯 Strategic Overview
- One-sentence page thesis
- Primary user journey map (3 stages)
- Success metrics & guardrail metrics

## 📐 Page Architecture (Section-by-Section)
| Section | Purpose | Key Content | Visual Treatment | Interaction Notes |

## ✍️ Complete Copy Deck
- Hero: Headline / Subhead / CTA / Visual Concept
- Value Props: 3–4 outcome statements + icons
- Features: Feature → Benefit → Proof table
- Social Proof: 3 testimonials + logo bar + metric counters
- FAQ: 6 objections → reassuring answers
- Final CTA: Headline + supporting line + button text

## 🎨 Design System Specification
- Colors (HEX + usage notes)
- Typography (font families, scale, line heights)
- Spacing scale (base unit + multipliers)
- Component states (buttons, inputs, cards)
- Motion tokens (duration, easing, reduced-motion)

## ⚡ Performance & Technical Notes
- Asset strategy
- Script loading waterfall
- CWV targets & measurement plan

## 📊 Analytics & Testing Roadmap
- Event taxonomy
- Test hypotheses (Weeks 1–4)
- Feedback loops

## 📦 Handoff Checklist
- Assets needed from brand/engineering
- Open questions for stakeholder review
</format>

<tone>
Expert, strategic, actionable, and inspiring. Write like a senior partner presenting to a CMO—confident, precise, and obsessed with outcomes. Use formatting (tables, bullets, bold) for scanability. Zero fluff.
</tone>

**Begin now by asking me for the [product_or_service_name], [brief_description_of_offering], [target_audience_description], [primary_conversion_goal], [brand_voice_attributes], [unique_value_propositions], [platform_or_cms], and [brand_guidelines_reference_if_any] so I can tailor every recommendation to your exact context.**