Landing Page Creator Agent Skill

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:

• Use web_search to research the product: "[product name] features pricing review"
• Gather: name, description, key features (3-6), pricing, target audience, top competitors
• 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:

• FTC disclosure (above fold)
• Hero: headline + subtitle + primary CTA + trust signal
• Trust bar: rating, user count, press mention
• Features: 3-column grid (3-6 features as benefits)
• Pricing: price + CTA
• Testimonial: one strong quote
• Who is this for: audience list
• FAQ: 4-6 questions addressing objections
• Final CTA: headline + CTA button

10. Footer: Affitor branding

Comparison:

• FTC disclosure (above fold)
• Hero: "[A] vs [B]" headline + subtitle
• Comparison table: feature rows with winner highlights
• Individual product sections: description + pros/cons + CTA each
• Winner callout: clear recommendation with reasoning
• FAQ: 4-6 comparison-specific questions
• Dual CTA: buttons for top 2 products
• 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

---
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

---
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

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:

• Page Summary — type, product, angle, structure overview
• HTML — the complete file in a code block, ready to save and deploy
• 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:

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

Any NO → rewrite before delivering.

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