name: cro-landing-page description: > Generates conversion-optimized landing pages using a 9-section framework. Produces mobile-first, fast-loading pages with strategic CTA placement and social proof. version: 2.0 author: Motion_Viz tags: [cro, landing-page, conversion, web]
CRO Landing Page Builder
Purpose
Build landing pages that convert visitors into leads/customers. INPUT: Product description, target audience, value proposition. OUTPUT: Complete landing page with 9 CRO-optimized sections.
When to Use This Skill
- When building a new landing page
- When redesigning an existing page for better conversions
- When a client says "I need a page that converts"
Rules (Non-Negotiable)
- Mobile-first: Design for phone screens, then scale up
- One primary CTA per viewport (no competing actions)
- Social proof must appear before the fold ends
- Page load target: under 2 seconds
- Maximum 3 font weights across entire page
- Every section must have a clear purpose (no filler)
- CTA button text must be action-specific, not generic BAD: "Submit" "Click Here" "Learn More" GOOD: "Start Free Trial" "Get My Audit" "Book a Call"
Architecture (9-Section Framework)
Section 1: Hero
- Headline: 8 words max. States the transformation
- Subheadline: 1 sentence. Who it's for + outcome
- Primary CTA button
- Social proof snippet (logos, stats, or testimonial)
- Optional: Hero image/video (right side on desktop)
Section 2: Problem
- 3 pain points the audience experiences
- Use their language, not industry jargon
- Create tension before the solution
Section 3: Solution
- How your product/service solves the problems
- 3 benefits (not features)
- Each benefit: icon + headline + 1 sentence
Section 4: How It Works
- 3-step process (numbered)
- Each step: number + title + description
- Makes the path to value feel simple
Section 5: Social Proof
- Testimonials with name, role, company, photo
- Metrics/results if available
- Logos of recognizable clients
Section 6: Features (Detail)
- Deeper feature breakdown for informed buyers
- Feature cards with icons
- Comparison table if competitors exist
Section 7: Pricing / Offer
- Clear pricing tiers (if applicable)
- Highlight recommended tier
- What's included in each tier
- Money-back guarantee or risk reversal
Section 8: FAQ
- 5-7 questions. Address objections, not just info
- Accordion format (expandable)
- Last FAQ should address pricing/value
Section 9: Final CTA
- Restate the transformation
- Urgency or scarcity (if authentic)
- Same primary CTA as hero
- Secondary option (e.g., "Not ready? Join newsletter")
Checklist (AI Self-Verification)
- All 9 sections present and in correct order
- Mobile responsive (test at 375px width)
- Primary CTA visible in every viewport
- Social proof appears before the fold
- No generic CTA text used
- Page loads under 2 seconds (no unoptimized images)
- Meta title and description generated
- Open Graph tags included