name: email-design
description: “电子邮件营销设计，包含布局模式、主题行公式和可交付性规则。覆盖欢迎序列、促销邮件、事务性模板和移动优化。用途：电子邮件营销、新闻稿设计、滴灌活动、邮件模板、事务性邮件。触发词：邮件设计、邮件模板、邮件营销、新闻稿设计、邮件布局、邮件活动、滴灌活动、欢迎邮件、促销邮件、事务性邮件、邮件主题行、邮件标题图像、邮件横幅”
allowed-tools: Bash(infsh *)
邮件设计
使用 inference.sh CLI 通过 AI 生成的视觉内容设计高转化率的营销邮件。
快速开始
curl -fsSL https://cli.inference.sh | sh && infsh login
# 生成邮件标题横幅
infsh 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>"
}'
安装说明： 安装脚本 仅检测您的操作系统/架构，从 dist.inference.sh 下载匹配的二进制文件，并验证其 SHA-256 校验和。无需提升权限或后台进程。手动安装和验证 可用。
邮件宽度和布局
| 约束 |
值 |
原因 |
| 最大宽度 |
600px |
Gmail、Outlook 的渲染标准 |
| 移动宽度 |
320-414px |
响应式回退 |
| 单列布局 |
首选 |
更好的移动端渲染 |
| 双列布局 |
谨慎使用 |
在许多客户端上会断裂 |
| 图像宽度 |
最大 600px，双列时 300px |
Retina：提供 2 倍尺寸 (1200px) |
| 字体大小 (正文) |
14-16px |
低于 14px 在移动端难以阅读 |
| 字体大小 (标题) |
22-28px |
必须可扫描 |
| 行高 |
1.5 |
所有设备上的可读性 |
倒金字塔布局
最有效的邮件布局将注意力引导至单一 CTA：
┌──────────────────────────────────┐
│ 标题图像 │ ← 品牌/视觉钩子
│ (600 x 200-300) │
├──────────────────────────────────┤
│ │
│ 标题 (一行) │ ← 这是什么内容
│ │
│ 2-3 句正文副本 │ ← 为什么我应该关心
│ 解释价值。 │
│ │
│ ┌──────────────┐ │
│ │ CTA 按钮 │ │ ← 一个清晰的操作
│ └──────────────┘ │
│ │
├──────────────────────────────────┤
│ 页脚：取消订阅链接 │
└──────────────────────────────────┘
主题行
有效的公式
| 公式 |
示例 |
打开率影响 |
| 数字 + 好处 |
“5 种方法将您的构建时间减半” |
高 |
| 问题 |
“您还在周五部署吗？” |
高 |
| 如何做 |
“如何用 3 步自动化您的报告” |
中等至高 |
| 紧迫性 (真实) |
“最后一天：年度计划 7 折” |
高 (如果真实) |
| 个性化 |
“[姓名]，您的周报已准备好” |
非常高 |
| 好奇心缺口 |
“用户热议的一个功能” |
中等至高 |
规则
| 规则 |
值 |
| 长度 |
30-50 个字符 (移动端在约 35 个字符处截断) |
| 预览文本 |
主题后前 40-100 个字符 — 有意识设计 |
| 表情符号 |
最多 1 个，在开始或结束，根据受众测试 |
| 全大写 |
永不 — 触发垃圾邮件过滤器 |
| 垃圾邮件触发词 |
避免：主题中出现“免费”、“立即行动”、“限时”、“点击这里” |
| 个性化 |
主题中加入 [名字] 可提升打开率 20%+ |
预览文本
预览文本出现在收件箱中的主题行后。不要浪费它。
❌ "在浏览器中查看此邮件" (默认，浪费空间)
❌ "查看此邮件有困难？" (没人关心)
✅ 主题："5 种方法减少构建时间"
预览："第 3 种每周为我们节省了 6 小时"
✅ 主题："您的月度报告已准备好"
预览："收入增长 23% — 驱动因素"
邮件类型
欢迎邮件 (自动化，第 0 天)
| 元素 |
内容 |
| 主题 |
“欢迎使用 [产品] — 下一步是什么” |
| 标题 |
品牌图像或产品截图 |
| 正文 |
3-4 句：他们注册了什么、预期、一个快速胜利 |
| CTA |
“完成您的设置” 或 “尝试您的第一个 [操作]” |
| 时机 |
注册后立即 |
促销 / 活动
| 元素 |
内容 |
| 主题 |
以好处为中心，如有真实紧迫性 |
| 标题 |
展示优惠/结果的英雄图像 |
| 正文 |
问题 → 解决方案 → 优惠 → 截止日期 |
| CTA |
“获得 7 折优惠” 或 “开始免费试用” |
| 紧迫性 |
真实截止日期，非虚假稀缺 |
产品更新 / 更新日志
| 元素 |
内容 |
| 主题 |
“新功能：[功能名称] 已上线” |
| 标题 |
功能的截图或视觉内容 |
| 正文 |
什么是新功能、为什么重要、如何使用 |
| CTA |
“尝试 [功能]” |
事务性 (收据、确认)
| 规则 |
原因 |
| 主题中清晰目的 |
“您的订单 #1234 已确认” |
| 极简设计 |
不与营销混淆 |
| 关键信息在首屏 |
订单号、金额、日期 |
| 无促销内容 (大多) |
CAN-SPAM 允许少量，但保持最少 |
标题图像设计
# 欢迎邮件标题
infsh 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\">数据流</h1><p style=\"font-size:18px;opacity:0.8;margin-top:4px\">您的数据，自动化</p></div></div>"
}'
# 促销标题
infsh 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\">7折优惠</h1><p style=\"font-size:18px;opacity:0.8\">所有年度计划。周日结束。</p></div></div>"
}'
# 功能公告标题带 AI 视觉
infsh app run falai/flux-dev-lora --input '{
"prompt": "干净现代的邮件标题横幅，抽象流动数据可视化，深蓝色渐变背景，微妙发光节点和连接，科技美学，极简，无文字，600x250 等效",
"width": 1200,
"height": 500
}'
CTA 按钮
| 规则 |
值 |
| 宽度 |
200-300px，非全宽 |
| 高度 |
最小 44-50px (点击目标) |
| 颜色 |
与背景高对比 |
| 文本 |
动作动词 + 结果：“开始免费试用” |
| 形状 |
圆角 (4-8px 边框半径) |
| 放置 |
首屏，长邮件底部重复 |
| 数量 |
每封邮件一个主要 CTA |
防弹按钮
HTML 按钮在不同邮件客户端中渲染方式不同。使用“防弹按钮”技术 (VML 用于 Outlook，HTML/CSS 用于其他)：
<!-- 防弹按钮 (适用于所有地方包括 Outlook) -->
<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 高 |
苹果/安卓点击目标 |
| 图像缩放至 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
浏览所有应用：infsh app list