⚡

着陆页设计Skill landing-page-design

该技能专注于利用AI生成视觉元素来设计高转换率的着陆页，涵盖布局规则、英雄部分设计、CTA心理学、移动优化和F型阅读模式。适用于创业公司着陆页、产品页面、SaaS营销和转换优化，帮助用户提升营销效果和增长。关键词：着陆页设计、转换优化、营销增长、AI图像生成、英雄图像、CTA按钮、移动设计、SEO搜索优化。

内容营销 0 次安装 0 次浏览 更新于 3/12/2026

name: landing-page-design description: “着陆页转换优化，包括布局规则、英雄部分设计和CTA心理学。涵盖首屏公式、社交证明放置、移动设计和F型阅读模式。适用于：创业公司着陆页、产品页面、SaaS营销、转换优化。触发词：着陆页、英雄部分、首屏、转换优化、着陆页设计、CTA按钮、英雄图像、着陆页布局、SaaS着陆页、产品页面设计、转换率、着陆页最佳实践” allowed-tools: Bash(infsh *)

着陆页设计

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

快速开始

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

# 生成英雄图像
infsh app run falai/flux-dev-lora --input '{
  "prompt": "专业人物微笑使用笔记本电脑展示清晰仪表板界面，明亮现代办公室，自然光线，温暖高效氛围，生活方式营销摄影",
  "width": 1248,
  "height": 832
}'

# 研究竞争对手着陆页
infsh app run tavily/search-assistant --input '{
  "query": "2024年最佳SaaS着陆页示例转换率"
}'

安装说明: 安装脚本仅检测您的操作系统/架构，从dist.inference.sh下载匹配的二进制文件，并验证SHA-256校验和。无需提升权限或后台进程。提供手动安装和验证。

首屏公式

滚动前可见的一切必须在5秒内传达价值。

┌─────────────────────────────────────────────────┐
│  [徽标]              [导航]        [CTA按钮]  │
│                                                 │
│   标题（6-12个词）                             │
│   ─────────────────────────                     │
│   副标题（15-25个词）           [英雄图像]    │
│                                  展示结果，非  │
│   [主要CTA按钮]                 产品本身       │
│   "开始免费试用"                               │
│                                                 │
│   社交证明："受10,000+团队信赖"                │
│   [徽标] [徽标] [徽标] [徽标] [徽标]            │
└─────────────────────────────────────────────────┘

五个元素

元素 规则 示例
标题 6-12个词，陈述结果 “在几分钟内而非数天内交付文档”
副标题 15-25个词，扩展如何实现 “AI驱动的文档，从您的代码库自动编写。无需模板。”
英雄图像 展示结果，而非产品 人物满意地看着结果，不是您界面的截图
主要CTA 动作动词 + 价值 “开始免费试用"而非"提交"或"了解更多”
社交证明 徽标、数量或微证言 “受10,000+团队在[徽标]信赖”

标题

转换公式

公式 示例
[结果] 无 [痛点] “无设计技能的美丽文档”
[结果] 在 [时间框架] 内 “5分钟内启动您的网站”
[更好方式] 完成 [常见任务] “构建API的更快方式”
停止 [痛点]。开始 [结果]。 “停止猜测。开始了解。”
[数字] [事物] 实现 [结果] “一个工具管理所有数据”

标题失败原因

❌ "欢迎来到我们的平台"（未传达价值）
❌ "世界最先进的AI驱动解决方案"（空泛术语，无具体细节）
❌ "我们帮助企业成长"（模糊、通用）
❌ "下一代企业软件"（它做什么？）

✅ "自动将客户反馈转化为产品功能"
✅ "像数据库一样思考的电子表格"
✅ "在用户发现前找到并修复错误"

英雄图像

展示结果，而非产品

❌ 您的仪表板截图（枯燥，难以一目了然）
❌ 抽象几何背景（无意义）
❌ 握手库存照片（陈词滥调）

✅ 人物满意地看着屏幕上的清晰结果
✅ 前/后转变
✅ 使用您产品的最终结果

