安裝 belt CLI 技能： npx skills add belt-sh/cli
電子郵件設計
使用 inference.sh CLI 設計高轉換率的行銷電子郵件，並搭配 AI 生成的視覺素材。
快速開始
需要 inference.sh CLI（belt）。安裝說明
belt login
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:600px;height:250px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-family:system-ui;color:white;text-align:center\"><div><h1 style=\"font-size:36px;margin:0\">春季特賣 — 七折優惠</h1><p style=\"font-size:18px;opacity:0.9\">僅限本週末</p></div></div>"
}'
電子郵件寬度與版型
| 限制條件 | 數值 | 原因 |
|---|
| 最大寬度 | 600px | Gmail、Outlook 渲染標準 |
| 行動裝置寬度 | 320-414px | 響應式備援 |
| 單欄 | 優先採用 | 行動裝置渲染效果較佳 |
| 雙欄 | 謹慎使用 | 在許多客戶端上會跑版 |
| 圖片寬度 | 單欄最多 600px，雙欄 300px | Retina 螢幕需提供 2x（1200px） |
| 字型大小（內文） | 14-16px | 低於 14px 在行動裝置上難以閱讀 |
| 字型大小（標題） | 22-28px | 必須能快速掃讀 |
| 行高 | 1.5 | 所有裝置上的可讀性 |
倒金字塔版型
最有效的電子郵件版型能將注意力引導至單一行動呼籲（CTA）：
┌──────────────────────────────────┐
│ 橫幅圖片 │ ← 品牌/視覺鉤子
│ (600 x 200-300) │
├──────────────────────────────────┤
│ │
│ 標題（一行） │ ← 這封郵件關於什麼
│ │
│ 2-3 句內文 │ ← 為什麼我該關心
│ 說明價值。 │
│ │
│ ┌──────────────┐ │
│ │ CTA 按鈕 │ │ ← 一個明確的行動
│ └──────────────┘ │
│ │
├──────────────────────────────────┤
│ 頁尾：取消訂閱連結 │
└──────────────────────────────────┘
主旨列
有效的公式
| 公式 | 範例 | 開信率影響 |
|---|
| 數字 + 利益 | "5 種方法將建置時間減半" | 高 |
| 提問 | "你還在星期五部署嗎？" | 高 |
| 教學 | "3 步驟自動化你的報告" | 中高 |
| 緊迫感（真實） | "最後一天：年繳方案七折優惠" | 高（如果是真的） |
| 個人化 | "[姓名]，你的每週報告已備妥" | 非常高 |
| 好奇心缺口 | "我們的用戶愛不釋手的功能" | 中高 |
規則
| 規則 | 數值 |
|---|
| 長度 | 30-50 個字元（行動裝置約 35 字元會截斷） |
| 預覽文字 | 主旨後的前 40-100 字元——請刻意設計 |
| 表情符號 | 最多 1 個，放在開頭或結尾，與你的受眾測試 |
| 全部大寫 | 絕對不要——會觸發垃圾郵件過濾 |
| 垃圾郵件觸發詞 | 避免在主旨中使用：「免費」、「立即行動」、「限時」、「點擊這裡」 |
| 個人化 | 在主旨中加入[名字]可提升開信率 20% 以上 |
預覽文字
預覽文字會顯示在收件匣主旨後方。不要浪費這個空間。
❌ 「在瀏覽器中檢視此郵件」（預設，浪費空間）
❌ 「無法正常顯示？」（沒人在意）
✅ 主旨：「5 種方法縮短建置時間」
預覽：「方法三每週為我們省下 6 小時」
✅ 主旨：「你的每月報告已備妥」
預覽：「營收成長 23% — 以下是驅動因素」
郵件類型
歡迎信（自動化，第 0 天）
| 元素 | 內容 |
|---|
| 主旨 | 「歡迎使用 [產品] — 接下來會發生什麼」 |
| 橫幅 | 品牌圖片或產品截圖 |
| 內文 | 3-4 句：他們註冊了什麼、可以期待什麼、一個快速成功的技巧 |
| CTA | 「完成設定」或「嘗試你的第一個 [動作]」 |
| 時機 | 註冊後立即寄出 |
促銷 / 活動
| 元素 | 內容 |
|---|
| 主旨 | 利益導向，如果真實則加入緊迫感 |
| 橫幅 | 展示優惠/成果的主視覺圖 |
| 內文 | 問題 → 解決方案 → 優惠 → 截止日期 |
| CTA | 「立享七折」或「開始免費試用」 |
| 緊迫感 | 真實截止日期，不要捏造稀缺性 |
產品更新 / 版本紀錄
| 元素 | 內容 |
|---|
| 主旨 | 「新功能：[功能名稱] 上線了」 |
| 橫幅 | 功能的截圖或視覺圖 |
| 內文 | 最新功能、重要性、使用方法 |
| CTA | 「試用 [功能]」 |
交易確認（收據、確認信）
| 規則 | 原因 |
|---|
| 主旨中清楚說明目的 | 「你的訂單 #1234 已確認」 |
| 最小化設計 | 不要與行銷信件混淆 |
| 關鍵資訊在摺疊上方 | 訂單編號、金額、日期 |
| 儘量不要有促銷內容 | CAN-SPAM 允許少量，但保持簡潔 |
橫幅圖片設計
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:600px;height:250px;background:linear-gradient(135deg,#2d3436,#636e72);display:flex;align-items:center;padding:40px;font-family:system-ui;color:white\"><div><p style=\"font-size:14px;text-transform:uppercase;letter-spacing:2px;opacity:0.7;margin:0\">歡迎使用</p><h1 style=\"font-size:42px;margin:8px 0 0;font-weight:800\">DataFlow</h1><p style=\"font-size:18px;opacity:0.8;margin-top:4px\">你的資料，自動化</p></div></div>"
}'
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:600px;height:300px;background:linear-gradient(135deg,#e74c3c,#c0392b);display:flex;align-items:center;justify-content:center;font-family:system-ui;color:white;text-align:center\"><div><p style=\"font-size:20px;opacity:0.9;margin:0\">僅限本週末</p><h1 style=\"font-size:72px;margin:8px 0;font-weight:900\">七折優惠</h1><p style=\"font-size:18px;opacity:0.8\">所有年繳方案。週日截止。</p></div></div>"
}'
belt app run falai/flux-dev-lora --input '{
"prompt": "clean modern email header banner, abstract flowing data visualization, dark blue gradient background, subtle glowing nodes and connections, tech aesthetic, minimal, no text, 600x250 equivalent",
"width": 1200,
"height": 500
}'
CTA 按鈕
| 規則 | 數值 |
|---|
| 寬度 | 200-300px，不要滿版 |
| 高度 | 44-50px 以上（觸控目標） |
| 顏色 | 與背景高對比 |
| 文字 | 動詞 + 成果：「開始免費試用」 |
| 形狀 | 圓角（border-radius 4-8px） |
| 放置位置 | 摺疊上方，長郵件時在底部重複 |
| 數量 | 每封郵件一個主要 CTA |
防彈按鈕
HTML 按鈕在不同電子郵件客戶端中渲染方式不同。請使用「防彈按鈕」技術（Outlook 用 VML，其他用 HTML/CSS）：
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" bgcolor="#22c55e" style="border-radius:6px;">
<a href="https://yoursite.com/action" target="_blank"
style="font-size:16px;font-family:sans-serif;color:#ffffff;
text-decoration:none;padding:12px 24px;display:inline-block;
font-weight:bold;">
開始免費試用
</a>
</td>
</tr>
</table>
行動裝置優化
| 規則 | 原因 |
|---|
| 單欄版型 | 多欄在行動裝置上會跑版 |
| 字型最小 14px | 更小則無法閱讀 |
| CTA 按鈕最小 44px 高 | Apple/Android 觸控目標 |
| 圖片縮放至 100% 寬度 | 防止水平滾動 |
| 元素垂直堆疊 | 並排顯示在窄螢幕上會跑版 |
| 在 Gmail App、Apple Mail、Outlook 上測試 | 三大電子郵件客戶端 |
60% 以上的電子郵件在行動裝置上開啟。 採用手機優先設計。
送達率檢查清單
| 因素 | 規則 |
|---|
| 圖片與文字比例 | 圖片最多 40%，文字 60%（垃圾郵件過濾器會標記圖片過多的郵件） |
| 圖片的替代文字 | 一定要有——許多客戶端預設封鎖圖片 |
| 取消訂閱連結 | 法律要求（CAN-SPAM、GDPR）——要容易找到 |
| 寄件人名稱 | 可辨識的人名或品牌名稱 |
| 回覆地址 | 真實地址，不要用 no-reply@（會損害送達率） |
| 清單維護 | 每季清除退信、停用活躍度低的訂閱者 |
| SPF/DKIM/DMARC | 技術驗證——設定一次，對進入收件匣至關重要 |
常見錯誤
| 錯誤 | 問題 | 修正方法 |
|---|
| 無預覽文字 | 顯示「在瀏覽器檢視」或隨機亂碼 | 刻意設定預覽文字 |
| 純圖片郵件 | 圖片被封鎖 = 空白郵件 + 垃圾郵件風險 | 60% 以上文字，圖片加上替代文字 |
| 多個 CTA | 決策疲勞，降低點擊率 | 每封郵件一個主要 CTA |
| 文字太小 | 在行動裝置上無法閱讀 | 內文最小 14px，標題 22px |
| 使用 no-reply@ 寄件地址 | 損害送達率，感覺不親切 | 使用真實回覆地址 |
| 未進行行動裝置測試 | 對 60% 以上的讀者來說版面會跑掉 | 在 Gmail App 和 Apple Mail 上測試 |
| 缺少取消訂閱功能 | 違法（CAN-SPAM）+ 增加垃圾郵件投訴 | 在頁尾放置清楚的取消訂閱連結 |
| 過度設計 | 電子郵件客戶端 CSS 支援不一致 | 簡單版型，使用內嵌樣式 |
| 捏造緊迫感 | 削弱信任，讓使用者忽略訊息 | 只使用真實截止日期 |
相關技能
npx skills add inference-sh/skills@landing-page-design
npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@prompt-engineering
瀏覽所有應用程式：belt app list