安装 belt CLI 技能： npx skills add belt-sh/cli
着陆页设计
通过 inference.sh CLI 使用 AI 生成的视觉效果设计高转化率的着陆页。
快速开始
需要 inference.sh CLI（belt）。安装说明
belt login
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
}'
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] │
└─────────────────────────────────────────────────┘
五个要素
| 要素 | 规则 | 示例 |
|---|
| 标题 | 6-12 个词，陈述成果 | "Ship docs in minutes, not days" |
| 副标题 | 15-25 个词，展开说明如何实现 | "AI-powered documentation that writes itself from your codebase. No templates needed." |
| 主图 | 展示成果，而非产品 | 对结果满意的用户形象，而不是你的 UI 截图 |
| 主要 CTA | 动词 + 价值 | "Start Free Trial" 而非 "Submit" 或 "Learn More" |
| 社交证明 | 标志、数量或微型推荐 | "Trusted by 10,000+ teams at [logos]" |
标题
高转化公式
| 公式 | 示例 |
|---|
| [成果] 无需 [痛点] | "Beautiful docs without the design skills" |
| [成果] 在 [时间] 内 | "Launch your site in 5 minutes" |
| [更佳方式] 来 [常见任务] | "The faster way to build APIs" |
| 停止 [痛点]. 开始 [成果]. | "Stop guessing. Start knowing." |
| [数字] 个 [事物] 实现 [成果] | "One tool to manage all your data" |
导致标题失败的原因
❌ "Welcome to Our Platform"（未说明价值）
❌ "The World's Most Advanced AI-Powered Solution"（套话，无具体内容）
❌ "We Help Businesses Grow"（模糊、通用）
❌ "Next-Generation Enterprise Software"（它到底做什么？）
✅ "Turn customer feedback into product features, automatically"
✅ "The spreadsheet that thinks like a database"
✅ "Find and fix bugs before your users do"
主图
展示成果，而非产品
❌ 你的仪表盘截图（枯燥，难以一眼识别）
❌ 抽象几何背景（毫无信息量）
❌ 握手图（俗套）
✅ 用户满意地看着屏幕上清晰结果的形象
✅ 前后对比的转变
✅ 使用你的产品带来的最终结果
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
}'
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 |
|---|
| "Start Free Trial" | "Submit" |
| "Get Started Free" | "Click Here" |
| "See It in Action" | "Learn More"（承诺度低） |
| "Create Your First Report" | "Sign Up"（模糊） |
| "Try Free for 14 Days" | "Register" |
公式： 动词 + 价值/成果 + （可选：降低风险）
设计
| 要素 | 规则 |
|---|
| 颜色 | 与背景高对比度——必须是最显眼的元素 |
| 尺寸 | 最小高度 44px（点击目标），宽度足够容纳文本 + 内边距 |
| 位置 | 首屏内，每个主要版块后重复 |
| 间距 | 按钮四周留有充足空白，不拥挤 |
| 次要 CTA | 如需，使用下方文字链接（"or watch a demo"） |
版块顺序
着陆页的经过验证的顺序：
| 版块 | 目的 | 关键元素 |
|---|
| 1. 首屏 | 核心价值，主要 CTA | 标题 + 图片 + CTA |
| 2. 社交证明 | 建立信任 | 标志、数字、徽章 |
| 3. 问题 | 产生共鸣 | 用户能识别的痛点 |
| 4. 解决方案/功能 | 展示如何解决 | 3 个关键功能及视觉效果 |
| 5. 工作原理 | 减少复杂性 | 3 个步骤：注册、配置、获益 |
| 6. 用户评价 | 证明有效 | 2-3 个具体客户引用 |
| 7. 定价 | 促成决策 | 清晰的分层，突出推荐方案 |
| 8. 常见问题 | 处理异议 | 5-7 个常见问题 |
| 9. 最终 CTA | 捕获剩余犹豫 | 重复主要 CTA 并带有紧迫感 |
社交证明类型
| 类型 | 影响 | 放置位置 |
|---|
| 公司标志 | 处理最快，信任度高 | 首屏下方 |
| 用户数量 | 规模信号 | 首屏或社交证明栏 |
| 星级评分 | 产品质量 | CTA 附近 |
| 用户评价 | 详细可信度 | 独立版块 |
| 案例研究数据 | 具体证明 | 功能版块 |
| 信任徽章 | 安全/合规 | 表单、定价页、页脚附近 |
belt app run exa/answer --input '{
"question": "What is the average conversion rate for SaaS landing pages with social proof vs without?"
}'
表单设计
| 规则 | 影响 |
|---|
| 每增加一个字段，转化率大约降低 11% | 最小化字段数量 |
| 姓名 + 邮箱 = 注册时的最大限制 | 不要询问电话、公司、职位 |
| 单列布局 | 不要使用多列表单 |
| 内联验证 | 立即显示错误，而非提交时 |
| 清晰的错误提示 | "Email is required" 而非 "Error in field 3" |
| 提交按钮文本 = 操作 | "Create Account" 而非 "Submit" |
移动端优化
| 规则 | 原因 |
|---|
| CTA 按钮全宽 | 方便用拇指点击 |
| 滚动时固定 CTA | 始终保持可访问 |
| 无横向滚动 | 破坏移动端布局 |
| 字体最小 16px | iOS 会放大小于 16px 的输入框 |
| 点击目标最小 48x48px | Apple HIG、Google Material |
| 图片响应式 | 不溢出视口 |
| 优先显示标题和 CTA | 简化首屏内容 |
OG 分享图
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
}'
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 显示 "Learn More" | 承诺度太低 | 动词 + 具体价值 |
| 首图是产品截图 | 难以解析、枯燥 | 展示成果，使用生活化图像 |
| 多个竞争性 CTA | 决策瘫痪 | 最多一个主要 CTA，一个次要 |
| 无社交证明 | 缺乏信任信号 | 添加标志、数量或评价 |
| 表单字段过多 | 每多一个字段转化率下降约 11% | 姓名 + 邮箱为上限 |
| 仅桌面端设计 | 60%+ 流量来自移动端 | 移动优先设计 |
| 最终 CTA 无紧迫感 | 访问者离开后忘记 | "Start your free 14-day trial" |
相关技能
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