/landing-page-design

name: landing-page-design
description: "Complete system for building high converting landing pages: intake questions, page structure, layout selection, conversion copywriting, SEO, plus strict visual rules for typography, spacing, corner radius, backgrounds, hero layout, icons, and motion. Use this skill whenever building, editing, styling, reviewing, or writing copy for ANY landing page, marketing site, web UI, page section, component, or prototype, even when the user does not mention design, conversion, tokens, or a design system. Always consult it before choosing page sections, headlines, CTAs, fonts, font sizes, spacing values, border radii, background colors, icons, or transitions."

Landing Page Design

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

This skill has two halves. **Part A** decides what the page says and how it is structured. **Part B** is the non negotiable visual system. Work through A before touching B.

Scope

Apply to all web UI work: landing pages, marketing sites, components, dashboards, prototypes, and design reviews. When a rule here conflicts with a framework default, this file wins. When the user's explicit prompt conflicts with a rule, the user wins.

**Companion skill.** For upgrading an *existing* site rather than building a new one, use `redesign-existing-projects` ([github.com/elayadesign/redesign-skill](https://github.com/elayadesign/redesign-skill)). It diagnoses generic patterns and defers to this file for every concrete value.

---

PART A — Strategy and structure

A1. Intake

Gather these before designing or writing. Ask only for what is missing, and ask in one batch rather than one question at a time.

**Purpose**

• What is the ONE primary action? (trial, demo, buy, waitlist, download)
• What is the offer, exactly what do they get?
• What counts as a conversion? (click, signup, purchase)

**Audience and context**

• Who is the ICP?
• What problem are they trying to solve?
• Top three objections, meaning why they do not convert today
• Traffic source: ads, search, social, email
• What do visitors already know when they land?

**Proof and assets**

• Proof points: logos, testimonials, numbers, case studies
• Screenshots, demo video, product GIFs
• Guarantees, refund terms, cancellation terms

**Constraints**

• Brand voice: casual or professional
• Design direction: minimal editorial, playful 3D, glass UI
• Mobile priority?

If the user cannot answer, make a reasonable assumption, state it in one line, and continue. Do not stall the build.

A2. Page structure

**Above the fold (required)** 1. Headline, outcome plus audience 2. Subheadline, clarifies how and adds specificity 3. Primary CTA, clear verb plus what they get 4. One proof signal, logo strip, stat, or short testimonial 5. Hero visual, product screenshot or video, or a strong illustration

**Mid page (the argument)** 6. Problem to solution, one section 7. Benefits, three to five, outcome driven 8. How it works, three steps 9. Social proof, testimonials or a case study

**Bottom (objection handling)** 10. FAQ, six to twelve questions 11. Risk reversal, trial, cancel anytime, guarantee 12. Final CTA, identical to the top

Include the mandatory tagline reveal section from B11 somewhere in the mid page argument, typically right after the hero or after benefits.

A3. Layout selection

Pick one and say why.

| Type | Use when | |---|---| | **A. Classic hero plus sections** | The product is understandable from a hero screenshot. Most common. | | **B. Long form story** | You need to educate and overcome skepticism. | | **C. Minimal conversion page** | High intent traffic (email to known users), or a short offer like a download or waitlist. | | **D. Comparison page** | Search intent includes alternatives ("X vs Y", "best for"). Usually paired with SEO pages. |

A4. Conversion rules

**Match message to source.** If traffic comes from ads, mirror the ad headline in the hero and keep the same promise and visual tone.

**Make the next step obvious.** One primary CTA. Never place competing CTAs above the fold.

**Write benefit first.** Features are what it does. Benefits are what that means for them.

**Be specific.**

• ❌ "Save time and streamline"
• ✅ "Cut your weekly reporting from 4 hours to 15 minutes"

**Reduce risk.** Pick at least one: free trial, free plan, no credit card, cancel anytime, money back guarantee.

**Treat objections as a section, not a footnote.** Move the FAQ earlier for high friction offers. Put proof directly beside the claim it supports.

A5. Copywriting

**Headline formulas**

• "{Outcome} without {pain}"
• "The {category} for {audience}"
• "Ship {result} in {time}"

**Subheadline.** One or two sentences. Clarify what it is and who it is for.

**CTA.** Verb plus what they get. Never "Learn more" or "Submit". Use "Start free trial", "Book a demo", "Get the checklist".

**Benefit bullets.** Bold benefit, then the proof or detail. Example: **Faster iteration** — generate three layout variants in one click.

Note: the copy rules in B1 still apply. No hyphens inside sentences, no orphaned words.

A6. Build order

Work section by section, in this order:

1. Hero 2. Benefits 3. How it works 4. Proof 5. FAQ 6. Final CTA

Never rebuild the whole page on each iteration. Section by section keeps control and keeps diffs reviewable.

A7. SEO and AEO

**Do not index** ad only campaign pages or highly time bound offers. Use `noindex` or keep them behind a non indexed path.

**Do index** evergreen offers and pages where search intent matches the promise. Add a clear title and meta description, internal links from the homepage and feature pages, and the FAQ in plain question and answer form for AEO. Add FAQ schema if appropriate.

A8. Pitfalls

• Too many CTAs above the fold
• Vague value prop: "streamline", "optimize"
• A large feature list with no outco