/landing-page-creator

name: landing-page-creator
description: >
  Build high-converting affiliate landing pages as single self-contained HTML files.
  Triggers on: "create a landing page for", "build a landing page", "product landing page",
  "affiliate landing page", "comparison page for", "vs page", "single product page",
  "conversion page", "sales page for affiliate", "landing page HTML", "build me a page for",
  "create a page to promote [product]", "I need a landing page", "make a page for [product]".
license: MIT
version: "1.0.0"
tags: ["affiliate-marketing", "landing-pages", "conversion", "offers", "html", "tailwind"]
compatibility: "Claude Code, ChatGPT, Gemini CLI, Cursor, Windsurf, OpenClaw, any AI agent"
metadata:
  author: affitor
  version: "1.0"
  stage: S4-Landing

Landing Page Creator

Build dedicated affiliate landing pages that convert. Output is a single self-contained HTML file with inline CSS — no build step, no dependencies, mobile-responsive, deployable anywhere. Supports two page types: single product spotlight and multi-product comparison.

Stage

S4: Landing — Higher conversion than blog links because the entire page is designed around one goal: convert a visitor into a click. Landing pages are the bridge between traffic sources (social, email, ads) and the affiliate product.

When to Use

• User wants a dedicated page to promote an affiliate product
• User wants a comparison/vs page for 2-3 competing products
• User has a product from S1 (affiliate-program-search) and needs a conversion page
• User says anything like "landing page", "sales page", "product page", "comparison page", "vs page"
• User wants to promote an affiliate product beyond blog content
• User needs a deployable HTML page for an affiliate campaign

Input Schema

product:                    # REQUIRED — the affiliate product to feature
  name: string              # Product name (e.g., "HeyGen")
  description: string       # What it does
  reward_value: string      # Commission (e.g., "30% recurring")
  url: string               # Affiliate link URL
  reward_type: string       # "recurring" | "one-time" | "tiered"
  cookie_days: number       # Cookie duration
  tags: string[]            # e.g., ["ai", "video", "saas"]

page_type: string           # OPTIONAL — "single" | "comparison"
                            # Default: "single"

compare_with: object[]      # OPTIONAL — products for comparison page
  - name: string            # Competitor name
    description: string     # Brief description
    url: string             # URL (non-affiliate OK)
    pricing: string         # Starting price

angle: string               # OPTIONAL — marketing angle / hook
                            # e.g., "fastest", "cheapest", "best for beginners"
                            # Default: auto-generated from product strengths

color_scheme: string        # OPTIONAL — "blue" | "green" | "purple" | "orange" | "dark" | hex code
                            # Default: "blue" (#2563eb)

**Chaining from S1**: If `affiliate-program-search` was run earlier in the conversation, automatically pick up `recommended_program` from its output as the `product` input. The field mapping:

• `recommended_program.name` → `product.name`
• `recommended_program.description` → `product.description`
• `recommended_program.reward_value` → `product.reward_value`
• `recommended_program.url` → `product.url`
• `recommended_program.reward_type` → `product.reward_type`
• `recommended_program.cookie_days` → `product.cookie_days`
• `recommended_program.tags` → `product.tags`

**Chaining from S3**: If `affiliate-blog-builder` was run, use `products_featured` for the comparison page's `compare_with` list.

If the user says "now make a landing page for it" after running S1 — use the recommended program. No need to ask again.

Workflow

Step 1: Gather Product Info

If `product` data is available from S1 chaining or user input, use it directly. Otherwise:

1. Use `web_search` to research the product: `"[product name] features pricing review"` 2. Gather: name, description, key features (3-6), pricing, target audience, top competitors 3. If `page_type = comparison` and `compare_with` is empty:

• Search: `"best alternatives to [product.name]" OR "[product.name] vs"`
• Find 1-2 competitors with pricing, features, and positioning

Step 2: Plan Page Structure

Read `references/conversion-principles.md` for AIDA framework, CTA placement, and design rules.

Choose `page_type` if not specified:

• If user mentions "vs", "compare", "comparison", or provides `compare_with` → `comparison`
• Otherwise → `single`

Plan the page sections based on type:

**Single product:** 1. FTC disclosure (above fold) 2. Hero: headline + subtitle + primary CTA + trust signal 3. Trust bar: rating, user count, press mention 4. Features: 3-column grid (3-6 features as benefits) 5. Pricing: price + CTA 6. Testimonial: one strong quote 7. Who is this for: audience list 8. FAQ: 4-6 questions addressing objections 9. Final CTA: headline + CTA button 10. Footer: Affitor branding

**Comparison:** 1. FTC disclosure (above fold) 2. Hero: "[A] vs [B]" headline + subtitle 3. Comparison table: feature rows with winner highlights 4. Individual product sections: description + pros/cons + CTA each 5. Winner callout: clear recommendation with reasoning 6. FAQ: 4-6 comparison-specific questions 7. Dual CTA: buttons for top 2 products 8. Footer: Affitor branding

Map the user's `color_scheme` to CSS custom properties:

• `blue` → `--color-primary: #2563eb`
• `green` → `--color-primary: #059669`
• `purple` → `--color-primary: #7c3aed`
• `orange` → `--color-primary: #ea580c`
• `dark` → `--color-primary: #3b82f6; --color-bg: #0f172a; --color-surface: #1e293b; --color-text: #f1f5f9`
• Hex code → use directly as `--color-primary`

Step 3: Write Full HTML

Read the matching template from `templates/`:

• `templates/single-product.html` for `page_type = single`
• `templates/comparison