# Landing Page Creator Agent Skill

> Build high-converting affiliate landing pages as single self-contained HTML files – no dependencies, mobile-responsive, deployable anywhere. Start free in seconds.

- Canonical: https://nanoskill.ai/ko/skills/landing-page-creator-agent-skill
- Markdown: https://nanoskill.ai/ko/skills/landing-page-creator-agent-skill.md
- Author: Affitor
- Published: 2026-09-11T02:30:00.000Z
- Updated: 2026-09-11T03:00:25.982Z
- Language: ko
- Source type: github
- Popularity signal: 511

## Sources

- https://github.com/Affitor/affiliate-skills/tree/main/skills/landing/landing-page-creator

## Install

```shell
npx skills add https://github.com/Affitor/affiliate-skills/tree/main/skills/landing/landing-page-creator
```

## About

The Landing Page Creator transforms affiliate product promotions into self-contained, high-converting HTML landing pages. Designed for affiliate marketers, it eliminates complex tools and coding by generating a single file that follows proven conversion principles like the AIDA framework. The result is a mobile-responsive, FTC-compliant page ready to drive clicks and sales.

As part of a chained workflow, it seamlessly integrates with other affiliate skills — automatically picking up product data from program searches or blog research. It supports two distinct page types: single product spotlights with hero sections, trust bars, and pricing tables; and side-by-side comparisons with feature matrices and winner callouts. Every page is built with strategic CTA placement and zero external dependencies, ensuring fast load times and full compatibility across devices.

From social media campaigns and email promotions to paid ads, the Landing Page Creator equips you with a deploy-anywhere asset. Save the HTML file, drag it to Netlify, or push it to GitHub Pages — your landing page is live in seconds. This speed and simplicity make it ideal for testing multiple angles, scaling affiliate offers, and maintaining full ownership of your content without monthly fees.

## Key features

- **Conversion-Focused Blueprint**: Pages leverage the AIDA framework with strategic CTA placement, trust signals, and FTC-compliant disclosures to maximize affiliate conversions.
- **Self-Contained HTML Output**: Produces a single, zero-dependency HTML file with inline CSS and system fonts – no build tools, no external resources, works in any browser.
- **Single & Comparison Modes**: Automatically structures pages for single product spotlights or side-by-side comparisons with winner callouts and dual CTAs.
- **One-Click Deployment**: Deploy anywhere: drag to Netlify Drop, push to GitHub Pages, or run a single Vercel command – no server setup required.

## Use cases

- **Generate a dedicated product landing page**: After finding an affiliate program, instantly create a tailored landing page with trust signals and optimized CTAs to drive clicks and conversions.
- **Build a multi-product comparison page**: Create side-by-side comparisons of competing products, highlighting strengths, features, and a winner recommendation to help visitors decide.
- **Deploy a self-contained HTML file instantly**: Save the output as an HTML file and go live in seconds via Netlify Drop, Vercel, or GitHub Pages – perfect for campaign launches and A/B testing.

## Skill definition

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

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

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

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

## FAQ

### What is the Landing Page Creator?

It's an AI agent skill that builds high-converting affiliate landing pages as self-contained HTML files. Part of the Affiliate Skills ecosystem, it follows conversion principles like the AIDA framework.

### How do I start creating a landing page?

Tell your AI agent to create a landing page for a product. If you've already used the affiliate program search, it will automatically use that data. Otherwise, it can research the product for you.

### Can it build comparison pages for multiple products?

Yes, it supports both single product spotlights and multi-product comparisons. For comparisons, you can provide competitors manually or let the tool research alternatives.

### Do I need a server to host the generated page?

No. The output is a plain HTML file that works directly in a browser. You can open it locally or deploy it to free hosting services like Netlify Drop, Vercel, or GitHub Pages.

### Is the Landing Page Creator free?

Yes, the skill is open-source and free to use. The generated HTML is yours to keep and host anywhere.

### How do I customize the color scheme?

You can pass a color scheme name like 'blue', 'green', 'purple', 'orange', 'dark', or a hex code. The skill applies it across the whole page using CSS custom properties.