Designs and builds high-converting landing pages with HTML, CSS, and JavaScript — including wireframe structure, conversion-optimized sections, responsive design, and performance best practices. Use this skill whenever someone asks to create a landing page, build a sales page, design a lead generation page, develop a conversion-focused page, create a squeeze page, or build any single-purpose web page designed to drive a specific action. Also use when optimizing existing landing pages for better conversions.
This skill creates complete, production-ready landing pages optimized for conversion. Every page follows proven conversion principles, is fully responsive, and loads fast. The output is clean HTML/CSS/JS that can be deployed anywhere.
Keywords: landing page, sales page, lead gen page, squeeze page, conversion page, web design, HTML, CSS, responsive, above the fold, CTA, hero section
Every high-converting landing page follows this section order:
1. HERO SECTION (Above the Fold)
├── Headline (benefit-driven, specific)
├── Subheadline (supports/expands headline)
├── Hero visual (image, video, or product shot)
├── Primary CTA button
└── Trust bar (logos, ratings, "trusted by X")
2. PROBLEM/PAIN SECTION
├── Identify the problem (in customer's language)
├── Agitate the consequences
└── Transition to solution
3. SOLUTION SECTION
├── Introduce your solution
├── 3-5 key benefits (with icons)
└── How it works (3 simple steps)
4. SOCIAL PROOF SECTION
├── Testimonials (photo + name + result)
├── Case study snippet
├── Metrics ("500+ clients", "4.9★ rating")
└── Logo bar (client/press logos)
5. FEATURES/DETAILS SECTION
├── Detailed feature breakdown
├── Comparison (us vs. alternatives)
└── Visual demonstrations
6. FAQ SECTION
├── Top 5-7 objections answered
└── Accordion format for scannability
7. FINAL CTA SECTION
├── Recap headline (restate value)
├── CTA button (same as hero)
├── Risk reversal (guarantee, free trial)
└── Urgency (if genuine)
8. FOOTER
├── Legal links (privacy, terms)
├── Contact info
└── Copyright
Without scrolling, the visitor should understand:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="[Meta description with keyword + CTA]">
<title>[Title Tag — Keyword + Benefit | Brand]</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="[Google Fonts URL]" rel="stylesheet">
<style>/* Inline critical CSS for speed */</style>
</head>
<body>
<section id="hero">...</section>
<section id="problem">...</section>
<section id="solution">...</section>
<section id="social-proof">...</section>
<section id="features">...</section>
<section id="faq">...</section>
<section id="final-cta">...</section>
<footer>...</footer>
<script>/* Minimal JS — form handling, FAQ accordion, scroll tracking */</script>
</body>
</html>
font-display: swap| Metric | Target |
|---|---|
| First Contentful Paint | <1.5s |
| Largest Contentful Paint | <2.5s |
| Cumulative Layout Shift | <0.1 |
| Total page weight | <500KB (excluding images) |
| Image optimization | WebP format, properly sized |
# Landing Page: [Page Name]
## Strategy
- **Objective**: [Lead gen / Sales / Registration]
- **Target Audience**: [Persona]
- **Traffic Source**: [Where visitors come from]
- **Primary CTA**: [Exact CTA text and action]
## Copy Sections
[All headline, subheadline, body copy, CTAs]
## Visual Direction
[Design notes, color palette, image suggestions]
## Complete Code
[Full HTML/CSS/JS as a single file or structured files]
brand-voice skill for tone and copywriter skill for persuasive text patterns.