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