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: Inter from 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:

1. Above the fold: Headline + CTA visible without scrolling
2. Single CTA focus: One primary action, repeated 2-3 times throughout
3. Contrast ratio: CTA buttons must have WCAG AA contrast (4.5:1 minimum)
4. Loading speed: No external JS, minimal CSS, no images (placeholders only)
5. Scannability: Users should understand the offer in 5 seconds
6. Objection handling: FAQ and testimonials address common concerns
7. 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:

1. Brief summary of what was generated
2. Key design decisions made
3. File location
4. 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