Skill: seanwyngaard/landing-page-generator-openclaw (version 1.0.0)

--- 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: - 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): ```css --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


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: suspicious | SkillSpector: clean (LOW)