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:
- 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
1---2name: landing-page-generator-23description: Generate high-converting, mobile-responsive landing pages from a brief. Use when building landing pages, sales pages, or marketing pages for clients.4---56# Landing Page Generator78Generate complete, high-converting landing pages from a product/service brief. Outputs production-ready HTML/CSS that's mobile-responsive and optimized for conversions.910## How to Use1112```13/landing-page-generator "SaaS project management tool for remote teams, $29/mo, free trial"14/landing-page-generator brief.txt15/landing-page-generator "Freelance web developer portfolio — book a call CTA"16```1718Provide as much context as possible:19- What the product/service is20- Target audience21- Primary CTA (sign up, buy, book a call, download)22- Pricing (if applicable)23- Key features/benefits24- Brand colors (optional, defaults to professional blue/dark theme)2526## Page Generation Process2728### Step 1: Analyze the Brief2930Extract:31- **Product type**: SaaS, physical product, service, portfolio, lead magnet, event32- **Target audience**: Who is this for?33- **Primary CTA**: What action should visitors take?34- **Value proposition**: Why should they care?35- **Tone**: Professional, casual, bold, minimal, luxurious3637### Step 2: Select Page Template3839Based on product type:4041| Type | Sections | Typical Length |42|------|----------|---------------|43| SaaS | Hero, Features, How It Works, Pricing, Testimonials, FAQ, CTA | Long |44| Service | Hero, Services, Process, Portfolio, Testimonials, CTA | Medium |45| Portfolio | Hero, Work Samples, About, Services, Contact | Medium |46| Lead Magnet | Hero, Benefits, Social Proof, Form, CTA | Short |47| E-commerce | Hero, Product Features, Gallery, Reviews, Buy CTA | Medium |48| Event | Hero, Speakers/Details, Schedule, Tickets, FAQ | Medium |4950### Step 3: Generate the Page5152Create a single self-contained HTML file with embedded CSS. No external dependencies except Google Fonts.5354**Required sections** (adapt to product type):5556#### Hero Section57```58- Headline: Clear value proposition (max 10 words)59- Subheadline: Supporting detail (max 25 words)60- CTA button: High-contrast, action-oriented text ("Start Free Trial", not "Submit")61- Optional: Hero image placeholder or background62- Optional: Social proof badge ("Trusted by 10,000+ teams")63```6465#### Features/Benefits66```67- 3-4 feature cards with icons (use Unicode/emoji icons)68- Each card: Icon + Feature name + 1-2 sentence benefit (focus on outcome, not feature)69- Grid layout: 3 columns on desktop, 1 on mobile70```7172#### Social Proof73```74- 2-3 testimonial cards with:75 - Quote text76 - Name and title/company77 - Star rating (if applicable)78- Optional: Logo bar of client/partner logos (placeholder boxes with company names)79```8081#### How It Works (if applicable)82```83- 3-step process with numbered steps84- Step title + brief description85- Visual connector between steps86```8788#### Pricing (if applicable)89```90- 1-3 pricing tiers in card format91- Highlight the recommended tier92- Feature comparison list93- CTA button on each tier94```9596#### FAQ97```98- 4-6 common questions99- Accordion-style (click to expand) using pure CSS/HTML <details>100```101102#### Final CTA103```104- Repeat the primary CTA with urgency105- Different angle from hero (address remaining objections)106- Strong contrasting background107```108109### Step 4: Design System110111Apply these design principles:112113**Typography**:114- Font: `Inter` from Google Fonts (clean, modern, high readability)115- Heading scale: 3rem, 2rem, 1.5rem, 1.25rem116- Body: 1rem / 1.6 line-height117- Max line width: 65ch for readability118119**Colors** (default, override with brand colors if provided):120```css121--primary: #2563eb; /* Blue - CTAs, links */122--primary-dark: #1d4ed8; /* Hover state */123--bg: #ffffff; /* Background */124--bg-alt: #f8fafc; /* Alternating section bg */125--text: #1e293b; /* Body text */126--text-light: #64748b; /* Secondary text */127--accent: #f59e0b; /* Highlights, badges */128```129130**Layout**:131- Max width: 1200px, centered132- Section padding: 80px vertical (48px on mobile)133- Consistent spacing scale: 4, 8, 16, 24, 32, 48, 64, 80px134135**Responsive breakpoints**:136- Desktop: 1024px+137- Tablet: 768px - 1023px138- Mobile: < 768px139140### Step 5: Conversion Optimization141142Apply these conversion principles to the generated page:1431441. **Above the fold**: Headline + CTA visible without scrolling1452. **Single CTA focus**: One primary action, repeated 2-3 times throughout1463. **Contrast ratio**: CTA buttons must have WCAG AA contrast (4.5:1 minimum)1474. **Loading speed**: No external JS, minimal CSS, no images (placeholders only)1485. **Scannability**: Users should understand the offer in 5 seconds1496. **Objection handling**: FAQ and testimonials address common concerns1507. **Urgency/scarcity**: Optional — only if authentic ("Limited beta spots", not fake countdowns)151152### Step 6: Output153154Save to `output/landing-page/`:155156```157output/landing-page/158 index.html # Complete self-contained page159 README.md # Customization guide for the client160```161162**`README.md`** includes:163- How to customize colors (CSS variables at top of file)164- How to replace placeholder content165- How to add real images166- How to connect forms to their email service167- How to deploy (Netlify drag-and-drop, GitHub Pages, any static host)168169### Step 7: Present to User170171Show:1721. Brief summary of what was generated1732. Key design decisions made1743. File location1754. Suggestions for what the client should customize (images, testimonials, specific copy)176177## Quality Standards178179- [ ] Page loads with no external dependencies except Google Fonts180- [ ] Fully responsive at 320px, 768px, and 1200px widths181- [ ] All CTA buttons have hover states182- [ ] Color contrast meets WCAG AA183- [ ] Page has proper `<meta>` viewport tag184- [ ] Semantic HTML (`<header>`, `<main>`, `<section>`, `<footer>`)185- [ ] No horizontal scroll at any breakpoint186- [ ] FAQ sections are interactive (expand/collapse)187- [ ] Total HTML file size under 50KB
modbender