landing-page-creator

Files (6)

• LICENSE.txt
• SKILL.md
• openai.yaml · agents/
• conversion-principles.md · references/
• comparison.html · templates/
• single-product.html · templates/

SKILL.md (first lines)

# 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

```yaml
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:

From Affitor/affiliate-skills, MIT.

More from Affitor/affiliate-skills