Landing Page Generator
by @seanwyngaard
Generate high-converting, mobile-responsive landing pages from a brief. Use when building landing pages, sales pages, or marketing pages for clients.
clawhub install landing-page-generator-openclawπ About This Skill
name: landing-page-generator description: Generate high-converting, mobile-responsive landing pages from a brief. Use when building landing pages, sales pages, or marketing pages for clients. argument-hint: "[product-or-service-description]" allowed-tools: Read, Write, Edit, Grep, Glob, Bash
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:
Page Generation Process
Step 1: Analyze the Brief
Extract:
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
#### 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:
Inter from Google Fonts (clean, modern, high 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:
Responsive breakpoints:
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:
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
π Tips & Best Practices
- 4-6 common questions
Accordion-style (click to expand) using pure CSS/HTML
#### 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:
Inter from Google Fonts (clean, modern, high 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:
Responsive breakpoints:
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:
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)