重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
npx skills add https://github.com/tool-belt/skills --skill landing-page-design通过 inference.sh CLI 的 AI 生成视觉效果,设计高转化率的着陆页。
需要 inference.sh CLI (
infsh)。安装说明
infsh login
# 生成主视觉图
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
}'
# 研究竞争对手的着陆页
infsh 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] │
└─────────────────────────────────────────────────┘
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 要素 | 规则 | 示例 |
|---|---|---|
| 标题 | 6-12 个词,陈述结果 | "Ship docs in minutes, not days" |
| 副标题 | 15-25 个词,阐述如何实现 | "AI-powered documentation that writes itself from your codebase. No templates needed." |
| 主视觉图 | 展示结果,而非产品 | 人物满意地看着结果,而不是你界面的截图 |
| 主要行动号召 | 行动动词 + 价值 | "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"
❌ 仪表盘的截图 (无聊,一眼难以理解)
❌ 抽象的几何背景 (没有传达任何信息)
❌ 握手的库存照片 (陈词滥调)
✅ 人物满意地看着屏幕上清晰的结果
✅ 使用前后的转变
✅ 使用你产品的最终结果
# 以结果为中心的主视觉图
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
}'
# 产品在场景中的主视觉图
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"
}'
| 好的行动号召 | 差的行动号召 |
|---|---|
| "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 (点击目标),宽度足以容纳文字和内边距 |
| 位置 | 首屏可见,在每个主要部分后重复 |
| 留白 | 按钮周围有足够的边距,不要拥挤 |
| 次要行动号召 | 如果需要,在下方使用文本链接 ("or watch a demo") |
着陆页经过验证的排列顺序:
| 部分 | 目的 | 关键要素 |
|---|---|---|
| 1. 首屏 | 核心价值,主要行动号召 | 标题 + 图片 + 行动号召 |
| 2. 社会证明 | 建立信任 | 徽标、数字、徽章 |
| 3. 问题 | 产生共鸣 | 他们能识别的痛点 |
| 4. 解决方案/功能 | 展示你如何解决 | 3 个关键功能配以视觉元素 |
| 5. 工作原理 | 降低复杂性 | 3 个步骤: 注册、配置、受益 |
| 6. 推荐语 | 证明其有效 | 2-3 条具体的客户引述 |
| 7. 定价 | 促成决策 | 清晰的层级,突出推荐方案 |
| 8. 常见问题 | 处理异议 | 5-7 个常见问题 |
| 9. 最终行动号召 | 捕获剩余访客 | 重复主要行动号召,增加紧迫感 |
| 类型 | 影响力 | 放置位置 |
|---|---|---|
| 公司徽标 | 处理最快,信任度高 | 首屏下方 |
| 用户数量 | 规模信号 | 首屏或社会证明栏 |
| 星级评分 | 产品质量 | 靠近行动号召 |
| 推荐语 | 详细的可靠性 | 独立部分 |
| 案例研究数据 | 具体证明 | 功能部分 |
| 信任徽章 | 安全性/合规性 | 靠近表单、定价、页脚 |
# 研究社会证明数据
infsh 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" |
| 规则 | 原因 |
|---|---|
| 行动号召按钮全宽 | 便于拇指点击 |
| 滚动时固定行动号召 | 始终可访问 |
| 无水平滚动 | 破坏移动端布局 |
| 字体最小 16px | iOS 会放大 16px 以下的输入框 |
| 点击目标最小 48x48px | Apple HIG, Google Material |
| 图片响应式 | 不要超出视口 |
| 优先处理标题 + 行动号召 | 简化首屏内容 |
# 为着陆页生成 OG 图片
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
}'
# 或者使用 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\">Ship docs in minutes, not days</p></div></div>"
}'
| 规则 | 目标 | 原因 |
|---|---|---|
| 主视觉图 | < 200 KB | 最先加载的内容 |
| 页面总大小 | < 2 MB | 移动数据、耐心 |
| 首屏以下懒加载 | 始终 | 只加载可见内容 |
| 最小化 JavaScript | < 200 KB | 阻塞渲染 |
| 最大内容绘制 | < 2.5s | Google 核心网页指标 |
| 错误 | 问题 | 修复方法 |
|---|---|---|
| 没有清晰的标题 | 访客不知道你是做什么的 | 6-12 个词,以结果为中心 |
| 行动号召写 "Learn More" | 承诺度太低 | 行动动词 + 具体价值 |
| 主视觉图是产品截图 | 难以理解,无聊 | 展示结果,使用生活化图像 |
| 多个竞争的行动号召 | 决策瘫痪 | 一个主要行动号召,最多一个次要的 |
| 没有社会证明 | 没有信任信号 | 添加徽标、数量或推荐语 |
| 表单字段太多 | 每个字段降低转化率约 11% | 最多姓名 + 邮箱 |
| 仅针对桌面设计 | 60%+ 的流量来自移动端 | 移动优先设计 |
| 最终行动号召没有紧迫感 | 访客离开并忘记 | "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
浏览所有应用: infsh app list
每周安装数
56
仓库
GitHub 星标数
319
首次出现
今天
安全审计
安装于
claude-code46
amp37
opencode37
kimi-cli37
codex37
github-copilot37
Design high-converting landing pages with AI-generated visuals via inference.sh CLI.
Requires inference.sh CLI (
infsh). Install instructions
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"
}'
Everything visible before scrolling must communicate value in 5 seconds.
┌─────────────────────────────────────────────────┐
│ [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] │
└─────────────────────────────────────────────────┘
| Element | Rule | Example |
|---|---|---|
| Headline | 6-12 words, states the outcome | "Ship docs in minutes, not days" |
| Subheadline | 15-25 words, expands on how | "AI-powered documentation that writes itself from your codebase. No templates needed." |
| Hero image | Shows the OUTCOME, not the product | Person looking satisfied at results, not a screenshot of your UI |
| Primary CTA | Action verb + value | "Start Free Trial" not "Submit" or "Learn More" |
| Social proof | Logos, count, or micro-testimonial | "Trusted by 10,000+ teams at [logos]" |
| Formula | Example |
|---|---|
| [Outcome] without [pain] | "Beautiful docs without the design skills" |
| [Outcome] in [timeframe] | "Launch your site in 5 minutes" |
| The [better way] to [common task] | "The faster way to build APIs" |
| Stop [pain]. Start [outcome]. | "Stop guessing. Start knowing." |
| [Number] [things] to [outcome] | "One tool to manage all your data" |
❌ "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"
}'
| Good CTAs | Bad CTAs |
|---|---|
| "Start Free Trial" | "Submit" |
| "Get Started Free" | "Click Here" |
| "See It in Action" | "Learn More" (low commitment) |
| "Create Your First Report" | "Sign Up" (vague) |
| "Try Free for 14 Days" | "Register" |
Formula: Action verb + value/outcome + (optional: reduce risk)
| Element | Rule |
|---|---|
| Color | High contrast with background — must be the most visible element |
| Size | Minimum 44px height (tap target), wide enough for text + padding |
| Position | Above the fold, repeated after each major section |
| Whitespace | Generous padding around button, don't crowd it |
| Secondary CTA | If needed, use text link below ("or watch a demo") |
The proven sequence for landing pages:
| Section | Purpose | Key Element |
|---|---|---|
| 1. Hero | Core value, primary CTA | Headline + image + CTA |
| 2. Social Proof | Build trust | Logos, numbers, badges |
| 3. Problem | Create empathy | Pain point they recognize |
| 4. Solution/Features | Show how you solve it | 3 key features with visuals |
| 5. How It Works | Reduce complexity | 3 steps: sign up, configure, benefit |
| 6. Testimonials | Prove it works | 2-3 specific customer quotes |
| 7. Pricing | Enable decision | Clear tiers, highlight recommended |
| 8. |
| Type | Impact | Placement |
|---|---|---|
| Company logos | Fastest to process, high trust | Below hero |
| User count | Scale signal | Hero or social proof bar |
| Star rating | Product quality | Near CTA |
| Testimonials | Detailed credibility | Dedicated section |
| Case study stats | Specific proof | Feature sections |
| Trust badges | Security/compliance | Near forms, pricing, footer |
# 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?"
}'
| Rule | Impact |
|---|---|
| Every field reduces conversion ~11% | Minimize fields |
| Name + Email = maximum for signups | Don't ask for phone, company, role |
| Single-column layout | Don't use multi-column forms |
| Inline validation | Show errors immediately, not on submit |
| Clear error messages | "Email is required" not "Error in field 3" |
| Submit button text = action | "Create Account" not "Submit" |
| Rule | Why |
|---|---|
| CTA button full width | Easy to tap with thumbs |
| Sticky CTA on scroll | Always accessible |
| No horizontal scrolling | Breaks mobile layout |
| Font minimum 16px | iOS zooms inputs below 16px |
| Tap targets minimum 48x48px | Apple HIG, Google Material |
| Images responsive | Don't overflow viewport |
| Prioritize headline + CTA | Simplify above-the-fold |
# 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>"
}'
| Rule | Target | Why |
|---|---|---|
| Hero image | < 200 KB | First thing to load |
| Total page weight | < 2 MB | Mobile data, patience |
| Lazy load below-fold | Always | Only load what's visible |
| Minimize JavaScript | < 200 KB | Blocks rendering |
| LCP (Largest Contentful Paint) | < 2.5s | Google Core Web Vitals |
| Mistake | Problem | Fix |
|---|---|---|
| No clear headline | Visitor doesn't know what you do | 6-12 words, outcome-focused |
| CTA says "Learn More" | Too low commitment | Action verb + specific value |
| Hero is a product screenshot | Hard to parse, boring | Show the outcome, use lifestyle imagery |
| Multiple competing CTAs | Decision paralysis | One primary CTA, one secondary max |
| No social proof | No trust signal | Add logos, counts, or testimonials |
| Too many form fields | Conversion drops ~11% per field | Name + email maximum |
| Desktop-only design | 60%+ traffic is mobile | Design mobile-first |
| No urgency in final CTA | Visitors leave and forget | "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
Browse all apps: infsh app list
Weekly Installs
56
Repository
GitHub Stars
319
First Seen
Today
Security Audits
Gen Agent Trust HubPassSocketWarnSnykWarn
Installed on
claude-code46
amp37
opencode37
kimi-cli37
codex37
github-copilot37
shadcn/ui 框架:React 组件库与 UI 设计系统,Tailwind CSS 最佳实践
74,900 周安装
| Handle objections |
| 5-7 common questions |
| 9. Final CTA | Capture remainders | Repeat primary CTA with urgency |