安装 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\">春季大促 — 享 7 折优惠</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：
┌──────────────────────────────────┐
│ HEADER IMAGE │ ← 品牌/视觉钩子
│ (600 x 200-300) │
├──────────────────────────────────┤
│ │
│ Headline (one line) │ ← 邮件主题
│ │
│ 2-3 sentences of body copy │ ← 为何关注
│ explaining the value. │
│ │
│ ┌──────────────┐ │
│ │ CTA BUTTON │ │ ← 单一清晰行动
│ └──────────────┘ │
│ │
├──────────────────────────────────┤
│ Footer: Unsubscribe link │
└──────────────────────────────────┘
主题行
有效的公式
| 公式 | 示例 | 打开率影响 |
|---|
| 数字 + 好处 | "5 种方法，将您的构建时间减半" | 高 |
| 提问 | "您还在星期五部署吗？" | 高 |
| 如何做 | "3 步自动生成您的报告" | 中-高 |
| 紧迫感（真实） | "最后一天：年度计划享 7 折" | 高（如为真） |
| 个性化 | "[姓名]，您的周报已就绪" | 非常高 |
| 好奇心缺口 | "我们用户赞不绝口的一个功能" | 中-高 |
规则
| 规则 | 值 |
|---|
| 长度 | 30-50 个字符（移动端截断在约 35 个字符） |
| 预览文本 | 主题后前 40-100 个字符——需精心设计 |
| 表情符号 | 最多 1 个，置于开头或结尾，针对受众测试 |
| 全部大写 | 从不——会触发垃圾邮件过滤器 |
| 垃圾邮件触发词 | 避免：主题中包含 "免费"、"立即行动"、"限时"、"点击此处" |
| 个性化 | 主题中使用 [名字] 可提升打开率 20% 以上 |
预览文本
预览文本出现在收件箱中主题行之后。不要浪费它。
❌ "在浏览器中查看此邮件"（默认，浪费空间）
❌ "无法正常查看？"（无人关心）
✅ 主题："5 种方法缩短构建时间"
预览："第三项每周为我们节省了 6 小时"
✅ 主题："您的月报已就绪"
预览："收入增长 23% —— 以下是驱动因素"
邮件类型
欢迎邮件（自动发送，第 0 天）
| 元素 | 内容 |
|---|
| 主题 | "欢迎使用 [产品] —— 接下来会发生什么" |
| 页眉 | 品牌图片或产品截图 |
| 正文 | 3-4 句话：他们注册了什么、期待什么、一个快速入门技巧 |
| CTA | "完成设置" 或 "尝试第一个 [操作]" |
| 时机 | 注册后立即发送 |
促销/活动邮件
| 元素 | 内容 |
|---|
| 主题 | 利益导向，如属实可加入紧迫感 |
| 页眉 | 展示优惠/结果的英雄图片 |
| 正文 | 问题 → 解决方案 → 优惠 → 截止日期 |
| CTA | "获取 7 折优惠" 或 "开始免费试用" |
| 紧迫感 | 真实截止日期，非虚假稀缺 |
产品更新/变更日志
| 元素 | 内容 |
|---|
| 主题 | "新功能：[功能名称] 现已上线" |
| 页眉 | 功能截图或视觉效果 |
| 正文 | 新增内容、重要性、使用方法 |
| 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 应用、Apple Mail、Outlook 上测试 | 三大主流邮件客户端 |
超过 60% 的邮件在移动设备上打开。 请以移动优先进行设计。
可送达性检查清单
| 因素 | 规则 |
|---|
| 图片与文本比例 | 最多 40% 图片，60% 文本（垃圾邮件过滤器会标记图片过多邮件） |
| 图片替代文本 | 始终包含——许多客户端默认屏蔽图片 |
| 取消订阅链接 | 法律要求（CAN-SPAM、GDPR）——易于查找 |
| 发件人名称 | 可识别的个人或品牌名称 |
| 回复地址 | 真实地址，不要用 no-reply@（影响可送达性） |
| 列表卫生 | 定期清理退回地址，每季度清理不活跃订阅者 |
| SPF/DKIM/DMARC | 技术身份验证——只需设置一次，对收件箱至关重要 |
常见错误
| 错误 | 问题 | 修复 |
|---|
| 无预览文本 | 显示“在浏览器中查看”或随机代码 | 主动设置预览文本 |
| 纯图片邮件 | 图片被屏蔽 = 空白邮件 + 垃圾风险 | 文本占 60% 以上，图片添加替代文本 |
| 多个 CTA | 决策瘫痪，点击率降低 | 每封邮件只有一个主要 CTA |
| 字体过小 | 在移动端无法阅读 | 正文最小 14px，标题 22px |
| no-reply@ 发件人 | 损害可送达性，感觉不人性化 | 使用真实回复地址 |
| 未进行移动端测试 | 超过 60% 的读者面临布局失效 | 在 Gmail 应用和 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