skill CX Codex

landing-page-design · 101-skills — Claude Code skill: what it does, install

Q: How do I install landing-page-design in Claude Code?

Run `npx skills add 101-skills/superpowers --skill landing-page-design -a claude-code`, then run `npx skills add 101-skills/superpowers --skill landing-page-design -a claude-code` again. The skill file is at `~/.claude/skills/landing-page-design/SKILL.md`.

Q: What is required for the image and research commands?

The `belt` CLI is required. Sign in first with `belt login` before running those commands.

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

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add 101-skills/superpowers --skill landing-page-design -a claude-code

Open on GitHub

What landing-page-design 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.

What it helps with

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 for the agent

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.

How to install landing-page-design

1Skills CLI (Vercel)

npx skills add 101-skills/superpowers --skill landing-page-design -a claude-code

2Manually: put the files in place

~/.claude/skills/landing-page-design/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/landing-page-design/

1Skills CLI (Vercel)

npx skills add 101-skills/superpowers --skill landing-page-design -a codex

2Manually: put the files in place

.agents/skills/landing-page-design/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add 101-skills/superpowers --skill landing-page-design -a cursor

2Manually: put the files in place

.cursor/skills/landing-page-design/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install 101-skills/superpowers landing-page-design

2Manually: put the files in place

.github/skills/landing-page-design/SKILL.md

1Skills CLI (Vercel)

npx skills add 101-skills/superpowers --skill landing-page-design -a gemini-cli

2Platform CLI

gemini skills install https://github.com/101-skills/superpowers --path guides/design/landing-page-design

Manually: put the files in place

.devin/skills/landing-page-design/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add 101-skills/superpowers --skill landing-page-design -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about landing-page-design

How do I install landing-page-design in Claude Code?

Run npx skills add 101-skills/superpowers --skill landing-page-design -a claude-code, then run npx skills add 101-skills/superpowers --skill landing-page-design -a claude-code again. The skill file is at ~/.claude/skills/landing-page-design/SKILL.md.

What does landing-page-design do?

It guides landing page design with rules for the hero area, CTAs, social proof, images, and section order. It also includes belt commands for visual generation and research.

What is required for the image and research commands?

The belt CLI is required. Sign in first with belt login before running those commands.

Similar skills

Everything for Design →

landing-page-design by other authors comes first.

landing-page-design elayadesign A skill that walks the agent through a landing page: intake questions and page structure first, then fixed rules for type, spacing and backgrounds. CX Codex +1 1,800installs landing-page-design omer-metin A skill that turns your agent into a landing page specialist, with reference files for building, diagnosing and validating pages. CX Codex +1 447installs landing-page-copy rampstackco Generates conversion-focused landing page copy across hero sections, objection handling, proof elements, and action buttons. CX Codex +1 374installs landing-page-optimization manojbajaj95 A Claude skill for landing pages: copy frameworks, the 11-element page structure, CTA writing and conversion work. CX Codex +1 324installs landing-page MengTo 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. CX Codex +1 2,000installs landing-page-copywriter OneWave-AI Writes conversion copy for landing pages, waitlists, and pricing tables using PAS, AIDA, or StoryBrand. Generates structured sections and headline variants without touching frontend code. CX Codex +1 6,500installs landing-page-conversion-audit official github Audits landing pages and checkouts for conversion leaks on paid traffic. It returns an action list ranked by revenue impact. 28installs event-landing-page Samuel Berthe Builds the public page for a conference, meetup or hackathon: sections, date-gated buttons, accessibility and event structured data. CX Codex +1 5,300installs

From the same set22

agent-browser This skill hands your agent a browser: open pages, click elements, fill forms, grab screenshots and record video. Useful for scraping and UI testing. CX Codex +1 162,800installs web-search This skill gives your agent web search and content extraction through Tavily and Exa. Useful for research, fact-checking and RAG pipelines. CX Codex +1 110,000installs python-executor Runs Python 3.10 scripts inside an isolated inference.sh sandbox. Helpful when your agent needs to crunch data, scrape websites, or render graphics without touching your local system. CX Codex +1 109,700installs remotion-render This skill sends a Remotion React component to inference.sh and gets back an MP4. Useful when video should come from code, not from a timeline editor. CX Codex +1 109,700installs product-photography Generates commercial product renders, e-commerce packshots, and lifestyle scenes. Relies on the belt CLI tool to run image models. CX Codex +1 55,700installs storyboard-creation A skill for planning film and video storyboards: shot vocabulary, camera angles, continuity rules and panel annotation format. CX Codex +1 55,500installs character-design-sheet Maintains consistent character appearances across AI image generations using FLUX LoRA anchors and multi-view reference sheets. Useful for game art, comics, and visual storytelling. CX Codex +1 55,500installs app-store-screenshots Creates store listing screenshots, device mockups and preview-video scenes for Apple App Store and Google Play. Use it when preparing an app listing. CX Codex +1 55,600installs