Landing Page Generator
Generate complete, high-converting landing pages from a product/service brief. Outputs production-ready HTML/CSS that's mobile-responsive and optimized for conversions.
How to Use
/landing-page-generator "SaaS project management tool for remote teams, $29/mo, free trial"
/landing-page-generator brief.txt
/landing-page-generator "Freelance web developer portfolio — book a call CTA"
Provide as much context as possible:
- What the product/service is
- Target audience
- Primary CTA (sign up, buy, book a call, download)
- Pricing (if applicable)
- Key features/benefits
- Brand colors (optional, defaults to professional blue/dark theme)
Page Generation Process
Step 1: Analyze the Brief
Extract:
- Product type: SaaS, physical product, service, portfolio, lead magnet, event
- Target audience: Who is this for?
- Primary CTA: What action should visitors take?
- Value proposition: Why should they care?
- Tone: Professional, casual, bold, minimal, luxurious
Step 2: Select Page Template
Based on product type:
| Type | Sections | Typical Length |
|---|---|---|
| SaaS | Hero, Features, How It Works, Pricing, Testimonials, FAQ, CTA | Long |
| Service | Hero, Services, Process, Portfolio, Testimonials, CTA | Medium |
| Portfolio | Hero, Work Samples, About, Services, Contact | Medium |
| Lead Magnet | Hero, Benefits, Social Proof, Form, CTA | Short |
| E-commerce | Hero, Product Features, Gallery, Reviews, Buy CTA | Medium |
| Event | Hero, Speakers/Details, Schedule, Tickets, FAQ | Medium |
Step 3: Generate the Page
Create a single self-contained HTML file with embedded CSS. No external dependencies except Google Fonts.
Required sections (adapt to product type):
Hero Section
- Headline: Clear value proposition (max 10 words)
- Subheadline: Supporting detail (max 25 words)
- CTA button: High-contrast, action-oriented text ("Start Free Trial", not "Submit")
- Optional: Hero image placeholder or background
- Optional: Social proof badge ("Trusted by 10,000+ teams")
Features/Benefits
- 3-4 feature cards with icons (use Unicode/emoji icons)
- Each card: Icon + Feature name + 1-2 sentence benefit (focus on outcome, not feature)
- Grid layout: 3 columns on desktop, 1 on mobile
Social Proof
- 2-3 testimonial cards with:
- Quote text
- Name and title/company
- Star rating (if applicable)
- Optional: Logo bar of client/partner logos (placeholder boxes with company names)
How It Works (if applicable)
- 3-step process with numbered steps
- Step title + brief description
- Visual connector between steps
Pricing (if applicable)
- 1-3 pricing tiers in card format
- Highlight the recommended tier
- Feature comparison list
- CTA button on each tier
FAQ
- 4-6 common questions
- Accordion-style (click to expand) using pure CSS/HTML <details>
Final CTA
- Repeat the primary CTA with urgency
- Different angle from hero (address remaining objections)
- Strong contrasting background
Step 4: Design System
Apply these design principles:
Typography:
- Font:
Interfrom Google Fonts (clean, modern, high readability) - Heading scale: 3rem, 2rem, 1.5rem, 1.25rem
- Body: 1rem / 1.6 line-height
- Max line width: 65ch for readability
Colors (default, override with brand colors if provided):
--primary: #2563eb; /* Blue - CTAs, links */
--primary-dark: #1d4ed8; /* Hover state */
--bg: #ffffff; /* Background */
--bg-alt: #f8fafc; /* Alternating section bg */
--text: #1e293b; /* Body text */
--text-light: #64748b; /* Secondary text */
--accent: #f59e0b; /* Highlights, badges */
Layout:
- Max width: 1200px, centered
- Section padding: 80px vertical (48px on mobile)
- Consistent spacing scale: 4, 8, 16, 24, 32, 48, 64, 80px
Responsive breakpoints:
- Desktop: 1024px+
- Tablet: 768px - 1023px
- Mobile: < 768px
Step 5: Conversion Optimization
Apply these conversion principles to the generated page:
- Above the fold: Headline + CTA visible without scrolling
- Single CTA focus: One primary action, repeated 2-3 times throughout
- Contrast ratio: CTA buttons must have WCAG AA contrast (4.5:1 minimum)
- Loading speed: No external JS, minimal CSS, no images (placeholders only)
- Scannability: Users should understand the offer in 5 seconds
- Objection handling: FAQ and testimonials address common concerns
- Urgency/scarcity: Optional — only if authentic ("Limited beta spots", not fake countdowns)
Step 6: Output
Save to output/landing-page/:
output/landing-page/
index.html # Complete self-contained page
README.md # Customization guide for the client
README.md includes:
- How to customize colors (CSS variables at top of file)
- How to replace placeholder content
- How to add real images
- How to connect forms to their email service
- How to deploy (Netlify drag-and-drop, GitHub Pages, any static host)
Step 7: Present to User
Show:
- Brief summary of what was generated
- Key design decisions made
- File location
- Suggestions for what the client should customize (images, testimonials, specific copy)
Quality Standards
- Page loads with no external dependencies except Google Fonts
- Fully responsive at 320px, 768px, and 1200px widths
- All CTA buttons have hover states
- Color contrast meets WCAG AA
- Page has proper
<meta>viewport tag - Semantic HTML (
<header>,<main>,<section>,<footer>) - No horizontal scroll at any breakpoint
- FAQ sections are interactive (expand/collapse)
- Total HTML file size under 50KB