Email Design
Design high-converting marketing emails with AI-generated visuals via inference.sh CLI.
Quick Start
curl -fsSL https://cli.inference.sh | sh && 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>"
}'
Install note: The install script only detects your OS/architecture, downloads the matching binary from dist.inference.sh, and verifies its SHA-256 checksum. No elevated permissions or background processes. Manual install & verification available.
Email Width & Layout
| 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 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 │
└──────────────────────────────────┘
Subject Lines
Formulas That Work
| 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 |
Rules
| 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%+ |
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"
Email Types
Welcome Email (Automated, Day 0)
| 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 |
Promotional / Campaign
| 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 |
Product Update / Changelog
| 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]" |
Transactional (Receipts, Confirmations)
| 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 |
Header Image Design
# 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
}'
CTA Buttons
| 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 |
Bulletproof Buttons
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>
Mobile Optimization
| 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.
Deliverability Checklist
| 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 |
Common Mistakes
| 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 |
Erodes trust, trains users to ignore |
Only use real deadlines |
Related Skills
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
1---2name: email-design3description: Email marketing design with layout patterns, subject line formulas, and deliverability rules. Covers welcome sequences, promotional emails, transactional templates, and mobile optimization. Use for: email marketing, newsletter design, drip campaigns, email templates, transactional emails. Triggers: email design, email template, email marketing, newsletter design, email layout, email campaign, drip campaign, welcome email, promotional email, transactional email, email subject line, email header image, email banner4---5
6# Email Design
7
8Design high-converting marketing emails with AI-generated visuals via [inference.sh](https://inference.sh) CLI.
9
10## Quick Start
11
12```bash
13curl -fsSL https://cli.inference.sh | sh && infsh login
14
15# Generate email header banner
16infsh app run infsh/html-to-image --input '{
17 "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>"
18}'
19```
20
21> **Install note:** The [install script](https://cli.inference.sh) only detects your OS/architecture, downloads the matching binary from `dist.inference.sh`, and verifies its SHA-256 checksum. No elevated permissions or background processes. [Manual install & verification](https://dist.inference.sh/cli/checksums.txt) available.
22
23## Email Width & Layout
24
25| Constraint | Value | Why |
26|-----------|-------|-----|
27| **Max width** | 600px | Gmail, Outlook rendering standard |
28| **Mobile width** | 320-414px | Responsive fallback |
29| **Single column** | Preferred | Better mobile rendering |
30| **Two column** | Use sparingly | Breaks on many clients |
31| **Image width** | 600px max, 300px for 2-col | Retina: provide 2x (1200px) |
32| **Font size (body)** | 14-16px | Below 14px is hard to read on mobile |
33| **Font size (heading)** | 22-28px | Must be scannable |
34| **Line height** | 1.5 | Readability on all devices |
35
36### The Inverted Pyramid Layout
37
38The most effective email layout funnels attention to a single CTA:
39
40```
41┌──────────────────────────────────┐
42│ HEADER IMAGE │ ← Brand/visual hook
43│ (600 x 200-300) │
44├──────────────────────────────────┤
45│ │
46│ Headline (one line) │ ← What's this about
47│ │
48│ 2-3 sentences of body copy │ ← Why should I care
49│ explaining the value. │
50│ │
51│ ┌──────────────┐ │
52│ │ CTA BUTTON │ │ ← One clear action
53│ └──────────────┘ │
54│ │
55├──────────────────────────────────┤
56│ Footer: Unsubscribe link │
57└──────────────────────────────────┘
58```
59
60## Subject Lines
61
62### Formulas That Work
63
64| Formula | Example | Open Rate Impact |
65|---------|---------|-----------------|
66| Number + benefit | "5 ways to cut your build time in half" | High |
67| Question | "Are you still deploying on Fridays?" | High |
68| How-to | "How to automate your reports in 3 steps" | Medium-High |
69| Urgency (genuine) | "Last day: 30% off annual plans" | High (if real) |
70| Personalized | "[Name], your weekly report is ready" | Very High |
71| Curiosity gap | "The one feature our users can't stop talking about" | Medium-High |
72
73### Rules
74
75| Rule | Value |
76|------|-------|
77| **Length** | 30-50 characters (mobile truncates at ~35) |
78| **Preview text** | First 40-100 chars after subject — design this intentionally |
79| **Emoji** | Max 1, at start or end, test with your audience |
80| **ALL CAPS** | Never — triggers spam filters |
81| **Spam trigger words** | Avoid: "free", "act now", "limited time", "click here" in subject |
82| **Personalization** | [First name] in subject lifts open rates 20%+ |
83
84### Preview Text
85
86The preview text appears after the subject line in the inbox. Don't waste it.
87
88```
89❌ "View this email in your browser" (default, wasted space)
90❌ "Having trouble viewing this?" (no one cares)
91
92✅ Subject: "5 ways to cut build time"
93 Preview: "Number 3 saved us 6 hours per week"
94
95✅ Subject: "Your monthly report is ready"
96 Preview: "Revenue up 23% — here's what drove it"
97```
98
99## Email Types
100
101### Welcome Email (Automated, Day 0)
102
103| Element | Content |
104|---------|---------|
105| Subject | "Welcome to [Product] — here's what's next" |
106| Header | Brand image or product screenshot |
107| Body | 3-4 sentences: what they signed up for, what to expect, one quick win |
108| CTA | "Complete your setup" or "Try your first [action]" |
109| Timing | Immediately after signup |
110
111### Promotional / Campaign
112
113| Element | Content |
114|---------|---------|
115| Subject | Benefit-focused, urgency if real |
116| Header | Hero image showing the offer/outcome |
117| Body | Problem → solution → offer → deadline |
118| CTA | "Get 30% Off" or "Start Free Trial" |
119| Urgency | Real deadline, not fake scarcity |
120
121### Product Update / Changelog
122
123| Element | Content |
124|---------|---------|
125| Subject | "New: [Feature name] is here" |
126| Header | Screenshot or visual of the feature |
127| Body | What's new, why it matters, how to use it |
128| CTA | "Try [feature]" |
129
130### Transactional (Receipts, Confirmations)
131
132| Rule | Why |
133|------|-----|
134| Clear purpose in subject | "Your order #1234 is confirmed" |
135| Minimal design | Don't confuse with marketing |
136| Key info above the fold | Order number, amount, date |
137| No promotional content (mostly) | CAN-SPAM allows some, but keep minimal |
138
139## Header Image Design
140
141```bash
142# Welcome email header
143infsh app run infsh/html-to-image --input '{
144 "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>"
145}'
146
147# Sale / promotional header
148infsh app run infsh/html-to-image --input '{
149 "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>"
150}'
151
152# Feature announcement header with AI visual
153infsh app run falai/flux-dev-lora --input '{
154 "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",
155 "width": 1200,
156 "height": 500
157}'
158```
159
160## CTA Buttons
161
162| Rule | Value |
163|------|-------|
164| **Width** | 200-300px, not full width |
165| **Height** | 44-50px minimum (tap target) |
166| **Color** | High contrast with background |
167| **Text** | Action verb + outcome: "Start Free Trial" |
168| **Shape** | Rounded corners (4-8px border-radius) |
169| **Placement** | Above the fold, repeated at bottom for long emails |
170| **Quantity** | ONE primary CTA per email |
171
172### Bulletproof Buttons
173
174HTML buttons render differently across email clients. Use the "bulletproof button" technique (VML for Outlook, HTML/CSS for everything else):
175
176```html
177<!-- Bulletproof button (works everywhere including Outlook) -->
178<table cellpadding="0" cellspacing="0" border="0">
179 <tr>
180 <td align="center" bgcolor="#22c55e" style="border-radius:6px;">
181 <a href="https://yoursite.com/action" target="_blank"
182 style="font-size:16px;font-family:sans-serif;color:#ffffff;
183 text-decoration:none;padding:12px 24px;display:inline-block;
184 font-weight:bold;">
185 Start Free Trial
186 </a>
187 </td>
188 </tr>
189</table>
190```
191
192## Mobile Optimization
193
194| Rule | Why |
195|------|-----|
196| Single column layout | Multi-column breaks on mobile |
197| Font minimum 14px | Smaller is unreadable |
198| CTA button minimum 44px tall | Apple/Android tap target |
199| Images scale to 100% width | Prevent horizontal scroll |
200| Stack elements vertically | Side-by-side breaks on narrow screens |
201| Test on Gmail app, Apple Mail, Outlook | The big 3 email clients |
202
203**60%+ of emails are opened on mobile.** Design mobile-first.
204
205## Deliverability Checklist
206
207| Factor | Rule |
208|--------|------|
209| Image-to-text ratio | Max 40% images, 60% text (spam filters flag image-heavy emails) |
210| Alt text on images | Always — images blocked by default in many clients |
211| Unsubscribe link | Required by law (CAN-SPAM, GDPR) — make it easy to find |
212| From name | Recognizable person or brand name |
213| Reply-to | Real address, not no-reply@ (hurts deliverability) |
214| List hygiene | Remove bounces, clean inactive subscribers quarterly |
215| SPF/DKIM/DMARC | Technical authentication — set up once, critical for inbox |
216
217## Common Mistakes
218
219| Mistake | Problem | Fix |
220|---------|---------|-----|
221| No preview text | Shows "View in browser" or random code | Set preview text intentionally |
222| Image-only emails | Blocked images = blank email + spam risk | 60%+ text, alt text on images |
223| Multiple CTAs | Decision paralysis, lower click rate | One primary CTA per email |
224| Tiny text | Unreadable on mobile | Minimum 14px body, 22px headings |
225| no-reply@ sender | Hurts deliverability, feels impersonal | Use real reply address |
226| No mobile testing | Broken layout for 60%+ of readers | Test on Gmail app + Apple Mail |
227| Missing unsubscribe | Illegal (CAN-SPAM) + spam complaints | Clear unsubscribe link in footer |
228| Over-designing | Email clients render CSS inconsistently | Simple layouts, inline styles |
229| Fake urgency | Erodes trust, trains users to ignore | Only use real deadlines |
230
231## Related Skills
232
233```bash
234npx skills add inference-sh/skills@landing-page-design
235npx skills add inference-sh/skills@ai-image-generation
236npx skills add inference-sh/skills@prompt-engineering
237```
238
239Browse all apps: `infsh app list`
johnalbertini14-glitch