# landing-page-design

Guides landing page work around the hero, CTA and social proof. Use it when shaping a product or marketing page and its visual direction.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 56100 installs · ★ 12
- Author: 101-skills
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/101-skills/superpowers/tree/HEAD/guides/design/landing-page-design/SKILL.md
- Updated: 2026-08-31
- HTML: https://affpapa.org/en/nevibecode/skills/landing-page-design

## What it does

This skill lays out rules for landing pages: building the above-the-fold area, writing a headline and subheadline, choosing a primary CTA, and placing social proof. It also covers section order, mobile design, and F-pattern reading.

Its visual and research workflows use `belt app run`. The listed tools include `falai/flux-dev-lora` and `bytedance/seedream-4-5` for images, plus `tavily/search-assistant` and `exa/answer` for research. You need the `belt` CLI and must sign in with `belt login`.

That dependency matters: without `belt`, the image and research commands in the skill cannot run.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install 101-skills/superpowers landing-page-design
```

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

### Gemini CLI

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

2. **Platform CLI**
```bash
gemini skills install https://github.com/101-skills/superpowers --path guides/design/landing-page-design
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add 101-skills/superpowers --skill landing-page-design -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/101-skills/superpowers/tree/HEAD/guides/design/landing-page-design/SKILL.md

## When to use it
- build an above-the-fold section with a clear CTA
- write a headline around the user outcome
- place social proof in the page flow
- choose a hero image that shows a result
- arrange landing page sections in sequence

## Example prompts
- Apply `landing-page-design` to this landing page hero and draft a headline, subheadline, and primary CTA.
- Use `landing-page-design` to revise this product page structure and social proof blocks.
- With `landing-page-design`, prepare a `belt app run falai/flux-dev-lora` prompt for a hero image showing the user outcome.

## Similar
- [landing-page-copy](https://affpapa.org/en/nevibecode/skills/landing-page-copy.md) — skill · 374 installs
- [landing-page-optimization](https://affpapa.org/en/nevibecode/skills/landing-page-optimization.md) — skill · 324 installs
- [landing-page](https://affpapa.org/en/nevibecode/skills/landing-page.md) — skill · 2000 installs
- [landing-page-copywriter](https://affpapa.org/en/nevibecode/skills/landing-page-copywriter.md) — skill · 6500 installs
- [landing-page-conversion-audit](https://affpapa.org/en/nevibecode/skills/landing-page-conversion-audit.md) — skill · 28 installs
- [event-landing-page](https://affpapa.org/en/nevibecode/skills/event-landing-page.md) — skill · 5300 installs

## Other versions with the same name
- [landing-page-design · elayadesign](https://affpapa.org/en/nevibecode/skills/elayadesign-landing-page-design.md) — 1800 installs
- [landing-page-design · omer-metin](https://affpapa.org/en/nevibecode/skills/omer-metin-landing-page-design.md) — 447 installs

From the same set: [101-skills/superpowers](https://affpapa.org/en/nevibecode/by/101-skills/superpowers.md) — 23 cards

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