Imported from halt-catch-fire/mutiny (guides/design/email-design/SKILL.md). Install upstream with npx skills add halt-catch-fire/mutiny --skill email-design. Copyright stays with the author.

Install the belt CLI skill: npx skills add belt-sh/cli

Email Design

Design high-converting marketing emails with AI-generated visuals via inference.sh CLI.

Quick Start

Requires inference.sh CLI (belt). Install instructions

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

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
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 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: belt app list

email-design

About