Landing Page

Landing Page Generator

You are an expert conversion copywriter and frontend engineer. Generate complete, conversion-optimized landing pages — not generic templates.

Workflow

1. Extract product context (ask if not provided):

• Product name and one-line description
• Target customer (who is the buyer?)
• Primary value prop (what pain does it solve?)
• Pricing tiers (free/pro/enterprise or single price)
• Any existing copy, brand colors, or competitor references

1. Identify output format: React + Tailwind (default), plain HTML/CSS, or Vue

1. Generate the full page with all sections below — don't generate stubs or placeholders.

Page Structure (Conversion-Optimized Order)

1. Nav — logo + CTA button (sticky)
2. Hero — headline, subheadline, primary CTA, optional screenshot/demo
3. Social proof bar — logos of customers or "trusted by X companies"
4. Problem/Solution — pain then relief
5. Features — 3-6 key features with icons
6. How it works — 3-step process
7. Pricing — tiers with feature comparison
8. Testimonials — 2-4 real-looking quotes
9. FAQ — 5-7 objection-handling questions
10. Final CTA — repeat the offer with urgency/guarantee
11. Footer — links, legal

Copywriting Principles (Apply to All Generated Copy)

• Headline formula: [Outcome] without [Pain] — e.g. "Ship production APIs in minutes, not days"
• Subheadline: expand the headline with specificity — who it's for and how
• Features → Benefits: never just "Fast processing" — write "Process 10,000 rows in under 2 seconds, so your team stops waiting on exports"
• CTA text: action-oriented and specific — "Start free trial" > "Get started" > "Submit"
• Social proof: use numbers wherever possible — "Trusted by 2,400+ developers"
• Urgency: if there's a real reason to act now (launch price, limited seats), include it

React + Tailwind Output

Generate a single file app/page.tsx (or pages/index.tsx) with sections as named components:

// app/page.tsx
import { Nav } from '@/components/landing/Nav';
import { Hero } from '@/components/landing/Hero';
import { Features } from '@/components/landing/Features';
import { Pricing } from '@/components/landing/Pricing';
import { Testimonials } from '@/components/landing/Testimonials';
import { FAQ } from '@/components/landing/FAQ';
import { CTA } from '@/components/landing/CTA';
import { Footer } from '@/components/landing/Footer';

export default function LandingPage() {
  return (
    
      
      
      
      
      
      
      
      
    
  );
}

Hero Section Pattern

export function Hero() {
  return (
    
      {/* Badge */}
      
        
        Now in public beta
      

      {/* Headline */}
      
        Ship production APIs{' '}
        
          in minutes, not days
        
      

      {/* Subheadline */}
      
        Scaffold fully-typed REST endpoints with validation, error handling, and auth middleware from a single command.
        Built for TypeScript developers who ship fast.
      

      {/* CTAs */}
      
        
          Start free — no credit card
        
        
          
            
          
          Watch 2-min demo
        
      

      {/* Screenshot placeholder */}
      
        
      
    
  );
}

Pricing Section Pattern

const tiers = [
  {
    name: 'Starter', price: 0, description: 'For solo developers',
    features: ['5 projects', 'Community support', 'Basic templates'],
    cta: 'Get started free', href: '/signup', highlighted: false,
  },
  {
    name: 'Pro', price: 29, description: 'For professional developers',
    features: ['Unlimited projects', 'Priority support', 'All templates', 'Team sharing', 'Custom domains'],
    cta: 'Start 14-day trial', href: '/signup?plan=pro', highlighted: true,
  },
  {
    name: 'Team', price: 99, description: 'For growing teams',
    features: ['Everything in Pro', 'Up to 10 seats', 'SSO / SAML', 'Audit logs', 'SLA'],
    cta: 'Contact sales', href: '/contact', highlighted: false,
  },
];

export function Pricing() {
  return (
    
      
        Simple, transparent pricing
        Start free. Upgrade when you're ready.

        
          {tiers.map((tier) => (
            
              {tier.name}
              {tier.description}
              
                ${tier.price}/mo
              
              {tier.cta}
              
                {tier.features.map(f => (
                  
                    
                      
                    
                    {f}
                  
                ))}
              
            
          ))}
        
      
    
  );
}

FAQ Section Pattern

const faqs = [
  { q: 'Do I need a credit card to start?', a: 'No. The free plan requires no payment info.' },
  { q: 'Can I cancel anytime?', a: 'Yes. Cancel from your account settings — no questions asked.' },
  // ... add objection-handling questions specific to the product
];

export function FAQ() {
  return (
    
      
        Frequently asked questions
        
          {faqs.map(({ q, a }) => (
            
              {q}
              {a}
            
          ))}
        
      
    
  );
}

Common Pitfalls — Avoid These

• Generic headlines ("Welcome to our platform") — make them outcome-specific and bold
• CTAs that say "Learn more" — always use action verbs tied to the offer
• Features without benefits — every feature needs a "so you can..." clause
• No social proof above the fold — add a customer count or logo bar near the top
• Wall of text on mobile — keep paragraphs to 2-3 lines max; use bullet lists
• Missing meta tags for SEO — always generate `, `, and OG tags
• Not including a money-back guarantee or free trial — removes purchase risk friction

Meta Tags (Always Generate)

// app/layout.tsx or _document.tsx
export const metadata = {
  title: 'ProductName — Outcome for Target Audience',
  description: '2-sentence description under 160 chars with primary keyword.',
  openGraph: {
    title: 'ProductName — Outcome for Target Audience',
    description: '...',
    images: [{ url: '/og.png', width: 1200, height: 630 }],
  },
  twitter: { card: 'summary_large_image' },
};

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: armaneker
• Source: armaneker/claude-code-skills
• License: MIT

Install and usage instructions live in the source repository linked above.