AgentSkillsCN

cro-landing-page

采用9个部分的框架，生成经过转化优化的着陆页。打造移动端优先、加载迅速的页面，合理布局CTA按钮，并融入社交证明元素。

SKILL.md
--- frontmatter
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)

  1. •Mobile-first: Design for phone screens, then scale up
  2. •One primary CTA per viewport (no competing actions)
  3. •Social proof must appear before the fold ends
  4. •Page load target: under 2 seconds
  5. •Maximum 3 font weights across entire page
  6. •Every section must have a clear purpose (no filler)
  7. •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