102.3K+Download
Skip to the usage guide
Landing Page Designby elayadesign

Landing Page Design Skill.

Connect the page's argument and its visual rules around a single intended conversion.

  • Landing Pages
  • Copywriting
  • Web Design
Download OpenDesignView Usage Guide
Source Review · Landing Page DesignSKILL.md
Task Landing Pages Produces • A page outline, hero copy, benefits, workflow, and FAQ draft. • An index/noindex recommendation with title and description where appropriate. • A section-by-section implementation using the selected layout and visual rules. Before You Start No single application runtime is required; implementation examples reference Tailwind values, IntersectionObserver, and optional motion tooling.
Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Build a Landing Page Around One Action

Plan the offer, copy, structure and SEO treatment, then apply the source’s detailed visual rules where they fit the project.

Source-based workflowNot an execution benchmark

The Working Approach

Landing Page Design starts with one offer, one audience, and one primary action. Its first half gathers the conversion goal, objections, traffic context, proof, and constraints, then proposes the section sequence and copy before building. Its second half prescribes a detailed visual system for type, spacing, radii, heroes, icons, motion, and component states.

This is an unusually opinionated Skill rather than a neutral checklist. It includes restricted font and spacing choices, a mandatory tagline-reveal section, and specific animation conventions. Those choices can conflict with an established brand system or accessibility requirements and should not silently override them. Its high-conversion framing is an intention, not evidence of measured conversion improvement.

Expected Deliverables

  • A page outline, hero copy, benefits, workflow, and FAQ draft.
  • An index/noindex recommendation with title and description where appropriate.
  • A section-by-section implementation using the selected layout and visual rules.
See the Example Brief

From Brief to Review

  1. 01
    Clarify the Offer

    Gather the audience, action, objections, traffic source, and real proof assets in one intake.

  2. 02
    Choose the Argument

    Select a classic hero, long-form story, minimal conversion page, or comparison structure and explain why.

  3. 03
    Draft Before Building

    Produce the outline, copy, SEO treatment, and layout recommendation before implementation.

  4. 04
    Build and Review by Section

    Work through the page in order while checking states, links, semantics, metadata, and brand constraints.

02 When to Use It

When to Use It

No single application runtime is required; implementation examples reference Tailwind values, IntersectionObserver, and optional motion tooling.

A Good Fit

  • Single-Offer CampaignsUseful when the visitor should take one clearly defined next step.
  • From Strategy to ImplementationConnects copy and objection handling to concrete layout and state decisions.

Limits to Check

  • No Conversion GuaranteeThe source supplies design and copy rules, not results from an experiment on your offer.
  • Brand Rules May ConflictIts prescribed fonts, gradients, motion, and copy casing are not universal requirements for existing products.
  • Proof Must Be RealSpecific-looking statistics, customer names, or guarantees must never be invented as factual evidence.

Bring These Inputs

  • Offer and ConversionState what visitors receive and which action counts as success.
  • Audience and ObjectionsProvide visitor context, traffic source, and actual reasons for hesitation.
  • Proof and Brand ConstraintsSupply approved screenshots, testimonials, data, terms, and design-system requirements.

03 Decisions That Matter

Decisions That Matter

  1. Structure Before Decoration

    The page argument is chosen before the visual rules, reducing the risk of polishing sections with no persuasive role.

  2. Traffic Intent Matters

    A short high-intent download page needs a different argument from an educational search landing page.

  3. Review Its Defaults

    The source's specificity is useful only when its strong visual assumptions suit the project.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Use the repository's current installation route and include the complete Skill folder. The source is a design rule set, not a hosted page builder.

Upstream Source File
https://github.com/elayadesign/ai-design-skills/blob/1c1e97cb9878e236552c772092dda7adcdddbcb2/skills/landing-page-design/SKILL.md

No single application runtime is required; implementation examples reference Tailwind values, IntersectionObserver, and optional motion tooling.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use landing-page-design to plan an evergreen page for our design-review product. The audience is small agencies and the action is requesting a demo. Use only the supplied screenshots and verified proof. Return the outline, hero copy, objection-led FAQ, SEO recommendation, and layout choice before coding. Preserve our existing brand tokens and reduced-motion requirements.

Inspect the Result

Check the actual output against these observable criteria.

  • One primary action is consistent from hero to final CTA.
  • Every factual proof point comes from supplied evidence.
  • Visual rules are reconciled with the existing brand and accessibility requirements.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
elayadesign
Repository
elayadesign/ai-design-skills
Skill File
skills/landing-page-design/SKILL.md
License
MIT
Reviewed Snapshot
2026-10-07 · 1c1e97cb9878
Editorial Source Summary
Plan the offer, copy, structure and SEO treatment, then apply the source’s detailed visual rules where they fit the project.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Is it designed only for homepages?

No. Its central distinction is that a landing page serves one offer and intent, unlike a homepage serving several audiences or goals.

Must every recommendation be followed on an existing site?

No. Its own scope acknowledges explicit user instructions, and an established brand or accessibility requirement should be resolved rather than overwritten silently.

Does adding its FAQ guarantee search visibility?

No. It recommends useful question-and-answer content and appropriate metadata; indexing and search performance remain separate outcomes.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/elayadesign/ai-design-skills/blob/1c1e97cb9878e236552c772092dda7adcdddbcb2/skills/landing-page-design/SKILL.md