landing-page-design

落地页设计

借助 inference.sh CLI，通过 AI 生成的视觉素材设计高转化落地页。

快速开始

curl -fsSL https://cli.inference.sh | sh && infsh login

# Generate a hero image
infsh 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
infsh app run tavily/search-assistant --input '{
  "query": "best SaaS landing page examples 2024 conversion rate"
}'

安装说明：安装脚本只会检测你的操作系统和架构，从 dist.inference.sh 下载匹配的二进制文件，并验证其 SHA-256 校验和。无需提升权限，也不会运行后台进程。可查看手动安装与验证指南。

首屏公式

滚动前可见的所有内容，都必须在 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
infsh 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
infsh 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
infsh 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
infsh 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
infsh 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

浏览所有应用：infsh app list