Skip to content
Get packs

Landing Page Design

Builds high-converting landing pages with strategy, copy, SEO and strict visual rules

Source Download skill
Repository
elayadesign/ai-design-skills
Stars
13,477
Licence
MIT
Files
1 file

What it does

When installed, the agent follows a fixed playbook whenever it builds or edits a landing page, marketing site or web UI component. It first gathers key facts (the one main action, the audience, proof points), then plans a page structure with headline, call to action, proof and FAQ in a set order, and writes copy using specific, outcome-focused formulas. It also applies a strict visual system covering fonts, spacing, corner radius, backgrounds, icons and motion, so the output follows consistent design rules rather than generic defaults.

Great for

  • Founders or marketers who need a conversion-focused landing page built quickly
  • Front-end developers who want consistent typography and spacing across marketing pages
  • Designers reviewing or standardising a web UI against a fixed visual system

Skip it if

  • Upgrading an existing site that already has its own brand system, since the rules may override established choices; the file itself points to a separate redesign skill for that job
  • Projects that need fonts such as Inter or Roboto, or italic and black weights, because the skill explicitly bans them
  • Non-web work, since the guidance targets web interfaces and marketing pages

Try asking

  • “Build a landing page for my new project management app with a free trial call to action”
  • “Review this pricing page and suggest headline and CTA improvements”
  • “Create a waitlist page for an ad campaign that will not be indexed by search engines”
  • “Restyle this hero section with the spacing, font and radius rules”
Step-by-step guide: how to use Landing Page DesignInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    landing-page-design.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip landing-page-design.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip landing-page-design.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent your one primary action, offer and audience up front so it skips extra questions
  • State any brand or font requirements explicitly, since the user's explicit instructions override the skill's rules
  • Ask for one section at a time to follow the built-in section-by-section build order and keep changes reviewable

What's inside

  • SKILL.md

Redistributed unmodified from elayadesign/ai-design-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.