/squeeze-page-builder

name: squeeze-page-builder
description: >
  Build email capture landing pages (squeeze pages) as single self-contained HTML files.
  Triggers on: "build a squeeze page", "email capture page", "lead magnet page",
  "create an opt-in page", "build an email list page", "lead capture landing page",
  "create a freebie page", "build a page to collect emails", "opt-in landing page",
  "email signup page for [product/niche]", "create a lead magnet landing page",
  "build a page that captures emails before sending to affiliate offer".
license: MIT
version: "1.0.0"
tags: ["affiliate-marketing", "landing-pages", "conversion", "offers", "lead-generation", "squeeze-page"]
compatibility: "Claude Code, ChatGPT, Gemini CLI, Cursor, Windsurf, OpenClaw, any AI agent"
metadata:
  author: affitor
  version: "1.0"
  stage: S4-Landing

Squeeze Page Builder

Build email capture landing pages (squeeze pages) as self-contained HTML files with no dependencies. The page offers a high-value lead magnet (ebook, checklist, template, or cheat sheet) in exchange for the visitor's email address, then redirects to an affiliate offer on form submission. Output is a single deployable `.html` file.

When to Use

• User wants to build an email list while simultaneously promoting an affiliate product
• User wants to warm up cold traffic before sending to an affiliate offer
• User says "squeeze page", "opt-in page", "lead magnet", "email capture", "freebie page"
• User wants a two-step funnel: email capture → affiliate redirect
• User has ad traffic and needs a landing page that collects leads before the affiliate click

Workflow

Step 1: Define the Lead Magnet and Offer

A squeeze page requires two things: 1. **The lead magnet** — the free thing offered in exchange for the email 2. **The thank-you redirect** — where the visitor goes after submitting (the affiliate link)

**Detect from user input. If not specified, ask:**

• "What free resource will you offer? (e.g., a checklist, ebook, template, cheat sheet, mini-course)"
• "What affiliate product should visitors see after they sign up?"

**Lead magnet selection guide** — suggest based on niche if user is unsure: | Niche | Best lead magnet type | |---|---| | Marketing / SEO | Checklist, swipe file, templates | | Finance / Investing | Calculator, cheat sheet, guide | | Health / Fitness | Meal plan, workout plan, tracker | | Software / SaaS | Tutorial, quick-start guide, resource list | | Business / Productivity | Templates, SOPs, spreadsheets |

**Lead magnet title formula** (high-converting):

• "[N]-Point Checklist: How to [Achieve Desired Outcome]"
• "The Free [Niche] Starter Kit: [X] Templates for [Goal]"
• "Download: The Ultimate [Topic] Guide ([Year])"
• "[Adjective] Cheat Sheet: [X] Ways to [Outcome] in [Timeframe]"

Step 2: Craft the Page Strategy

Read `references/conversion-principles.md` for squeeze page-specific principles.

Key conversion levers for squeeze pages: 1. **Clarity over cleverness** — the visitor should know in 3 seconds what they get and what they must do 2. **Above-fold completeness** — the opt-in form must be visible without scrolling on mobile 3. **Single goal** — no navigation, no external links, no distractions 4. **Social proof** — even one strong number ("Join 4,200+ marketers") dramatically lifts conversion 5. **Privacy signal** — "No spam. Unsubscribe anytime." reduces friction at the form

Plan the page sections: 1. **Header** — logo/brand name only (no nav links) 2. **Hero section** (above fold):

• Headline: the transformation or outcome the lead magnet delivers
• Sub-headline: what's inside + who it's for
• Lead magnet visual (styled HTML mockup — no images needed)
• Email form with single field + submit button
• Privacy micro-copy: "No spam. Unsubscribe anytime."

3. **What's Inside** — 3-5 bullet points describing lead magnet contents 4. **Social Proof** — subscriber count, testimonial, or press mention 5. **Who This Is For** — 3-4 bullet points identifying the ideal reader 6. **Second opt-in form** — repeat the form lower on the page for scrollers 7. **Footer** — FTC note, privacy policy placeholder, Affitor attribution

**Thank-you redirect behavior:** The form submission should redirect to the affiliate URL. Since this is a static HTML file with no backend, use a JavaScript pattern:

form.addEventListener('submit', function(e) {
  e.preventDefault();
  // In production: POST email to your ESP (Mailchimp, ConvertKit, etc.)
  // Then redirect to affiliate offer:
  window.location.href = '[affiliate_url]';
});

Include a comment block explaining how to wire this to a real ESP (Mailchimp embed code, ConvertKit, etc.).

Step 3: Write the Full HTML

Build a complete, self-contained HTML file:

**Copy requirements:**

Headline (8-12 words, result-focused):

• "Get the Free [Lead Magnet Title] and Start [Outcome] Today"
• "Download: [Lead Magnet Title] — Free for [Audience]"
• "The [Adjective] Way to [Outcome]: Free [Format] Inside"

Sub-headline (15-25 words):

• "[N] [templates/steps/strategies] that [specific audience] use to [specific outcome] — completely free."

Button copy (action-oriented, not "Submit"):

• "Send Me the Free [Lead Magnet] →"
• "Get Instant Access →"
• "Download the Free [Format] Now →"

**HTML structure requirements:**

• Single `<style>` block — no external CSS
• Mobile-first responsive (375px base, 768px breakpoint)
• System font stack: `-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`
• Color scheme from user input or default: primary `#2563eb`, accent warm tone
• Lead magnet mockup: a styled `<div>` that looks like a book/checklist cover — pure CSS, no images
• Form: single email input + submit button (no name field — lower friction)
• No navigation links that could take the visitor off the page
• `<meta name="robots" content="noindex">` — squeeze pages shouldn't be indexed by Google

**JavaScript:**

• Form validation (email format check)
• Redirect to