landing-gen

name	landing-gen
description	Full landing page generator. One prompt → hero, features, pricing, testimonials, FAQ, footer sections as production-quality HTML/CSS or Next.js components. Chains impeccable-frontend-design + seo + banner-design + animation. Includes OG image, meta tags, and mobile-first responsive layout.
argument-hint	[product name] [tagline] [target audience]
layer	orchestrator
category	design
triggers	["landing page","landing gen","generate landing","marketing page","product page","hero section","pricing page","saas landing"]
linksTo	["impeccable-frontend-design","seo","banner-design","animation","brand","design-system"]
inputs	Product name, tagline (1-line pitch), target audience, tone (professional/friendly/bold/technical), primary CTA text, whether to include pricing section, and output stack (html or nextjs).
outputs	landing/index.html — complete landing page (or Next.js component) landing/og-image.html — 1200×630 social share image landing/styles.css — design tokens + component styles
preferredNextSkills	["saas-bootstrap","brandkit-gen","seo"]
fallbackSkills	["impeccable-frontend-design","seo"]
memoryReadPolicy	selective
memoryWritePolicy	always
sideEffects	Creates landing/ directory with index.html (or .tsx), styles.css, and og-image.html. May also generate a Next.js component tree if stack=nextjs.

Landing Page Generator

One prompt → full conversion-optimized landing page.

What Gets Generated

File	Content
landing/index.html	Complete landing page (or Next.js component)
landing/og-image.html	1200×630 social share image
landing/styles.css	Design tokens + component styles

---

Phase 0 — Discovery

Parse $ARGUMENTS for:

• productName — what is it?
• tagline — 1-line pitch
• audience — who is it for?
• tone — professional / friendly / bold / technical
• cta — primary action (default: "Get started free")
• hasPricing — include pricing section? (default: yes)
• stack — "html" (default) or "nextjs"

If not enough info, ask 3 targeted questions.

---

Phase 1 — Page Architecture

1. Invoke impeccable-frontend-design — Design the conversion funnel and section order based on product type. Apply hero rules (benefit-first headline, single CTA, no stock photos).

Design the conversion funnel — section order depends on product type:

SaaS / Tool:

Navbar → Hero → Social proof → Features (3-col) →
How it works → Testimonials → Pricing → FAQ → CTA banner → Footer

Developer Tool / API:

Navbar → Hero + code snippet → Features → Integration logos →
Docs preview → Pricing → Footer

Consumer / B2C:

Navbar → Hero (emotional) → Problem → Solution →
Features → Testimonials → CTA → Footer

Hero Rules (from impeccable-frontend-design)

• Headline: max 8 words, benefit-first, not feature-first
• Subheadline: 1–2 sentences expanding the benefit
• CTA: single button, action verb + object ("Start building" not "Submit")
• Hero visual: mockup, screenshot, or abstract illustration — NO stock photos of people smiling
• Social proof line below CTA: "X companies use [product]" or star rating