SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场landing-page-design

landing-page-design

设计与创作

查看项目

更新于 10-15 11:42

技能介绍

用途

本技能面向落地页（Landing Page）的转化率优化，提供一套可执行的设计规则与内容结构参考，包括首屏公式、标题写法、主视觉图选择、CTA 心理学、页面区块顺序、社会证明摆放、表单与移动端优化、页面速度目标等。内容本身由 inference.sh CLI（belt）驱动，可调用图像生成与搜索类应用来生成物料、做竞品调研。

主要能力

首屏公式（Above-the-Fold Formula）

首屏指滚动前可见的所有内容，必须在 5 秒内传达价值。包含 5 个要素：

  • 标题（Headline）：6-12 个词，陈述结果。示例："Ship docs in minutes, not days"。
  • 副标题（Subheadline）：15-25 个词，展开说明如何实现。示例："AI-powered documentation that writes itself from your codebase. No templates needed."
  • 主视觉图（Hero image）：展示「结果」而非「产品」。例如人物满意地看着结果，而不是产品界面截图。
  • 主 CTA：动词 + 价值。用 "Start Free Trial" 而不是 "Submit" 或 "Learn More"。
  • 社会证明：Logo、数量或微型证言。示例："Trusted by 10,000+ teams"。

标题写法

可用的标题公式：

  • [结果] without [痛点]："Beautiful docs without the design skills"
  • [结果] in [时间]："Launch your site in 5 minutes"
  • The [更好的方式] to [常见任务]："The faster way to build APIs"
  • Stop [痛点]. Start [结果].："Stop guessing. Start knowing."
  • [数量] [事物] to [结果]："One tool to manage all your data"

失败标题的典型特征：无价值信息的欢迎语、堆砌流行词、笼统空泛、看不出产品做什么。成功示例："Turn customer feedback into product features, automatically"、"The spreadsheet that thinks like a database"、"Find and fix bugs before your users do"。

主视觉图

不建议使用产品界面截图、抽象几何背景、握手类摆拍。建议使用人物满意地看到清晰结果、前后对比、产品使用后的最终结果。文中给出两条生成主视觉图的命令示例（falai/flux-dev-lora 和 bytedance/seedream-4-5）。

CTA 按钮

推荐文案："Start Free Trial"、"Get Started Free"、"See It in Action"、"Create Your First Report"、"Try Free for 14 Days"。不推荐："Submit"、"Click Here"、"Learn More"、"Sign Up"、"Register"。

设计规则：颜色需与背景高对比、是全页最显眼元素；最小高度 44px（点击目标）；位置在首屏内，并在每个主要区块后重复；按钮周围留足留白；如需次要 CTA，用下方文字链接（如 "or watch a demo"）。

页面区块顺序

  1. Hero：核心价值与主 CTA（标题 + 图片 + CTA）
  2. Social Proof：建立信任（Logo、数字、徽章）
  3. Problem：引发共鸣（用户能识别的痛点）
  4. Solution/Features：展示如何解决（3 个关键功能配图）
  5. How It Works：降低复杂度（注册、配置、获益三步）
  6. Testimonials：证明有效（2-3 条具体客户证言）
  7. Pricing：促成决策（清晰档位，高亮推荐项）
  8. FAQ：处理异议（5-7 个常见问题）
  9. Final CTA：承接剩余访客（重复主 CTA 并加入紧迫感）

社会证明类型

公司 Logo（处理最快、信任度高，放首屏下方）、用户数量（规模信号，放首屏或社会证明栏）、星级评分（产品质量，放 CTA 附近）、证言（详细可信度，独立区块）、案例数据（具体佐证，功能区块）、信任徽章（安全/合规，放表单、定价、页脚附近）。

表单设计

每增加一个字段转化约下降 11%，应尽量减少字段；注册场景最多姓名 + 邮箱，不要问电话、公司、职位；使用单栏布局；行内即时校验；错误信息清晰；提交按钮文案等于动作（"Create Account" 而非 "Submit"）。

移动端优化

CTA 按钮全宽、滚动时吸底常驻、避免横向滚动、字体最小 16px（iOS 对小于 16px 的输入框会缩放）、点击目标最小 48×48px、图片响应式、首屏优先保留标题与 CTA。

OG 分享图

可用 falai/flux-dev-lora 生成 1200×630 的分享卡片，也可用 infsh/html-to-image 基于 HTML 模板生成。

页面速度

主视觉图 < 200 KB；页面总重 < 2 MB；首屏以下懒加载；JavaScript < 200 KB；LCP（Largest Contentful Paint）< 2.5s（Google Core Web Vitals）。

常见错误与修复

无清晰标题（改为 6-12 词、面向结果）；CTA 写 "Learn More"（改为动词 + 具体价值）；主视觉图放产品截图（改为展示结果、用生活化影像）；多个竞争性 CTA（保留一个主 CTA，最多一个次要）；无社会证明（加 Logo、数量或证言）；表单字段过多（最多姓名 + 邮箱）；只做桌面端（移动优先，60%+ 流量来自移动端）；最终 CTA 无紧迫感（如 "Start your free 14-day trial"）。

使用方式

需先安装 inference.sh CLI（belt）：

npx skills add belt-sh/cli
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"
}'

生成 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
}'

或用 HTML 模板生成：

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

相关技能安装命令：

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

适用场景

适用于 SaaS、产品官网、营销活动页等落地页的设计与转化率优化，尤其适合需要快速生成主视觉图、OG 分享图并做竞品调研的场景。

限制

资料中未提供该技能本身的收费与价格信息，暂未提供。页面速度指标、表单转化下降比例、移动端流量占比等均为资料给出的经验性参考值，实际效果因项目而异。