Back to Details

email-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Email Design

邮件设计

Design high-converting marketing emails with AI-generated visuals via inference.sh CLI.
通过inference.sh CLI工具，利用AI生成的视觉素材设计高转化率的营销邮件。

Quick Start

快速开始

bash
curl -fsSL https://cli.inference.sh | sh && infsh login
bash
curl -fsSL https://cli.inference.sh | sh && infsh login

Generate email header banner

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>" }'
undefined
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>" }'
undefined

Email Width & Layout

邮件宽度与布局

ConstraintValueWhy
Max width600pxGmail, Outlook rendering standard
Mobile width320-414pxResponsive fallback
Single columnPreferredBetter mobile rendering
Two columnUse sparinglyBreaks on many clients
Image width600px max, 300px for 2-colRetina: provide 2x (1200px)
Font size (body)14-16pxBelow 14px is hard to read on mobile
Font size (heading)22-28pxMust be scannable
Line height1.5Readability on all devices
约束条件取值原因
最大宽度600pxGmail、Outlook的渲染标准
移动端宽度320-414px响应式降级方案
单列布局推荐使用移动端渲染效果更好
双列布局谨慎使用在多数客户端会出现显示问题
图片宽度最大600px，双列布局时300px视网膜屏：需提供2倍尺寸（1200px）
正文字号14-16px小于14px在移动端难以阅读
标题字号22-28px必须易于快速浏览
行高1.5提升全设备可读性

The Inverted Pyramid Layout

倒金字塔布局

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     │
└──────────────────────────────────┘
最有效的邮件布局可将注意力引导至单一的CTA（号召性用语）：
┌──────────────────────────────────┐
│           头部图片               │  ← 品牌/视觉钩子
│          (600 x 200-300)         │
├──────────────────────────────────┤
│                                  │
│     标题（单行）                  │  ← 邮件核心内容
│                                  │
│     2-3句正文描述                │  ← 用户为何关注
│     解释核心价值。                │
│                                  │
│        ┌──────────────┐          │
│        │   CTA按钮     │         │  ← 清晰的单一行动指令
│        └──────────────┘          │
│                                  │
├──────────────────────────────────┤
│     页脚：退订链接                │
└──────────────────────────────────┘

Subject Lines

主题行

Formulas That Work

有效公式

FormulaExampleOpen 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
公式示例对打开率的影响
数字 + 利益点"5种方法将构建时间缩短一半"高
疑问句"你还在周五部署代码吗？"高
教程式"3步自动化你的报表生成"中高
真实紧迫感"最后一天：年度套餐立减30%"高（若真实有效）
个性化"[姓名]，你的周报已生成"极高
好奇心缺口"用户疯狂讨论的那个功能是什么？"中高

Rules

规则

RuleValue
Length30-50 characters (mobile truncates at ~35)
Preview textFirst 40-100 chars after subject — design this intentionally
EmojiMax 1, at start or end, test with your audience
ALL CAPSNever — triggers spam filters
Spam trigger wordsAvoid: "free", "act now", "limited time", "click here" in subject
Personalization[First name] in subject lifts open rates 20%+
规则要求
长度30-50个字符（移动端约35个字符后会被截断）
预览文本主题行后的前40-100个字符——需精心设计
表情符号最多1个，放在开头或结尾，需针对受众测试
全大写绝对禁止——会触发垃圾邮件过滤器
垃圾邮件触发词避免在主题行使用："free"、"act now"、"limited time"、"click here"
个性化主题行加入[名字]可提升20%+的打开率

Preview Text

预览文本

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"
预览文本会显示在收件箱的主题行下方，不要浪费这个空间。
❌ "在浏览器中查看此邮件"（默认内容，浪费空间）
❌ "无法查看此邮件？"（没人关心）

✅ 主题："5种缩短构建时间的方法"
   预览："第3种方法每周为我们节省6小时"

✅ 主题："你的月度报表已准备就绪"
   预览："营收增长23%——这是驱动增长的关键"

Email Types

邮件类型

Welcome Email (Automated, Day 0)

欢迎邮件（自动化，注册当日发送）

ElementContent
Subject"Welcome to [Product] — here's what's next"
HeaderBrand image or product screenshot
Body3-4 sentences: what they signed up for, what to expect, one quick win
CTA"Complete your setup" or "Try your first [action]"
TimingImmediately after signup
元素内容
主题"欢迎加入[产品] —— 接下来该做什么"
头部品牌图片或产品截图
正文3-4句话：说明用户注册的内容、后续预期、一个快速上手的技巧
CTA"完成你的设置"或"尝试首次[操作]"
发送时机注册后立即发送

Promotional / Campaign

促销/活动邮件

ElementContent
SubjectBenefit-focused, urgency if real
HeaderHero image showing the offer/outcome
BodyProblem → solution → offer → deadline
CTA"Get 30% Off" or "Start Free Trial"
UrgencyReal deadline, not fake scarcity
元素内容
主题聚焦利益点，若有真实紧迫感可加入
头部展示优惠或成果的主视觉图片
正文问题 → 解决方案 → 优惠 → 截止日期
CTA"立享30%折扣"或"开始免费试用"
紧迫感使用真实截止日期，而非虚假稀缺性

Product Update / Changelog

产品更新/变更日志

ElementContent
Subject"New: [Feature name] is here"
HeaderScreenshot or visual of the feature
BodyWhat's new, why it matters, how to use it
CTA"Try [feature]"
元素内容
主题"新功能：[功能名称]已上线"
头部功能截图或视觉展示
正文新功能介绍、重要性、使用方法
CTA"试用[功能]"

