email-design

安装 belt CLI skill： npx skills add belt-sh/cli

邮件设计

通过 inference.sh CLI，借助 AI 生成的视觉素材设计高转化率的营销邮件。

快速入门

需要 inference.sh CLI（belt）。安装说明

belt login

# Generate email header banner
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\">Spring Sale — 30% Off</h1><p style=\"font-size:18px;opacity:0.9\">This weekend only</p></div></div>"
}'

邮件宽度与布局

约束	值	原因
最大宽度	600px	Gmail、Outlook 的渲染标准
移动设备宽度	320-414px	响应式回退
单栏	优先采用	在移动设备上的渲染效果更好
双栏	谨慎使用	许多客户端会出现显示问题
图片宽度	最大 600px，双栏时为 300px	Retina 屏幕：提供 2 倍尺寸（1200px）
字体大小（正文）	14-16px	小于 14px 时，在移动设备上难以阅读
字体大小（标题）	22-28px	必须便于快速浏览
行高	1.5	在所有设备上都易于阅读

倒金字塔布局

最有效的邮件布局会将注意力引导至单个 CTA：

┌──────────────────────────────────┐
│           HEADER IMAGE           │  ← Brand/visual hook
│          (600 x 200-300)         │
├──────────────────────────────────┤
│                                  │
│     Headline (one line)          │  ← What's this about
│                                  │
│     2-3 sentences of body copy   │  ← Why should I care
│     explaining the value.        │
│                                  │
│        ┌──────────────┐          │
│        │   CTA BUTTON  │         │  ← One clear action
│        └──────────────┘          │
│                                  │
├──────────────────────────────────┤
│     Footer: Unsubscribe link     │
└──────────────────────────────────┘

邮件主题

有效公式

公式	示例	打开率影响
数字 + 优势	"5 ways to cut your build time in half"	高
问句	"Are you still deploying on Fridays?"	高
操作指南	"How to automate your reports in 3 steps"	中高
紧迫感（真实）	"Last day: 30% off annual plans"	高（如果属实）
个性化	"[Name], your weekly report is ready"	非常高
好奇心缺口	"The one feature our users can't stop talking about"	中高

规则

规则	值
长度	30-50 个字符（移动设备上约在 35 个字符处截断）
预览文本	主题之后的前 40-100 个字符——应有意设计
表情符号	最多 1 个，放在开头或结尾，并针对受众进行测试
全部大写	切勿使用——会触发垃圾邮件过滤器
垃圾邮件触发词	避免在主题中使用："free"、"act now"、"limited time"、"click here"
个性化	在主题中加入 [First name] 可使打开率提升 20% 以上

预览文本

预览文本会显示在收件箱中主题行之后。不要浪费这个位置。

❌ "View this email in your browser" (default, wasted space)
❌ "Having trouble viewing this?" (no one cares)

✅ Subject: "5 ways to cut build time"
   Preview: "Number 3 saved us 6 hours per week"

✅ Subject: "Your monthly report is ready"
   Preview: "Revenue up 23% — here's what drove it"

邮件类型

欢迎邮件（自动发送，第 0 天）

元素	内容
主题	"Welcome to [Product] — here's what's next"
页眉	品牌图片或产品截图
正文	3-4 句话：用户注册的内容、后续安排以及一个简单的初步收获
CTA	"Complete your setup" 或 "Try your first [action]"
发送时间	注册后立即发送

促销 / 营销活动

元素	内容
主题	突出优势；仅在确有其事时营造紧迫感
页眉	展示优惠或效果的主视觉图片
正文	问题 → 解决方案 → 优惠 → 截止日期
CTA	"Get 30% Off" 或 "Start Free Trial"
紧迫感	使用真实截止日期，不要制造虚假稀缺感

产品更新 / 更新日志

元素	内容
主题	"New: [Feature name] is here"
页眉	功能截图或视觉展示
正文	更新内容、重要性以及使用方法
CTA	"Try [feature]"

事务性邮件（收据、确认信息）

规则	原因
在主题中明确说明用途	"Your order #1234 is confirmed"
设计简洁	避免与营销邮件混淆
关键信息放在首屏	订单号、金额、日期
基本不含促销内容	CAN-SPAM 允许少量促销内容，但应尽量精简

页眉图片设计

# Welcome email header
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\">Welcome to</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\">Your data, automated</p></div></div>"
}'

# Sale / promotional header
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\">This Weekend Only</p><h1 style=\"font-size:72px;margin:8px 0;font-weight:900\">30% OFF</h1><p style=\"font-size:18px;opacity:0.8\">All annual plans. Ends Sunday.</p></div></div>"
}'

# Feature announcement header with AI visual
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（便于点击）
颜色	与背景形成高对比
文本	行动动词 + 结果："Start Free Trial"
形状	圆角（4-8px border-radius）
位置	放在首屏内；长邮件的底部也重复放置
数量	每封邮件只设置一个主要 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;">
        Start Free Trial
      </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