Landing Page Generator

What This Skill Does

The Landing Page Generator skill creates high-converting landing pages from a product description. It outputs complete Next.js/React components with section variants, copy frameworks, SEO optimization, and performance-first patterns. This skill is designed for marketers, designers, and product teams looking to quickly generate effective landing pages.

When to Use

• Generating hero sections with various styles.
• Creating feature sections with grids or cards.
• Building pricing tables with feature lists.
• Adding FAQ accordions with schema markup.
• Including testimonial sections.
• Designing CTA sections for conversions.

Key Features

• Generates 5 hero section variants.
• Offers 4 design styles with Tailwind class sets.
• Applies copy frameworks like AIDA, BAB, and PAS.Optimizes for LCP < 1s, CLS < 0.1, FID < 100ms.
• Outputs TSX components with Tailwind styles.
• Includes SEO meta tags.

Generate high-converting landing pages from a product description. Output complete Next.js/React components with multiple section variants, proven copy frameworks, SEO optimization, and performance-first patterns. Not lorem ipsum — actual copy that converts.

Target: LCP < 1s · CLS < 0.1 · FID < 100ms
Output: TSX components + Tailwind styles + SEO meta + copy variants

Core Capabilities

5 hero section variants (centered, split, gradient, video-bg, minimal) Feature sections (grid, alternating, cards with icons) Pricing tables (2–4 tiers with feature lists and toggle) FAQ accordion with schema markup Testimonials (grid, carousel, single-quote) CTA sections (banner, full-page, inline) Footer (simple, mega, minimal) 4 design styles with Tailwind class sets

Generation Workflow

Follow these steps in order for every landing page request:

Gather inputs — collect product name, tagline, audience, pain point, key benefit, pricing tiers, design style, and copy framework using the trigger format below. Ask only for missing fields. Analyze brand voice (recommended) — if the user has existing brand content (website copy, blog posts, marketing materials), run it through marketing-skill/content-production/scripts/brand_voice_analyzer.py to get a voice profile (formality, tone, perspective). Use the profile to inform design style and copy framework selection:

• formal + professional → enterprise style, AIDA framework
• casual + friendly → bold-startup style, BAB framework
• professional + authoritative → dark-saas style, PAS framework
• casual + conversational → clean-minimal style, BAB framework Select design style — map the user's choice (or infer from brand voice analysis) to one of the four Tailwind class sets in the Design Style Reference. Apply copy framework — write all headline and body copy using the chosen framework (PAS / AIDA / BAB) before generating components. Match the voice profile's formality and tone throughout. Generate sections in order — Hero → Features → Pricing → FAQ → Testimonials → CTA → Footer. Skip sections not relevant to the product. Validate against SEO checklist — run through every item in the SEO Checklist before outputting final code. Fix any gaps inline. Output final components — deliver complete, copy-paste-ready TSX files with all Tailwind classes, SEO meta, and structured data included.

Triggering This Skill

Product: [name] Tagline: [one sentence value prop] Target audience: [who they are] Key pain point: [what problem you solve] Key benefit: [primary outcome] Pricing tiers: [free/pro/enterprise or describe] Design style: dark-saas | clean-minimal | bold-startup | enterprise Copy framework: PAS | AIDA | BAB

Design Style Reference

Bold Startup headings: add font-black tracking-tight to all /

elements.

Copy Frameworks

PAS (Problem → Agitate → Solution) H1: Painful state they're in Sub: What happens if they don't fix it CTA: What you offer Example — H1: "Your team wastes 3 hours a day on manual reporting" / Sub: "Every hour spent on spreadsheets is an hour not closing deals. Your competitors are already automated." / CTA: "Automate your reports in 10 minutes →"

AIDA (Attention → Interest → Desire → Action) H1: Bold attention-grabbing statement → Sub: Interesting fact or benefit → Features: Desire-building proof points → CTA: Clear action

BAB (Before → After → Bridge) H1: "[Before state] → [After state]" → Sub: "Here's how [product] bridges the gap" → Features: How it works (the bridge)

Representative Component: Hero (Centered Gradient — Dark SaaS)

Use this as the structural template for all hero variants. Swap layout classes, gradient direction, and image placement for split, video-bg, and minimal variants.

export function HeroCentered() { return ( <section className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-950 px-4 text-center"> <div className="absolute inset-0 bg-gradient-to-b from-violet-900/20 to-transparent" /> <div className="pointer-events-none absolute -top-40 left-1/2 h-[600px] w-[600px] -translate-x-1/2 rounded-full bg-violet-600/20 blur-3xl" /> <div className="relative z-10 max-w-4xl"> <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-violet-500/30 bg-violet-500/10 px-4 py-1.5 text-sm text-violet-300"> <span className="h-1.5 w-1.5 rounded-full bg-violet-400" /> Now in public beta </div> <h1 className="mb-6 text-5xl font-bold tracking-tight text-white md:text-7xl"> Ship faster.<br /> <span className="bg-gradient-to-r from-violet-400 to-pink-400 bg-clip-text text-transparent"> Break less. </span> </h1> <p className="mx-auto mb-10 max-w-2xl text-xl text-gray-400"> The deployment platform that catches errors before your users do. Zero config. Instant rollbacks. Real-time monitoring. </p> <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center"> <Button size="lg" className="bg-violet-600 text-white hover:bg-violet-500 px-8"> Start free trial </Button> <Button size="lg" variant="outline" className="border-gray-700 text-gray-300"> See how it works → </Button> </div> <p className="mt-4 text-sm text-gray-500">No credit card required · 14-day free trial</p> </div> </section> ) }

Other Section Patterns

Feature Section (Alternating)

Map over a features array with { title, description, image, badge }. Toggle layout direction with i % 2 === 1 ? "lg:flex-row-reverse" : "". Use with explicit width/height and rounded-2xl shadow-xl. Wrap in with max-w-6xl container.

Pricing Table

Map over a plans array with { name, price, description, features[], cta, highlighted }. Highlighted plan gets border-2 border-violet-500 bg-violet-950/50 ring-4 ring-violet-500/20; others get border border-gray-800 bg-gray-900. Render null price as "Custom". Use icon per feature row. Layout: grid gap-8 lg:grid-cols-3.

FAQ with Schema Markup

Inject FAQPage JSON-LD via </code> inside the section. Map FAQs with <code>{ q, a }</code> into shadcn <code><Accordion></code> with <code>type="single" collapsible</code>. Container