DZMing/claude-code-config

Landing Page — Quickly Generate High-Conversion Landing Pages

Trigger Conditions

• User says "help me with a landing page", "generate a homepage", or "create a landing page"
• The product needs external presentation but has no public page yet
• The product needs to be sold and requires an introduction page

Workflow

1. Collect Information: Product name, one-line description, 3 core features, target users, pricing
2. Generate Structure: Hero → Problem → Solution → Features → Pricing → FAQ → CTA
3. Write Copy: Focus on user pain points, do not list features, write about the results users get
4. Generate Code: Next.js + Tailwind + shadcn/ui, directly runnable
5. Check Conversion: Ensure every section has a CTA, main button color contrast is sufficient

Output Specifications

• Complete app/page.tsx file
• All sections in one file (Landing pages don't need component splitting)
• Mobile-first (sm: breakpoint)
• Include <meta> SEO tags

Example

Input:

I built an AI writing assistant that helps users overcome writer's block for $9/month, targeting freelance writers.

Output Copy Structure:

Hero: "Never stare at a blank page again" — [Start Free Trial]
Problem: 80% of writing time is wasted on "not knowing where to start"
Solution: AI gives you the first sentence, you write the rest
Features: Smart Opening Generation / Style Matching / Outline Generation
Pricing: $9/month, 7-day free trial, cancel anytime
FAQ: What's the difference from ChatGPT? Will it replace my writing?

Code Snippet:

// Hero Section
export function Hero() {
  return (
    <section className="flex flex-col items-center py-24 text-center">
      <h1 className="text-5xl font-bold tracking-tight max-w-2xl">
        Never stare at a blank page again
      </h1>
      <p className="mt-4 text-xl text-muted-foreground max-w-lg">
        AI gives you the first sentence, you write the rest. 80% of writing time is wasted on the beginning — we solve that.
      </p>
      <Button size="lg" className="mt-8">Start 7-Day Free Trial</Button>
    </section>
  )
}