Landing Page Skill
How this skill behaves (read first)
This is a generative skill, and a landing page has exactly one job: move the visitor toward a single conversion goal. The default failure is the everything page — full site nav, several competing offers, a vague headline, walls of copy, and a CTA you have to scroll to find — so attention scatters and nobody converts. (Users form a first impression in ~0.05s and read as little as ~20% of the copy.) The opposite failure is a beautiful hero with no value proposition and no reason to trust it. So this skill gates:
- Establish the single conversion goal and who's arriving — that decides what stays on the page and what gets cut.
- Apply the always-true core — one focus, a sharp headline, an obvious value proposition, a prominent CTA, trust signals, fast and responsive.
- Surface the context-dependent decisions (cut vs. keep nav, perks, chat, scroll length) with trade-offs.
Then it hands off to ux-aesthetics-audit, ux-heuristics-audit, ux-accessibility-audit, ux-microcopy-audit, ux-dark-patterns-audit, and ux-mobile-responsiveness-audit for validation.
Scope & composition (per docs/orchestration-policy.md §9): this skill covers the landing page itself and composes lower-scope skills rather than re-deriving them. Core children (built as part of the page): CTA button mechanics via ux-buttons. Downstream (offer, don't auto-build): pricing tables via ux-pricing and the post-click sign-up/checkout via ux-login-signup and ux-checkout-payment. Inherit, don't regenerate: under an existing design system, take color/type/spacing from its tokens — only set those when designing from scratch.
Step 0 — Establish context before designing
Ask if not known; state the assumption if proceeding without an answer:
- What's the single conversion goal? Sign up, buy, book a demo, subscribe, download. One page, one primary action — everything else is subordinate. If stakeholders want several goals, that's a prioritization conversation, not five equal buttons.
- Who's arriving, and how aware are they? A specialized audience tolerates (some) domain terms; a general or top-of-funnel audience needs plain language and more context before the ask. Traffic source (an ad for one feature vs. a homepage) shapes how tightly the page must match the promise that brought them.
- Campaign landing page vs. a page within the site? A dedicated campaign page often removes global nav to protect focus; a page inside the main site usually keeps it for wayfinding. This single choice flips several defaults.
- Product type & brand — bounds image style, tone, and whether playful copy fits.
The always-apply core (correct for almost every landing page)
Focus — protect the single goal
- Remove anything that doesn't support the primary action. Cut secondary offers, decorative imagery that doesn't carry meaning, and (on campaign pages) even global navigation. Every element should earn its place by moving the visitor toward the goal.
- Make copy scannable. Limit paragraphs to ~3–4 lines, add a descriptive subheading every couple of paragraphs, and lead with the point — users skim, they don't read.
The message — headline + value proposition
- A compelling, concise headline. It's the first thing that earns the ~0.05s first impression; keep it clear, relevant to the offer, and short. Avoid cleverness that obscures what this is.
- Make the value proposition obvious and high on the page. In clear language (plus a supporting visual), answer three questions: what is it, how does it benefit me, how does it work? This is the elevator pitch — it shouldn't require scrolling to find.
- No jargon. Use the audience's words; if a technical term is unavoidable for a specialist audience, define it first. Jargon costs readability and credibility.
The ask — the CTA
- One prominent primary CTA, visible without scrolling. Accent/contrasting color, generous size (≥44×44px target), active-verb label that names the action ("Start free trial," not "Submit"). On long pages, repeat the CTA at intervals.
- If content continues below the fold, add a scroll cue (e.g., a downward arrow) so visitors don't assume the page ends at the hero.
The trust — why believe you
- Social proof. Reviews, ratings, testimonials, usage stats — people don't want to be first; most trust peer recommendations and public opinions. Show real, specific proof.
- Brand authority. Logos of well-known customers, partners, or media mentions reassure visitors the offer is legitimate.
The mechanics — it has to actually work
- Responsive across devices — headline and CTA especially must render and stay tappable from desktop to phone.
- Fast load — aim under ~2.5s; slow pages (especially on mobile) bleed visitors before they see anything.
The context-dependent decisions (surface, don't auto-apply)
Present each with its trade-off and a recommendation tied to Step 0. Stacking every persuasion lever — perks + urgency + pop-ups + sticky chat — is the failure mode; it reads as a hard sell and erodes trust.
| Decision |
Apply when |
Avoid / adapt when |
Default recommendation |
| Keep vs. remove global navigation |
Keep on a page within the main site (wayfinding) |
Remove on a single-goal campaign page where nav is an exit |
Match to page type; when the goal is one conversion, cut nav that competes |
| Perks / reciprocity (discount, free shipping, bonus) |
A genuine incentive that fits the offer; reciprocity nudges action |
Manufactured "free gift" that cheapens trust, or perks irrelevant to the goal |
Use a real, relevant incentive — keep it honest (→ dark-patterns) |
| Chat / support widget |
Considered purchases where first-time visitors have questions |
Mobile — sticky chat overlays filters/CTAs/Checkout and frustrates |
Offer it; make sticky chat a desktop-only treatment |
| Scroll length (short hero-only vs. long-form) |
Long-form for complex/considered offers needing education and proof |
A long page for a simple, low-consideration action |
Match length to decision complexity; keep one goal regardless of length |
| Social-proof type (testimonials / stats / logos / ratings) |
Pick what your audience trusts most and what you can show honestly |
Vague or unverifiable claims ("loved by thousands") |
Specific, real proof over generic superlatives |
| Personality / humor in copy |
Brands where it fits and the decision is low-stakes |
Serious/high-trust offers (finance, health) or where it muddies the value prop |
Warmth yes; never at the cost of a clear value proposition |
Validate the result (orchestration)
Hand-offs name each lens by its installable skill name. Invoke one only if that skill is installed; if it isn't, this skill's own core already carries these rules — proceed without it rather than blocking.
After generating or revising, hand the result to the audit lenses rather than declaring it done. These are candidate lenses — posture is set by docs/orchestration-policy.md, or route the whole thing through ux-design-review. Here, heuristics, microcopy, and dark-patterns are Tier A (auto-run); accessibility, aesthetics, and mobile-responsiveness are Tier B (offered) — under an existing design system aesthetics is suppressed and accessibility narrows to usage; mobile-responsiveness applies only on mobile. If the user invoked this skill for one specific thing, respect that scope.
ux-aesthetics-audit (Tier B — offer; suppress under a design system) — visual hierarchy with one clear focal point (the CTA / value prop), the hero not overcrowded, scannable rhythm rather than text walls.ux-heuristics-audit (Tier A) — does the page match the promise of the ad/link that brought the user; is the next step obvious; is system status clear on the CTA action.ux-accessibility-audit (Tier B — offer; narrow under a design system) — CTA contrast and target size, heading hierarchy, image alt text, readable body type.ux-microcopy-audit (Tier A) — headline clarity, value-proposition wording, jargon, CTA label quality.ux-dark-patterns-audit (Tier A) — the conversion-pressure traps a landing page invites: fake urgency/scarcity countdowns, manipulative or fabricated social proof, confirmshaming the decline, and pop-ups that trap. Persuasion should be honest.ux-mobile-responsiveness-audit (Tier B — offer) — headline/CTA rendering and reach on phones, the sticky-chat caveat, fast mobile load, tap targets.
If the audits surface a conflict (e.g., marketing wants three offers and a countdown), resolve back toward the primary task: one visitor, one decision — remove anything that doesn't help them make it.
Common do/don't patterns
| ❌ Don't |
✅ Do |
| Cram multiple offers + full nav + walls of text |
One goal; cut everything that doesn't serve it |
| Clever headline that hides what this is |
Clear, concise headline relevant to the offer |
| Bury the value proposition below the fold |
Answer what/benefit/how, plainly, up high |
| Impress with jargon |
Audience's language; define unavoidable terms |
| "Submit" / a low-contrast button mid-page |
Active-verb CTA, accent color, ≥44px, visible without scrolling |
| Decorative stock imagery that carries no meaning |
Contextual images that reinforce the message |
| Ask for the conversion with no reason to trust |
Social proof + brand authority, specific and real |
| Stack urgency + perks + pop-ups + sticky mobile chat |
Honest incentives; sticky chat desktop-only (→ dark-patterns) |
| Assume the hero is the whole page |
Scroll cue when content continues below the fold |
| Ship a slow, desktop-only layout |
Responsive; headline & CTA intact on mobile; load < ~2.5s |
| Ship without checking |
Hand off to aesthetics + heuristics + accessibility + microcopy + dark-patterns + mobile-responsiveness |
Source lessons (Uxcel)
1---2name: ux-landing-page3description: Design or critique a landing page — a focused, conversion-oriented page built around a single goal (sign up, buy, book a demo, subscribe). Applies the always-true core (one focus, a compelling headline, an obvious value proposition, a prominent CTA, trust signals) and gates context-dependent levers (keeping or cutting site nav, perks/reciprocity, chat widget, long vs. short scroll) with trade-offs. Trigger when the user asks to design or review a landing page, marketing page, hero section, product/campaign page, or "page that converts."4license: MIT5---67# Landing Page Skill89## How this skill behaves (read first)1011This is a **generative** skill, and a landing page has exactly **one job**: move the visitor toward a single conversion goal. The default failure is the **everything page** — full site nav, several competing offers, a vague headline, walls of copy, and a CTA you have to scroll to find — so attention scatters and nobody converts. (Users form a first impression in ~0.05s and read as little as ~20% of the copy.) The opposite failure is a beautiful hero with no value proposition and no reason to trust it. So this skill gates:12131. **Establish the single conversion goal and who's arriving** — that decides what stays on the page and what gets cut.142. **Apply the always-true core** — one focus, a sharp headline, an obvious value proposition, a prominent CTA, trust signals, fast and responsive.153. **Surface the context-dependent decisions** (cut vs. keep nav, perks, chat, scroll length) with trade-offs.1617Then it **hands off to `ux-aesthetics-audit`, `ux-heuristics-audit`, `ux-accessibility-audit`, `ux-microcopy-audit`, `ux-dark-patterns-audit`, and `ux-mobile-responsiveness-audit`** for validation.1819Scope & composition (per `docs/orchestration-policy.md` §9): this skill covers the **landing page itself** and composes lower-scope skills rather than re-deriving them. **Core children (built as part of the page):** **CTA button mechanics** via `ux-buttons`. **Downstream (offer, don't auto-build):** **pricing tables** via `ux-pricing` and the **post-click sign-up/checkout** via `ux-login-signup` and `ux-checkout-payment`. **Inherit, don't regenerate:** under an existing design system, take color/type/spacing from its tokens — only set those when designing from scratch.2021---2223## Step 0 — Establish context before designing2425Ask if not known; state the assumption if proceeding without an answer:2627- **What's the single conversion goal?** Sign up, buy, book a demo, subscribe, download. One page, one primary action — everything else is subordinate. If stakeholders want several goals, that's a prioritization conversation, not five equal buttons.28- **Who's arriving, and how aware are they?** A specialized audience tolerates (some) domain terms; a general or top-of-funnel audience needs plain language and more context before the ask. Traffic source (an ad for one feature vs. a homepage) shapes how tightly the page must match the promise that brought them.29- **Campaign landing page vs. a page within the site?** A dedicated campaign page often *removes* global nav to protect focus; a page inside the main site usually keeps it for wayfinding. This single choice flips several defaults.30- **Product type & brand** — bounds image style, tone, and whether playful copy fits.3132---3334## The always-apply core (correct for almost every landing page)3536### Focus — protect the single goal37- **Remove anything that doesn't support the primary action.** Cut secondary offers, decorative imagery that doesn't carry meaning, and (on campaign pages) even global navigation. Every element should earn its place by moving the visitor toward the goal.38- **Make copy scannable.** Limit paragraphs to ~3–4 lines, add a descriptive subheading every couple of paragraphs, and lead with the point — users skim, they don't read.3940### The message — headline + value proposition41- **A compelling, concise headline.** It's the first thing that earns the ~0.05s first impression; keep it clear, relevant to the offer, and short. Avoid cleverness that obscures what this is.42- **Make the value proposition obvious and high on the page.** In clear language (plus a supporting visual), answer three questions: *what is it, how does it benefit me, how does it work?* This is the elevator pitch — it shouldn't require scrolling to find.43- **No jargon.** Use the audience's words; if a technical term is unavoidable for a specialist audience, define it first. Jargon costs readability *and* credibility.4445### The ask — the CTA46- **One prominent primary CTA, visible without scrolling.** Accent/contrasting color, generous size (≥44×44px target), active-verb label that names the action ("Start free trial," not "Submit"). On long pages, repeat the CTA at intervals.47- **If content continues below the fold, add a scroll cue** (e.g., a downward arrow) so visitors don't assume the page ends at the hero.4849### The trust — why believe you50- **Social proof.** Reviews, ratings, testimonials, usage stats — people don't want to be first; most trust peer recommendations and public opinions. Show real, specific proof.51- **Brand authority.** Logos of well-known customers, partners, or media mentions reassure visitors the offer is legitimate.5253### The mechanics — it has to actually work54- **Responsive across devices** — headline and CTA especially must render and stay tappable from desktop to phone.55- **Fast load** — aim under ~2.5s; slow pages (especially on mobile) bleed visitors before they see anything.5657---5859## The context-dependent decisions (surface, don't auto-apply)6061Present each with its trade-off and a recommendation tied to Step 0. **Stacking every persuasion lever — perks + urgency + pop-ups + sticky chat — is the failure mode; it reads as a hard sell and erodes trust.**6263| Decision | Apply when | Avoid / adapt when | Default recommendation |64|---|---|---|---|65| **Keep vs. remove global navigation** | Keep on a page within the main site (wayfinding) | Remove on a single-goal campaign page where nav is an exit | Match to page type; when the goal is one conversion, cut nav that competes |66| **Perks / reciprocity** (discount, free shipping, bonus) | A genuine incentive that fits the offer; reciprocity nudges action | Manufactured "free gift" that cheapens trust, or perks irrelevant to the goal | Use a real, relevant incentive — keep it honest (→ dark-patterns) |67| **Chat / support widget** | Considered purchases where first-time visitors have questions | Mobile — sticky chat overlays filters/CTAs/Checkout and frustrates | Offer it; make sticky chat a **desktop-only** treatment |68| **Scroll length** (short hero-only vs. long-form) | Long-form for complex/considered offers needing education and proof | A long page for a simple, low-consideration action | Match length to decision complexity; keep one goal regardless of length |69| **Social-proof type** (testimonials / stats / logos / ratings) | Pick what your audience trusts most and what you can show honestly | Vague or unverifiable claims ("loved by thousands") | Specific, real proof over generic superlatives |70| **Personality / humor in copy** | Brands where it fits and the decision is low-stakes | Serious/high-trust offers (finance, health) or where it muddies the value prop | Warmth yes; never at the cost of a clear value proposition |7172---7374## Validate the result (orchestration)7576> Hand-offs name each lens by its installable skill `name`. Invoke one only if that skill is installed; if it isn't, this skill's own core already carries these rules — proceed without it rather than blocking.7778After generating or revising, hand the result to the audit lenses rather than declaring it done. These are **candidate** lenses — posture is set by `docs/orchestration-policy.md`, or route the whole thing through `ux-design-review`. Here, **`heuristics`, `microcopy`, and `dark-patterns` are Tier A (auto-run); `accessibility`, `aesthetics`, and `mobile-responsiveness` are Tier B (offered)** — under an existing design system `aesthetics` is suppressed and `accessibility` narrows to usage; `mobile-responsiveness` applies only on mobile. If the user invoked this skill for one specific thing, respect that scope.7980- **`ux-aesthetics-audit`** *(Tier B — offer; suppress under a design system)* — visual hierarchy with one clear focal point (the CTA / value prop), the hero not overcrowded, scannable rhythm rather than text walls.81- **`ux-heuristics-audit`** *(Tier A)* — does the page match the promise of the ad/link that brought the user; is the next step obvious; is system status clear on the CTA action.82- **`ux-accessibility-audit`** *(Tier B — offer; narrow under a design system)* — CTA contrast and target size, heading hierarchy, image alt text, readable body type.83- **`ux-microcopy-audit`** *(Tier A)* — headline clarity, value-proposition wording, jargon, CTA label quality.84- **`ux-dark-patterns-audit`** *(Tier A)* — the conversion-pressure traps a landing page invites: fake urgency/scarcity countdowns, manipulative or fabricated social proof, confirmshaming the decline, and pop-ups that trap. Persuasion should be honest.85- **`ux-mobile-responsiveness-audit`** *(Tier B — offer)* — headline/CTA rendering and reach on phones, the sticky-chat caveat, fast mobile load, tap targets.8687If the audits surface a conflict (e.g., marketing wants three offers and a countdown), resolve back toward the primary task: **one visitor, one decision — remove anything that doesn't help them make it.**8889---9091## Common do/don't patterns9293| ❌ Don't | ✅ Do |94|---|---|95| Cram multiple offers + full nav + walls of text | One goal; cut everything that doesn't serve it |96| Clever headline that hides what this is | Clear, concise headline relevant to the offer |97| Bury the value proposition below the fold | Answer what/benefit/how, plainly, up high |98| Impress with jargon | Audience's language; define unavoidable terms |99| "Submit" / a low-contrast button mid-page | Active-verb CTA, accent color, ≥44px, visible without scrolling |100| Decorative stock imagery that carries no meaning | Contextual images that reinforce the message |101| Ask for the conversion with no reason to trust | Social proof + brand authority, specific and real |102| Stack urgency + perks + pop-ups + sticky mobile chat | Honest incentives; sticky chat desktop-only (→ dark-patterns) |103| Assume the hero is the whole page | Scroll cue when content continues below the fold |104| Ship a slow, desktop-only layout | Responsive; headline & CTA intact on mobile; load < ~2.5s |105| Ship without checking | Hand off to aesthetics + heuristics + accessibility + microcopy + dark-patterns + mobile-responsiveness |106107---108109## Source lessons (Uxcel)110111- [How to Design Landing Pages That Convert](https://uxcel.com/lessons/landing-page-best-practices-635)
Uxcel-Lab