landing-page-design

安装 belt CLI 技能： npx skills add belt-sh/cli

着陆页设计

通过 inference.sh CLI，使用 AI 生成的视觉素材设计高转化率着陆页。

快速开始

需要 inference.sh CLI（belt）。安装说明

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"
}'

首屏公式

滚动前可见的所有内容，都必须在 5 秒内传达价值。

┌─────────────────────────────────────────────────┐
│  [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]            │
└─────────────────────────────────────────────────┘

5 个要素

要素	规则	示例
标题	6-12 个词，明确说明结果	“几分钟内交付文档，而非几天”
副标题	15-25 个词，进一步说明实现方式	“由 AI 驱动的文档，可根据你的代码库自动生成。无需模板。”
主视觉图	展示结果，而非产品	用户对结果感到满意的画面，而非 UI 截图
主要 CTA	行动动词 + 价值	“开始免费试用”，而非“提交”或“了解更多”
社会认同	标志、数量或简短用户评价	“深受 10,000 多家团队信赖 [标志]”

标题

高转化公式

公式	示例
无需 [痛点]，即可实现 [结果]	“无需设计技能，也能制作精美文档”
在 [时间范围] 内实现 [结果]	“5 分钟内上线你的网站”
完成 [常见任务] 的更好方式	“更快构建 API 的方式”
停止 [痛点]。开始 [结果]。	“停止猜测。开始了解。”
[数量] 个 [事物]，助你实现 [结果]	“一个工具，管理你的所有数据”

标题为何效果不佳

❌ "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"

主视觉图

展示结果，而非产品

❌ 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 按钮

文案

好的 CTA	不好的 CTA
“开始免费试用”	“提交”
“免费开始使用”	“点击此处”
“查看实际效果”	“了解更多”（承诺度低）
“创建你的第一份报告”	“注册”（含义模糊）
“免费试用 14 天”	“登记”

公式： 行动动词 + 价值/结果 +（可选：降低风险）

设计

要素	规则
颜色	与背景形成高对比——必须是最醒目的元素
尺寸	高度至少 44px（触控目标），宽度应足以容纳文字和内边距
位置	位于首屏，并在每个主要版块后重复出现
留白	按钮周围留出充足的内边距，不要显得拥挤
次要 CTA	如有需要，可在下方使用文字链接（“或观看演示”）

版块顺序

经过验证的着陆页顺序：

版块	目的	关键元素
1. 主视觉区	核心价值、主要 CTA	标题 + 图片 + CTA
2. 社会认同	建立信任	标志、数字、徽章
3. 问题	引发共鸣	用户熟悉的痛点
4. 解决方案/功能	展示解决方式	配有视觉素材的 3 项核心功能
5. 工作原理	降低复杂度	3 个步骤：注册、配置、获益
6. 用户评价	证明产品有效	2-3 条具体的客户评价
7. 定价	帮助用户做决定	清晰的套餐层级，突出推荐选项
8. 常见问题	解答疑虑	5-7 个常见问题
9. 最终 CTA	转化剩余访客	重复主要 CTA，并营造紧迫感

社会认同类型

类型	影响	位置
公司标志	最易快速理解，可信度高	主视觉区下方
用户数量	体现规模	主视觉区或社会认同栏
星级评分	体现产品质量	CTA 附近
用户评价	提供详细可信度	独立版块
案例研究数据	提供具体证明	功能版块
信任徽章	体现安全性/合规性	表单、定价和页脚附近

# 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?"
}'

表单设计

规则	影响
每增加一个字段，转化率约降低 11%	尽量减少字段
注册表单最多填写姓名和邮箱	不要询问电话、公司或职位
使用单列布局	不要使用多列表单
内联验证	立即显示错误，而不是等到提交时
清晰的错误消息	写“必须填写邮箱”，不要写“字段 3 出错”
提交按钮文字应描述操作	写“创建账户”，不要写“提交”

移动端优化

规则	原因
CTA 按钮占满宽度	方便用拇指点击
滚动时固定 CTA	始终可以访问
不要横向滚动	会破坏移动端布局
字体最小为 16px	iOS 会放大 16px 以下的输入框
点击目标最小为 48x48px	Apple HIG、Google Material
图片自适应	不要溢出视口
优先展示标题和 CTA	简化首屏内容

用于分享的 OG 图片

# 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>"
}'

页面速度

规则	目标	原因
主视觉图片	< 200 KB	首先加载的内容
页面总大小	< 2 MB	移动数据流量和用户耐心有限
对首屏以下内容启用延迟加载	始终启用	只加载可见内容
尽量减少 JavaScript	< 200 KB	会阻塞渲染
LCP（最大内容绘制）	< 2.5s	Google Core Web Vitals

常见错误

错误	问题	修正方法
没有清晰的标题	访客不知道你提供什么	使用 6-12 个词，聚焦成果
CTA 写着“了解更多”	行动意愿门槛过低	使用行动动词 + 明确价值
主视觉是产品截图	难以理解，枯燥乏味	展示成果，使用生活场景图片
多个 CTA 互相竞争	让人难以抉择	一个主要 CTA，最多一个次要 CTA
没有社会认同	缺乏信任信号	添加徽标、数量或用户评价
表单字段过多	每增加一个字段，转化率约降低 11%	姓名和邮箱为上限
只针对桌面端设计	60% 以上的流量来自移动端	采用移动端优先的设计
最终 CTA 没有紧迫感	访客会离开并忘记	“开始 14 天免费试用”

相关技能

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

浏览所有应用：belt app list