email-design by inferen-sh/skills
npx skills add https://github.com/inferen-sh/skills --skill email-design通过 inference.sh CLI 使用 AI 生成视觉效果,设计高转化率的营销邮件。
需要 inference.sh CLI (
infsh)。安装说明
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\">Spring Sale — 30% Off</h1><p style=\"font-size:18px;opacity:0.9\">This weekend only</p></div></div>"
}'
| 约束条件 | 数值 | 原因 |
|---|---|---|
| 最大宽度 | 600px |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| Gmail、Outlook 渲染标准 |
| 移动端宽度 | 320-414px | 响应式后备方案 |
| 单列布局 | 首选 | 移动端渲染效果更好 |
| 双列布局 | 谨慎使用 | 在许多客户端会错位 |
| 图片宽度 | 最大 600px,双列布局 300px | Retina 屏:提供 2 倍尺寸 (1200px) |
| 字体大小 (正文) | 14-16px | 小于 14px 在移动端难以阅读 |
| 字体大小 (标题) | 22-28px | 必须易于浏览 |
| 行高 | 1.5 | 在所有设备上都具有可读性 |
最有效的邮件布局将注意力引导至单一行动号召:
┌──────────────────────────────────┐
│ 标题图片 │ ← 品牌/视觉钩子
│ (600 x 200-300) │
├──────────────────────────────────┤
│ │
│ 标题 (一行) │ ← 这是关于什么
│ │
│ 2-3 句正文内容 │ ← 我为什么要在乎
│ 解释其价值。 │
│ │
│ ┌──────────────┐ │
│ │ 行动号召按钮 │ │ ← 一个清晰的操作
│ └──────────────┘ │
│ │
├──────────────────────────────────┤
│ 页脚:退订链接 │
└──────────────────────────────────┘
| 公式 | 示例 | 打开率影响 |
|---|---|---|
| 数字 + 好处 | "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" |
| 个性化 | 主题行中加入 [名字] 可将打开率提升 20% 以上 |
预览文本出现在收件箱中主题行之后。不要浪费它。
❌ "View this email in your browser" (默认,浪费空间)
❌ "Having trouble viewing this?" (没人在乎)
✅ 主题: "5 ways to cut build time"
预览: "Number 3 saved us 6 hours per week"
✅ 主题: "Your monthly report is ready"
预览: "Revenue up 23% — here's what drove it"
| 元素 | 内容 |
|---|---|
| 主题 | "Welcome to [Product] — here's what's next" |
| 标题 | 品牌图片或产品截图 |
| 正文 | 3-4 句话:他们注册了什么,可以期待什么,一个快速见效的方法 |
| 行动号召 | "Complete your setup" 或 "Try your first [action]" |
| 时机 | 注册后立即发送 |
| 元素 | 内容 |
|---|---|
| 主题 | 以好处为中心,如果是真实的则加入紧迫感 |
| 标题 | 展示优惠/成果的英雄图片 |
| 正文 | 问题 → 解决方案 → 优惠 → 截止日期 |
| 行动号召 | "Get 30% Off" 或 "Start Free Trial" |
| 紧迫感 | 真实的截止日期,而非虚假的稀缺性 |
| 元素 | 内容 |
|---|---|
| 主题 | "New: [Feature name] is here" |
| 标题 | 功能的截图或视觉效果图 |
| 正文 | 新增内容,为什么重要,如何使用 |
| 行动号召 | "Try [feature]" |
| 规则 | 原因 |
|---|---|
| 主题中目的明确 | "Your order #1234 is confirmed" |
| 极简设计 | 不要与营销邮件混淆 |
| 关键信息在首屏显示 | 订单号、金额、日期 |
| 无促销内容 (通常) | 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\">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>"
}'
# 促销 / 销售标题
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\">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>"
}'
# 功能公告标题,带 AI 视觉效果
infsh 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
}'
| 规则 | 数值 |
|---|---|
| 宽度 | 200-300px,非全宽 |
| 高度 | 最小 44-50px (点击目标) |
| 颜色 | 与背景高对比度 |
| 文本 | 行动动词 + 结果:"Start Free Trial" |
| 形状 | 圆角 (4-8px border-radius) |
| 位置 | 首屏显示,长邮件在底部重复 |
| 数量 | 每封邮件一个主要行动号召 |
HTML 按钮在不同邮件客户端中渲染效果不同。使用"防弹按钮"技术 (Outlook 使用 VML,其他使用 HTML/CSS):
<!-- Bulletproof button (works everywhere including 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;">
Start Free Trial
</a>
</td>
</tr>
</table>
| 规则 | 原因 |
|---|---|
| 单列布局 | 多列布局在移动端会错位 |
| 字体最小 14px | 更小则难以阅读 |
| 行动号召按钮最小高度 44px | Apple/Android 点击目标 |
| 图片缩放至 100% 宽度 | 防止水平滚动 |
| 元素垂直堆叠 | 并排布局在窄屏幕上会错位 |
| 在 Gmail 应用、Apple Mail、Outlook 上测试 | 三大邮件客户端 |
超过 60% 的邮件在移动端打开。 优先为移动端设计。
| 因素 | 规则 |
|---|---|
| 图片与文本比例 | 最多 40% 图片,60% 文本 (垃圾邮件过滤器会标记图片过多的邮件) |
| 图片替代文本 | 始终添加 — 许多客户端默认屏蔽图片 |
| 退订链接 | 法律要求 (CAN-SPAM、GDPR) — 使其易于找到 |
| 发件人名称 | 可识别的人名或品牌名 |
| 回复地址 | 真实地址,而非 no-reply@ (损害送达率) |
| 列表卫生 | 移除退回邮件,每季度清理不活跃订阅者 |
| SPF/DKIM/DMARC | 技术认证 — 一次性设置,对进入收件箱至关重要 |
| 错误 | 问题 | 修复方法 |
|---|---|---|
| 无预览文本 | 显示 "View in browser" 或随机代码 | 有意设置预览文本 |
| 纯图片邮件 | 图片被屏蔽 = 空白邮件 + 垃圾邮件风险 | 60% 以上文本,图片添加替代文本 |
| 多个行动号召 | 决策瘫痪,点击率降低 | 每封邮件一个主要行动号召 |
| 文字过小 | 在移动端难以阅读 | 正文最小 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
每周安装量
7.4K
仓库
GitHub 星标数
235
首次出现
Mar 12, 2026
安全审计
安装于
claude-code5.9K
gemini-cli5.3K
codex5.3K
opencode5.3K
amp5.3K
kimi-cli5.3K
Design high-converting marketing emails with AI-generated visuals via inference.sh CLI.
Requires inference.sh CLI (
infsh). Install instructions
infsh login
# Generate email header banner
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\">Spring Sale — 30% Off</h1><p style=\"font-size:18px;opacity:0.9\">This weekend only</p></div></div>"
}'
| Constraint | Value | Why |
|---|---|---|
| Max width | 600px | Gmail, Outlook rendering standard |
| Mobile width | 320-414px | Responsive fallback |
| Single column | Preferred | Better mobile rendering |
| Two column | Use sparingly | Breaks on many clients |
| Image width | 600px max, 300px for 2-col | Retina: provide 2x (1200px) |
| Font size (body) | 14-16px | Below 14px is hard to read on mobile |
| Font size (heading) | 22-28px | Must be scannable |
| Line height | 1.5 | Readability on all devices |
The most effective email layout funnels attention to a single 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 │
└──────────────────────────────────┘
| Formula | Example | Open Rate Impact |
|---|---|---|
| Number + benefit | "5 ways to cut your build time in half" | High |
| Question | "Are you still deploying on Fridays?" | High |
| How-to | "How to automate your reports in 3 steps" | Medium-High |
| Urgency (genuine) | "Last day: 30% off annual plans" | High (if real) |
| Personalized | "[Name], your weekly report is ready" | Very High |
| Curiosity gap | "The one feature our users can't stop talking about" | Medium-High |
| Rule | Value |
|---|---|
| Length | 30-50 characters (mobile truncates at ~35) |
| Preview text | First 40-100 chars after subject — design this intentionally |
| Emoji | Max 1, at start or end, test with your audience |
| ALL CAPS | Never — triggers spam filters |
| Spam trigger words | Avoid: "free", "act now", "limited time", "click here" in subject |
| Personalization | [First name] in subject lifts open rates 20%+ |
The preview text appears after the subject line in the inbox. Don't waste it.
❌ "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"
| Element | Content |
|---|---|
| Subject | "Welcome to [Product] — here's what's next" |
| Header | Brand image or product screenshot |
| Body | 3-4 sentences: what they signed up for, what to expect, one quick win |
| CTA | "Complete your setup" or "Try your first [action]" |
| Timing | Immediately after signup |
| Element | Content |
|---|---|
| Subject | Benefit-focused, urgency if real |
| Header | Hero image showing the offer/outcome |
| Body | Problem → solution → offer → deadline |
| CTA | "Get 30% Off" or "Start Free Trial" |
| Urgency | Real deadline, not fake scarcity |
| Element | Content |
|---|---|
| Subject | "New: [Feature name] is here" |
| Header | Screenshot or visual of the feature |
| Body | What's new, why it matters, how to use it |
| CTA | "Try [feature]" |
| Rule | Why |
|---|---|
| Clear purpose in subject | "Your order #1234 is confirmed" |
| Minimal design | Don't confuse with marketing |
| Key info above the fold | Order number, amount, date |
| No promotional content (mostly) | CAN-SPAM allows some, but keep minimal |
# Welcome email header
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\">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
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\">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
infsh 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
}'
| Rule | Value |
|---|---|
| Width | 200-300px, not full width |
| Height | 44-50px minimum (tap target) |
| Color | High contrast with background |
| Text | Action verb + outcome: "Start Free Trial" |
| Shape | Rounded corners (4-8px border-radius) |
| Placement | Above the fold, repeated at bottom for long emails |
| Quantity | ONE primary CTA per email |
HTML buttons render differently across email clients. Use the "bulletproof button" technique (VML for Outlook, HTML/CSS for everything else):
<!-- Bulletproof button (works everywhere including 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;">
Start Free Trial
</a>
</td>
</tr>
</table>
| Rule | Why |
|---|---|
| Single column layout | Multi-column breaks on mobile |
| Font minimum 14px | Smaller is unreadable |
| CTA button minimum 44px tall | Apple/Android tap target |
| Images scale to 100% width | Prevent horizontal scroll |
| Stack elements vertically | Side-by-side breaks on narrow screens |
| Test on Gmail app, Apple Mail, Outlook | The big 3 email clients |
60%+ of emails are opened on mobile. Design mobile-first.
| Factor | Rule |
|---|---|
| Image-to-text ratio | Max 40% images, 60% text (spam filters flag image-heavy emails) |
| Alt text on images | Always — images blocked by default in many clients |
| Unsubscribe link | Required by law (CAN-SPAM, GDPR) — make it easy to find |
| From name | Recognizable person or brand name |
| Reply-to | Real address, not no-reply@ (hurts deliverability) |
| List hygiene | Remove bounces, clean inactive subscribers quarterly |
| SPF/DKIM/DMARC | Technical authentication — set up once, critical for inbox |
| Mistake | Problem | Fix |
|---|---|---|
| No preview text | Shows "View in browser" or random code | Set preview text intentionally |
| Image-only emails | Blocked images = blank email + spam risk | 60%+ text, alt text on images |
| Multiple CTAs | Decision paralysis, lower click rate | One primary CTA per email |
| Tiny text | Unreadable on mobile | Minimum 14px body, 22px headings |
| no-reply@ sender | Hurts deliverability, feels impersonal | Use real reply address |
| No mobile testing | Broken layout for 60%+ of readers | Test on Gmail app + Apple Mail |
| Missing unsubscribe | Illegal (CAN-SPAM) + spam complaints | Clear unsubscribe link in footer |
| Over-designing | Email clients render CSS inconsistently | Simple layouts, inline styles |
| Fake urgency |
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
Browse all apps: infsh app list
Weekly Installs
7.4K
Repository
GitHub Stars
235
First Seen
Mar 12, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
claude-code5.9K
gemini-cli5.3K
codex5.3K
opencode5.3K
amp5.3K
kimi-cli5.3K
专业SEO审计工具:全面网站诊断、技术SEO优化与页面分析指南
59,900 周安装
| Erodes trust, trains users to ignore |
| Only use real deadlines |