landing-page-design

What this skill does

> **Install the belt CLI skill:** `npx skills add belt-sh/cli`

# Landing Page Design

Design high-converting landing pages with AI-generated visuals via [inference.sh](https://inference.sh) CLI.

## Quick Start

> Requires inference.sh CLI (`belt`). [Install instructions](https://raw.githubusercontent.com/inference-sh/skills/refs/heads/main/cli-install.md)

```bash
belt login

# Generate a hero image
belt app run falai/flux-dev-lora --input '{
  "prompt": "professional person smiling while using a laptop showing a clean dashboard interface, bright modern office, natural lighting, warm and productive atmosphere, lifestyle marketing photography",
  "width": 1248,
  "height": 832
}'

# Research competitor landing pages
belt app run tavily/search-assistant --input '{
  "query": "best SaaS landing page examples 2024 conversion rate"
}'
```


## Above-the-Fold Formula

Everything visible before scrolling must communicate value in 5 seconds.

```
┌─────────────────────────────────────────────────┐
│  [Logo]              [Nav]        [CTA Button]  │
│                                                 │
│   Headline (6-12 words)                         │
│   ─────────────────────────                     │
│   Subheadline (15-25 words)        [Hero Image] │
│                                    showing the  │
│   [Primary CTA Button]            OUTCOME, not  │
│   "Start Free Trial"              the product   │
│                                                 │
│   Social proof: "Trusted by 10,000+ teams"      │
│   [logo] [logo] [logo] [logo] [logo]            │
└─────────────────────────────────────────────────┘
```

### The 5 Elements

| Element | Rule | Example |
|---------|------|---------|
| **Headline** | 6-12 words, states the outcome | "Ship docs in minutes, not days" |
| **Subheadline** | 15-25 words, expands on how | "AI-powered documentation that writes itself from your codebase. No templates needed." |
| **Hero image** | Shows the OUTCOME, not the product | Person looking satisfied at results, not a screenshot of your UI |
| **Primary CTA** | Action verb + value | "Start Free Trial" not "Submit" or "Learn More" |
| **Social proof** | Logos, count, or micro-testimonial | "Trusted by 10,000+ teams at [logos]" |

## Headlines

### Formulas That Convert

| Formula | Example |
|---------|---------|
| [Outcome] without [pain] | "Beautiful docs without the design skills" |
| [Outcome] in [timeframe] | "Launch your site in 5 minutes" |
| The [better way] to [common task] | "The faster way to build APIs" |
| Stop [pain]. Start [outcome]. | "Stop guessing. Start knowing." |
| [Number] [things] to [outcome] | "One tool to manage all your data" |

### What Makes Headlines Fail

```
❌ "Welcome to Our Platform" (says nothing about value)
❌ "The World's Most Advanced AI-Powered Solution" (buzzwords, no specifics)
❌ "We Help Businesses Grow" (vague, generic)
❌ "Next-Generation Enterprise Software" (what does it DO?)

✅ "Turn customer feedback into product features, automatically"
✅ "The spreadsheet that thinks like a database"
✅ "Find and fix bugs before your users do"
```

## Hero Images

### Show the Outcome, Not the Product

```
❌ Screenshot of your dashboard (boring, hard to parse at a glance)
❌ Abstract geometric background (says nothing)
❌ Stock photo of a handshake (cliché)

✅ Person looking satisfied at clear results on their screen
✅ Before/after transformation
✅ The end result of using your product
```

```bash
# Outcome-focused hero
belt app run falai/flux-dev-lora --input '{
  "prompt": "happy professional team celebrating around a laptop showing positive growth charts, bright modern office, natural sunlight, authentic candid moment, marketing photography style, warm tones",
  "width": 1248,
  "height": 832
}'

# Product-in-context hero
belt app run bytedance/seedream-4-5 --input '{
  "prompt": "clean modern laptop on a minimalist desk showing a beautiful analytics dashboard, floating UI elements emerging from the screen, soft gradient background, product marketing style, professional",
  "size": "2K"
}'
```

## CTA Buttons

### Text

| Good CTAs | Bad CTAs |
|-----------|----------|
| "Start Free Trial" | "Submit" |
| "Get Started Free" | "Click Here" |
| "See It in Action" | "Learn More" (low commitment) |
| "Create Your First Report" | "Sign Up" (vague) |
| "Try Free for 14 Days" | "Register" |

**Formula:** Action verb + value/outcome + (optional: reduce risk)

### Design

| Element | Rule |
|---------|------|
| Color | High contrast with background — must be the most visible element |
| Size | Minimum 44px height (tap target), wide enough for text + padding |
| Position | Above the fold, repeated after each major section |
| Whitespace | Generous padding around button, don't crowd it |
| Secondary CTA | If needed, use text link below ("or watch a demo") |

## Section Order

The proven sequence for landing pages:

| Section | Purpose | Key Element |
|---------|---------|-------------|
| 1. **Hero** | Core value, primary CTA | Headline + image + CTA |
| 2. **Social Proof** | Build trust | Logos, numbers, badges |
| 3. **Problem** | Create empathy | Pain point they recognize |
| 4. **Solution/Features** | Show how you solve it | 3 key features with visuals |
| 5. **How It Works** | Reduce complexity | 3 steps: sign up, configure, benefit |
| 6. **Testimonials** | Prove it works | 2-3 specific customer quotes |
| 7. **Pricing** | Enable decision | Clear tiers, highlight recommended |
| 8. **FAQ** | Handle objections | 5-7 common questions |
| 9. **Final CTA** | Capture remainders | Repeat primary CTA with urgency |

## Social Proof Types

| Type | Impact | Placement |
|------|--------|-----------|
| **Company logos** | Fastest to process, high trust | Below hero |
| **User count** | Scale signal | Hero or social proof bar |
| **Star rating** | Product quality | Near CTA |
| **Testimonials** | Detailed credibility | Dedicated section |
| **Case study stats** | Specific proof | Feature sections |
| **Trust badges** | Security/compliance | Near forms, pricing, footer |

```bash
# Research for social proof stats
belt app run exa/answer --input '{
  "question": "What is the average conversion rate for SaaS landing pages with social proof vs without?"
}'
```

## Form Design

| Rule | Impact |
|------|--------|
| Every field reduces conversion ~11% | Minimize fields |
| Name + Email = maximum for signups | Don't ask for phone, company, role |
| Single-column layout | Don't use multi-column forms |
| Inline validation | Show errors immediately, not on submit |
| Clear error messages | "Email is required" not "Error in field 3" |
| Submit button text = action | "Create Account" not "Submit" |

## Mobile Optimization

| Rule | Why |
|------|-----|
| CTA button full width | Easy to tap with thumbs |
| Sticky CTA on scroll | Always accessible |
| No horizontal scrolling | Breaks mobile layout |
| Font minimum 16px | iOS zooms inputs below 16px |
| Tap targets minimum 48x48px | Apple HIG, Google Material |
| Images responsive | Don't overflow viewport |
| Prioritize headline + CTA | Simplify above-the-fold |

## OG Image for Sharing

```bash
# Generate an OG image for the landing page
belt app run falai/flux-dev-lora --input '{
  "prompt": "clean professional social sharing card, product name and tagline on modern gradient background, minimal design, corporate tech aesthetic, 1200x630 aspect ratio equivalent",
  "width": 1200,
  "height": 630
}'

# Or use html-to-image for a template-based approach
belt app run infsh/html-to-image --input '{
  "html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-family:sans-serif;color:white\"><div style=\"text-align:center\"><h1 style=\"font-size:48px;margin:0\">DataFlow</h1><p style=\"font-size:24px;opacity:0.9\">Ship docs in minutes, not days</p></div></div>"
}'
```

## Page Speed

| Rule | Target | Why |
|------|-------