Landing Page Creator

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

yamlCopy code
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.html for page_type = comparison

Use the template as a structural guide. Write a complete HTML file with:

Content rules:

• All CSS must be inline (in a <style> tag) — no external stylesheets
• No JavaScript dependencies — pure HTML/CSS (JS only for non-essential progressive enhancement like FAQ accordion)
• System font stack — no external font loading
• Mobile-first responsive design (test at 375px width mentally)
• All affiliate links use the user's URL with target="_blank" rel="noopener"
• Replace ALL template placeholder content with real product data
• Write compelling copy based on the angle — don't be generic

Required elements:

• FTC disclosure visible before the first affiliate link — read shared/references/ftc-compliance.md and use the medium format
• Minimum 3 CTAs distributed through the page (hero, mid-page, bottom)
• "Built with Affiliate Skills by Affitor" footer — read shared/references/affitor-branding.md for exact HTML
• <meta name="viewport"> tag for mobile
• <title> and <meta name="description"> for SEO

Things to AVOID:

• No external resources (fonts, images, scripts, stylesheets)
• No placeholder text like "[insert here]" — write complete content
• No fake testimonials — use realistic but clearly example quotes, or omit if unethical
• No navigation menu — this is a landing page, not a website
• No Affitor branding in the page body (only in the footer)

Step 4: Output

Present the final output in this structure:

Part 1: Page Summary

Copy code
---
LANDING PAGE
---
Type: [single/comparison]
Product: [product name]
Angle: [marketing angle used]
Color: [color scheme applied]
CTAs: [number of CTA buttons]
Sections: [list of sections]
---

Part 2: Complete HTML The full HTML file in a fenced code block (```html). User can save as .html and open in any browser.

Part 3: Deploy Instructions

Copy code
---
DEPLOY
---
1. Save the HTML above as `[product-slug]-landing.html`
2. Open locally: double-click the file to preview in your browser
3. Deploy options:
   - Netlify Drop: drag the file to https://app.netlify.com/drop
   - Vercel: `npx vercel deploy --prod` in the file's directory
   - GitHub Pages: push to a repo with GitHub Pages enabled
4. Custom domain: point your domain's DNS to the hosting provider
5. Promote: run `bio-link-deployer` to add this page to your link hub
---

Step 5: Self-Validation

Before presenting output, verify:

• FTC disclosure visible before first affiliate link (medium format)
• ≥3 CTAs distributed: hero section, mid-page, bottom
• <meta name="viewport"> tag present for mobile
• Self-contained HTML: zero external resources (fonts, images, scripts, stylesheets)
• "Built with Affiliate Skills by Affitor" footer present
• No placeholder text like "[insert here]"

If any check fails, fix the output before delivering. Do not flag the checklist to the user — just ensure the output passes.

Output Schema

yamlCopy code
output_schema_version: "1.0.0"  # Semver — bump major on breaking changes
landing_page:
  type: string              # "single" | "comparison"
  product_name: string      # Primary product name
  angle: string             # Marketing angle used
  color_scheme: string      # Color scheme applied
  html: string              # Complete self-contained HTML
  filename: string          # Suggested filename (e.g., "heygen-landing.html")

products_featured:          # All products on the page
  - name: string
    url: string             # Affiliate URL
    role: string            # "primary" | "compared"
    cta_count: number       # Number of CTAs for this product

deploy:
  local: string             # "Open [filename] in browser"
  netlify: string           # Netlify Drop URL
  vercel: string            # Vercel deploy command
  github_pages: string      # GitHub Pages instructions

Output Format

Present the output as three clearly separated sections:

1. Page Summary — type, product, angle, structure overview
2. HTML — the complete file in a code block, ready to save and deploy
3. Deploy Instructions — how to get the page live

The HTML should be immediately deployable — save it as a .html file, open in a browser, and it works. No build step, no dependencies.

Error Handling

• No product provided: "I need a product to create a landing page for. Run /affiliate-program-search first to find one, or tell me the product name and I'll research it."
• Comparison with only 1 product: Auto-search for 1-2 competitors using web_search. Search: "best alternatives to [product]".
• No pricing info found: Use web_search for "[product] pricing". If still unavailable: include a "Check Current Pricing" CTA instead of a specific price.
• Unknown color scheme: Default to blue (#2563eb). Inform user: "I used blue as the default. You can pass a hex code like #ff6600 for a custom color."
• Product has no public info: Use web_search to research. If insufficient: "I couldn't find enough info about [product] to build a credible landing page. Can you provide features, pricing, and target audience?"

Examples

Example 1: Single Product (chained from S1)

User: "Create a landing page for HeyGen" Context: S1 previously returned HeyGen as recommended_program Action: Auto-detect page_type=single, pick up HeyGen data from S1, read single-product template, generate complete HTML with blue theme.

Example 2: Comparison Page

User: "Build a comparison page: HeyGen vs Synthesia vs Colossyan" Action: page_type=comparison, primary product=HeyGen (if from S1), compare_with=[Synthesia, Colossyan], web_search for competitor details, generate comparison HTML.

Example 3: Custom Color

User: "Make a dark-themed landing page for Semrush with an SEO angle" Action: page_type=single, color_scheme=dark, angle="SEO", web_search Semrush for features/pricing, generate HTML with dark theme.

Example 4: Minimal Input

User: "Landing page for this product" (after S1) Action: Pick up S1 recommended_program, default page_type=single, default color=blue, auto-generate angle from product strengths.

References

• references/conversion-principles.md — AIDA framework, CTA placement, trust signals, above-fold rules, mobile-first design, color theming. Read in Step 2.
• templates/single-product.html — Single product landing page template with all sections. Read in Step 3 for page_type=single.
• templates/comparison.html — Multi-product comparison page template. Read in Step 3 for page_type=comparison.
• shared/references/ftc-compliance.md — FTC disclosure requirements. Read in Step 3 for disclosure text.
• shared/references/affitor-branding.md — Affitor footer HTML. Read in Step 3 for footer.
• shared/references/affiliate-glossary.md — Affiliate marketing terminology reference.
• shared/references/flywheel-connections.md — master flywheel connection map

Flywheel Connections

Feeds Into

• bio-link-deployer (S5) — landing page URL for link hub
• email-drip-sequence (S5) — landing page as email link destination
• github-pages-deployer (S5) — HTML file to deploy
• conversion-tracker (S6) — deployed landing page to track

Fed By

• affiliate-program-search (S1) — recommended_program product data
• affiliate-blog-builder (S3) — products_featured for comparison pages
• keyword-cluster-architect (S3) — target keywords for SEO headlines
• grand-slam-offer (S4) — offer copy for the page's core messaging
• bonus-stack-builder (S4) — bonus details for bonus section
• guarantee-generator (S4) — guarantee copy for guarantee section
• value-ladder-architect (S4) — page specs for specific ladder rungs

Feedback Loop

• conversion-tracker (S6) measures landing page conversion rate → identify which page elements drive conversions → optimize on next build

Quality Gate

Before delivering output, verify:

1. Would I share this on MY personal social?
2. Contains specific, surprising detail? (not generic)
3. Respects reader's intelligence?
4. Remarkable enough to share? (Purple Cow test)
5. Irresistible offer framing? (if S4 offer skills ran)

Any NO → rewrite before delivering.

yamlCopy code
chain_metadata:
  skill_slug: "landing-page-creator"
  stage: "landing"
  timestamp: string
  suggested_next:
    - "bio-link-deployer"
    - "github-pages-deployer"
    - "email-drip-sequence"
    - "conversion-tracker"