# 结果导向英雄
infsh app run falai/flux-dev-lora --input '{
  "prompt": "快乐专业团队围绕笔记本电脑庆祝显示积极增长图表，明亮现代办公室，自然阳光，真实瞬间，营销摄影风格，温暖色调",
  "width": 1248,
  "height": 832
}'

# 产品在上下文中英雄
infsh app run bytedance/seedream-4-5 --input '{
  "prompt": "极简桌子上干净的现代笔记本电脑展示美观分析仪表板，从屏幕浮现的漂浮UI元素，柔和渐变背景，产品营销风格，专业",
  "size": "2K"
}'

CTA按钮

文本

良好CTA 不良CTA
“开始免费试用” “提交”
“免费开始” “点击这里”
“查看实战” “了解更多”（低承诺）
“创建您的首份报告” “注册”（模糊）
“免费试用14天” “注册”

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

设计

元素 规则
颜色 与背景高对比度 — 必须是最显眼元素
尺寸 最小高度44px（点击目标），足够宽度容纳文本+内边距
位置 首屏，每个主要部分后重复
空白 按钮周围充足内边距，不拥挤
次要CTA 如需，使用下方文本链接（“或观看演示”）

部分顺序

着陆页的验证序列：

部分 目的 关键元素
1. 英雄 核心价值，主要CTA 标题 + 图像 + CTA
2. 社交证明 建立信任 徽标、数字、徽章
3. 问题 引发共鸣 他们识别的痛点
4. 解决方案/功能 展示如何解决 3个关键功能带视觉
5. 工作原理 降低复杂性 3步：注册、配置、获益
6. 证言 证明有效 2-3个具体客户引述
7. 定价 促进决策 清晰层级，突出推荐
8. FAQ 处理异议 5-7个常见问题
9. 最终CTA 捕获剩余用户 重复主要CTA带紧迫性

社交证明类型

类型 影响 放置
公司徽标 最快处理，高信任度 英雄下方
用户数量 规模信号 英雄或社交证明栏
星级评级 产品质量 CTA附近
证言 详细可信度 专用部分
案例研究统计 具体证据 功能部分
信任徽章 安全/合规性 表单、定价、页脚附近 
# 研究社交证明统计
infsh app run exa/answer --input '{
  "question": "SaaS着陆页带社交证明与不带社交证明的平均转换率是多少？"
}'

表单设计

规则 影响
每个字段降低转换率约11% 最小化字段
姓名 + 邮箱 = 注册最大值 勿问电话、公司、角色
单列布局 勿用多列表单
行内验证 立即显示错误，非提交时
清晰错误消息 “邮箱必填"而非"字段3错误”
提交按钮文本 = 动作 “创建账户"而非"提交”

移动优化

规则 原因
CTA按钮全宽 拇指轻松点击
滚动时粘性CTA 始终可访问
无水平滚动 破坏移动布局
字体最小16px iOS缩放低于16px的输入
点击目标最小48x48px Apple HIG、Google Material
图像响应式 不溢出视口
优先标题 + CTA 简化首屏

OG图像分享

# 为着陆页生成OG图像
infsh app run falai/flux-dev-lora --input '{
  "prompt": "干净专业社交分享卡片，产品名称和标语在现代渐变背景上，极简设计，企业科技美学，1200x630宽高比等效",
  "width": 1200,
  "height": 630
}'

# 或使用html-to-image进行基于模板的方法
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\">在几分钟内而非数天内交付文档</p></div></div>"
}'

页面速度

规则 目标 原因
英雄图像 < 200 KB 首先加载
总页面重量 < 2 MB 移动数据、耐心
延迟加载首屏以下 始终 仅加载可见内容
最小化JavaScript < 200 KB 阻塞渲染
LCP（最大内容绘制） < 2.5秒 Google核心网页要素

常见错误

错误 问题 修复
无清晰标题 访客不知您做什么 6-12个词，结果导向
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