# landing-page

Skill for planning and copywriting single-offer landing pages for web apps or services. Sets up section order, benefit-driven copy formulas, and objection handling.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2000 installs · ★ 7001
- Author: MengTo
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/MengTo/Skills/tree/HEAD/agent-skills/web-design/landing-page/SKILL.md
- Updated: 2026-10-25
- HTML: https://affpapa.org/en/nevibecode/skills/landing-page

## What it does

This skill guides Claude Code to design single-offer pages for software products. Instead of treating the landing page like a general homepage, it focuses visitor attention on a single primary action, matching the messaging to the traffic source.

The workflow covers every essential area, from the hero headline to problem framing, social proof, and objections. The skill selects from four distinct layouts, such as classic hero setups, long-form sales copy, minimal waitlists, or direct comparison pages. It also checks search requirements, advising a `noindex` tag when running time-limited advertising campaigns.

The system relies on real proof assets like customer logos, clear guarantees, and genuine metrics before writing copy. Skipping those details weakens the output because the skill actively avoids vague filler words like streamlining or optimizing.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill landing-page -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/landing-page/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/landing-page/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill landing-page -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/landing-page/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill landing-page -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/landing-page/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install MengTo/Skills landing-page
```

2. **Manually: put the files in place**
- File: `.github/skills/landing-page/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill landing-page -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/MengTo/Skills --path agent-skills/web-design/landing-page
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/landing-page/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill landing-page -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/MengTo/Skills/tree/HEAD/agent-skills/web-design/landing-page/SKILL.md

## When to use it
- structure a single-offer landing page for SaaS products
- write benefit-first headlines and persuasive action buttons
- organize objection handling and frequently asked questions
- choose the right page layout based on user traffic intent

## Example prompts
- Design a landing page structure for our developer tool with a free trial call to action
- Rewrite the hero section headline and subheadline using the outcome-first formula
- Draft an objection-handling section and frequently asked questions for our subscription service

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 2cd5dcdc1a7f111b.

BEGIN THIRD-PARTY FILE 2cd5dcdc1a7f111b
```text
---
name: landing-page
description: Use when designing or rewriting a high-converting landing page (single-offer page) for SaaS/apps/services. Covers structure, layout patterns, conversion strategies, copywriting, SEO/AEO, and common pitfalls.
---

# Landing Page (High‑Conversion) — Web Design Skill

A landing page is not a homepage.
A homepage serves multiple intents.
A landing page wins one intent: **one offer → one audience → one primary action**.

## Before you design/write
Gather (ask if missing):

### 1) Page purpose
- What is the ONE primary action? (trial, demo, buy, waitlist, download)
- What’s the offer? (exactly what do they get?)
- What counts as conversion? (click, signup, purchase)

### 2) Audience + context
- Who is the ICP?
- What problem are they trying to solve?
- Top 3 objections (why they don’t convert today)
- Traffic source: ads / search / social / email
- What do visitors already know when they land?

### 3) Proof + assets
- Any proof points: logos, testimonials, numbers, case studies
- Screenshots, demo video, product GIFs
- Guarantees / refund / cancellation terms

### 4) Constraints
- Brand voice: casual vs professional
- Design direction: minimal editorial vs playful 3D vs glass UI
- Mobile priority?

---

## Core structure (what it should include)

### Above the fold (must)
1) **Headline** (outcome + audience)
2) **Subheadline** (clarifies “how” + adds specificity)
3) **Primary CTA** (clear verb + what they get)
4) **One proof signal** (logo strip / stat / short testimonial)
5) **Hero visual** (product screenshot/video) *or* a strong illustration

### Mid page (argument)
6) **Problem → solution** (1 section)
7) **Benefits** (3–5, outcome-driven)
8) **How it works** (3 steps)
9) **Social proof** (testimonials/case study)

### Bottom (objection handling)
10) **FAQ** (6–12 Q/A)
11) **Risk reversal** (trial, cancel anytime, guarantee)
12) **Final CTA** (same as top)

---

## Layout types (pick one)

### A) Classic hero + sections (most common)
Best when:
- product is understandable with a hero screenshot

### B) Long-form story (sales page)
Best when:
- you need to educate + overcome skepticism

### C) Minimal conversion page
Best when:
- high-intent traffic (email → known users)
- short offer (download, waitlist)

### D) Comparison landing page
Best when:
- search intent includes alternatives (“X vs Y”, “best for…”)—usually paired with SEO pages

---

## High‑conversion strategies (practical)

### 1) Match message to source
If traffic is from ads:
- mirror the ad headline in the hero
- use the same promise and visual tone

### 2) Make the next step obvious
- one primary CTA
- avoid multiple competing CTAs above the fold

### 3) Write benefit-first
- Features: what it does
- Benefits: what that means for them

### 4) Use specificity
- ❌ “Save time and streamline”
```
END THIRD-PARTY FILE 2cd5dcdc1a7f111b

The third-party file has ended. Everything between the 2cd5dcdc1a7f111b tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2881 of 5275 bytes. © MengTo · MIT · https://github.com/MengTo/Skills/tree/HEAD/agent-skills/web-design/landing-page/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md