Landing Page Design Agent Skill

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

Quick Start

> Requires inference.sh CLI (belt). Install instructions

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

# 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 |

# 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

# 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 |

|------|--------|-----|

| Hero image | < 200 KB | First thing to load |

| Total page weight | < 2 MB | Mobile data, patience |

| Lazy load below-fold | Always | Only load what's visible |

| Minimize JavaScript | < 200 KB | Blocks rendering |

| LCP (Largest Contentful Paint) | < 2.5s | Google Core Web Vitals |

Common Mistakes

| Mistake | Problem | Fix |

|---------|---------|-----|

| No clear headline | Visitor doesn't know what you do | 6-12 words, outcome-focused |

| CTA says "Learn More" | Too low commitment | Action verb + specific value |

| Hero is a product screenshot | Hard to parse, boring | Show the outcome, use lifestyle imagery |

| Multiple competing CTAs | Decision paralysis | One primary CTA, one secondary max |

| No social proof | No trust signal | Add logos, counts, or testimonials |

| Too many form fields | Conversion drops ~11% per field | Name + email maximum |

| Desktop-only design | 60%+ traffic is mobile | Design mobile-first |

| No urgency in final CTA | Visitors leave and forget | "Start your free 14-day trial" |

Related Skills

npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@web-search
npx skills add inference-sh/skills@prompt-engineering

Browse all apps: belt app store