安裝 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] │
│ │
│ 標題 (6-12 字) │
│ ───────────────────────── │
│ 副標題 (15-25 字) [英雄圖片] │
│ 展示的是 │
│ [主要 CTA 按鈕] 「成果」， │
│ 「開始免費試用」 而非產品 │
│ │
│ 社會證明：「超過 10,000 個團隊信賴」 │
│ [logo] [logo] [logo] [logo] [logo] │
└─────────────────────────────────────────────────┘
5 大元素
| 元素 | 規則 | 範例 |
|---|
| 標題 | 6-12 字，陳述成果 | 「幾分鐘內搞定文件，無需數天」 |
| 副標題 | 15-25 字，補充說明如何達成 | 「AI 驅動的文件工具，能從你的程式碼庫自動產生。無須任何模板。」 |
| 英雄圖片 | 展示「成果」，而非產品 | 使用者在看到結果後滿意的神情，而非你 UI 的螢幕截圖 |
| 主要 CTA | 行動動詞 + 價值 | 「開始免費試用」，而非「提交」或「了解更多」 |
| 社會證明 | Logo、數字或微型推薦 | 「受到超過 10,000 個團隊的信賴 [logo]」 |
標題
高轉換率的公式
| 公式 | 範例 |
|---|
| [成果] 無需 [痛苦] | 「無需設計技能，就能擁有精美文件」 |
| [成果] 在 [時間內] | 「5 分鐘內啟動你的網站」 |
| 完成 [常見任務] 的 [更好方法] | 「更快建立 API 的方法」 |
| 停止 [痛苦]。開始 [成果]。 | 「停止猜測。開始掌握。」 |
| [數字] 個 [事物] 來 [達成成果] | 「一個工具管理你所有的數據」 |
標題失敗的原因
❌ 「歡迎來到我們的平台」（完全沒提到價值）
❌ 「世界上最先進的 AI 驅動解決方案」（術語堆砌，缺乏具體內容）
❌ 「我們幫助企業成長」（模糊、籠統）
❌ 「次世代企業級軟體」（到底能做什麼？）
✅ 「將客戶反饋自動轉化為產品功能」
✅ 「這份試算表像資料庫一樣聰明」
✅ 「在使用者發現之前，就找到並修復錯誤」
英雄圖片
展示成果，而非產品
❌ 儀表板的螢幕截圖（無聊，一眼難以理解）
❌ 抽象的幾何背景（什麼也沒說）
❌ 握手的庫存照片（老套）
✅ 使用者看到螢幕上清晰成果後滿意的神情
✅ 轉變前後的對比
✅ 使用你產品的終極結果
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 |
|---|
| 「開始免費試用」 | 「提交」 |
| 「免費開始使用」 | 「點擊此處」 |
| 「立即觀看運作方式」 | 「了解更多」（承諾度低） |
| 「建立你的第一份報告」 | 「註冊」（模糊） |
| 「免費試用 14 天」 | 「登記」 |
公式： 行動動詞 + 價值/成果 + （可選：降低風險）
設計
| 元素 | 規則 |
|---|
| 顏色 | 與背景有高度對比 —— 必須是最顯眼的元素 |
| 尺寸 | 最小高度 44px（觸控目標），寬度足夠容納文字與邊距 |
| 位置 | 位於折疊區之上，每個主要區塊後重複擺放 |
| 留白 | 按鈕周圍應有充足的內邊距，不要擁擠 |
| 次要 CTA | 如有需要，使用下方的文字連結（「或觀看示範影片」） |
區塊順序
登陸頁面經過驗證的順序：
| 區塊 | 目的 | 關鍵元素 |
|---|
| 1. 英雄區 | 核心價值，主要 CTA | 標題 + 圖片 + CTA |
| 2. 社會證明 | 建立信任 | Logo、數字、徽章 |
| 3. 痛點 | 喚起同理心 | 他們能識別的痛點 |
| 4. 解決方案/功能 | 展示你如何解決 | 3 個主要功能搭配視覺 |
| 5. 運作方式 | 降低複雜度 | 3 步驟：註冊、設定、獲得效益 |
| 6. 客戶見證 | 證明有效 | 2-3 則具體的客戶引述 |
| 7. 定價 | 促成決策 | 清楚的方案，標註推薦方案 |
| 8. 常見問題 FAQ | 處理異議 | 5-7 個常見問題 |
| 9. 最終 CTA | 捕捉猶豫不決的訪客 | 用急迫感重複主要 CTA |
社會證明類型
| 類型 | 影響 | 位置 |
|---|
| 公司 Logo | 處理速度最快，信任度高 | 英雄區下方 |
| 使用者數量 | 規模信號 | 英雄區或社會證明欄 |
| 星級評分 | 產品品質 | 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 = 註冊的最大限度 | 不要詢問電話、公司、職稱 |
| 單欄式佈局 | 不要使用多欄表單 |
| 即時驗證 | 立即顯示錯誤，而非在提交時 |
| 清晰的錯誤訊息 | 「請填寫 Email」而非「欄位 3 發生錯誤」 |
| 提交按鈕文字代表動作 | 「建立帳戶」而非「提交」 |
行動裝置優化
| 規則 | 原因 |
|---|
| 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 頁面體驗核心指標 |
常見錯誤
| 錯誤 | 問題 | 修正 |
|---|
| 沒有清晰的標題 | 訪客不知道你在做什麼 | 6-12 字，以成果為導向 |
| CTA 寫「了解更多」 | 承諾度過低 | 行動動詞 + 具體價值 |
| 英雄區放產品螢幕截圖 | 難以理解、無聊 | 展示成果，使用情境照 |
| 多個互相競爭的 CTA | 選擇困難 | 最多一個主要 CTA 和一個次要 CTA |
| 沒有社會證明 | 缺乏信任信號 | 加入 Logo、數字或客戶見證 |
| 表單欄位過多 | 轉換率會因每個欄位下降約 11% | 最多姓名 + Email |
| 僅有桌上型電腦設計 | 超過 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
瀏覽所有應用：belt app list