Transactional (Receipts, Confirmations)

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

RuleWhy
Clear purpose in subject"Your order #1234 is confirmed"
Minimal designDon't confuse with marketing
Key info above the foldOrder number, amount, date
No promotional content (mostly)CAN-SPAM allows some, but keep minimal
规则原因
主题清晰表明用途"你的订单#1234已确认"
设计简洁避免与营销邮件混淆
关键信息置于首屏订单号、金额、日期
尽量不含促销内容CAN-SPAM允许少量，但需控制

Header Image Design

头部图片设计

bash
undefined
bash
undefined

Welcome email header

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>" }'
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

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>" }'
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

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 }'
undefined
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 }'
undefined

CTA Buttons

CTA按钮

RuleValue
Width200-300px, not full width
Height44-50px minimum (tap target)
ColorHigh contrast with background
TextAction verb + outcome: "Start Free Trial"
ShapeRounded corners (4-8px border-radius)
PlacementAbove the fold, repeated at bottom for long emails
QuantityONE primary CTA per email
规则要求
宽度200-300px，不要全屏宽度
高度最小44-50px（符合点击目标要求）
颜色与背景高对比度
文本动作动词 + 结果："开始免费试用"
形状圆角（4-8px边框半径）
位置首屏展示，长邮件底部可重复放置
数量每封邮件仅保留一个主要CTA

Bulletproof Buttons

通用兼容按钮

HTML buttons render differently across email clients. Use the "bulletproof button" technique (VML for Outlook, HTML/CSS for everything else):
html
<!-- 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>
HTML按钮在不同邮件客户端的渲染效果不同。使用“通用兼容按钮”技术（Outlook使用VML，其他客户端使用HTML/CSS）：
html
<!-- 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>

Mobile Optimization

移动端优化

RuleWhy
Single column layoutMulti-column breaks on mobile
Font minimum 14pxSmaller is unreadable
CTA button minimum 44px tallApple/Android tap target
Images scale to 100% widthPrevent horizontal scroll
Stack elements verticallySide-by-side breaks on narrow screens
Test on Gmail app, Apple Mail, OutlookThe big 3 email clients
60%+ of emails are opened on mobile. Design mobile-first.
规则原因
单列布局多列布局在移动端会失效
最小字号14px更小的字号在移动端难以阅读
CTA按钮最小高度44px符合苹果/安卓的点击目标要求
图片自适应100%宽度避免横向滚动
元素垂直堆叠并排布局在窄屏会失效
在Gmail应用、Apple Mail、Outlook上测试这三大邮件客户端覆盖多数用户
60%以上的邮件在移动端打开。 优先采用移动端优先设计。

Deliverability Checklist

可送达性检查清单

FactorRule
Image-to-text ratioMax 40% images, 60% text (spam filters flag image-heavy emails)
Alt text on imagesAlways — images blocked by default in many clients
Unsubscribe linkRequired by law (CAN-SPAM, GDPR) — make it easy to find
From nameRecognizable person or brand name
Reply-toReal address, not no-reply@ (hurts deliverability)
List hygieneRemove bounces, clean inactive subscribers quarterly
SPF/DKIM/DMARCTechnical authentication — set up once, critical for inbox
因素规则
图文比例图片占比最高40%，文本占比60%（垃圾邮件过滤器会标记图片过多的邮件）
图片添加替代文本必须添加——多数客户端默认屏蔽图片
退订链接法律要求（CAN-SPAM、GDPR）——需易于找到
发件人名称可识别的个人或品牌名称
回复邮箱真实邮箱地址，不要使用no-reply@（会影响可送达性）
邮件列表维护每季度清理退信和不活跃订阅者
SPF/DKIM/DMARC技术认证——一次性设置，对进入收件箱至关重要

Common Mistakes

常见错误

MistakeProblemFix
No preview textShows "View in browser" or random codeSet preview text intentionally
Image-only emailsBlocked images = blank email + spam risk60%+ text, alt text on images
Multiple CTAsDecision paralysis, lower click rateOne primary CTA per email
Tiny textUnreadable on mobileMinimum 14px body, 22px headings
no-reply@ senderHurts deliverability, feels impersonalUse real reply address
No mobile testingBroken layout for 60%+ of readersTest on Gmail app + Apple Mail
Missing unsubscribeIllegal (CAN-SPAM) + spam complaintsClear unsubscribe link in footer
Over-designingEmail clients render CSS inconsistentlySimple layouts, inline styles
Fake urgencyErodes trust, trains users to ignoreOnly use real deadlines
错误问题修复方案
未设置预览文本显示“在浏览器中查看”或随机代码精心设计预览文本
纯图片邮件图片被屏蔽后显示空白邮件，且增加垃圾邮件风险文本占比60%以上，为图片添加替代文本
多个CTA导致决策瘫痪，降低点击率每封邮件仅保留一个主要CTA
字号过小移动端难以阅读正文最小14px，标题最小22px
使用no-reply@作为发件人影响可送达性，缺乏人情味使用真实回复邮箱
未进行移动端测试60%以上读者会看到破损布局在Gmail应用和Apple Mail上测试
缺少退订链接违反法律（CAN-SPAM），引发垃圾邮件投诉页脚添加清晰的退订链接
过度设计邮件客户端对CSS的渲染不一致采用简洁布局，使用内联样式
虚假紧迫感损害信任，使用户学会忽略仅使用真实截止日期

Related Skills

相关技能

bash
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
bash
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