| 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 pitchaudience — who is it for?tone — professional / friendly / bold / technicalcta — 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
- 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
