Generate and edit Draw.io, Mermaid, and Excalidraw diagrams from natural language using a structured JSON spec.
by nssa.io1.0k installs47 stars
Design & media
Email Design
Try itEmail marketing design with layout patterns, subject line formulas, and deliverability rules. Covers welcome sequences, promotional emails, transactional tem...
What it does
Design high-converting marketing emails with AI-generated visuals via inference.sh CLI.
The skill document
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": "Spring Sale — 30% OffThis weekend only"
}'
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": "Welcome toDataFlowYour data, automated"
}'
# Sale / promotional header
infsh app run infsh/html-to-image --input '{
"html": "This Weekend Only30% OFFAll annual plans. Ends Sunday."
}'
# 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) -->
Start Free Trial
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
Related skills
Fetch raw ad creative, app, ranking, and revenue data from AdMapix as structured JSON.
by fly0pants4.3k installs296 stars
Find why your productivity system keeps failing, then apply the smallest fix — capacity math, bottleneck routing, durable local notes.
by Iván855 installs69 stars
Join a video meeting as an AI bot with voice, avatar, and screenshare across four operating modes.
by johnpatternai22 installs8 stars
Stores durable facts in a categorized, plain-markdown vault on disk, alongside your agent's built-in memory.
by Iván559 installs18 stars
Site audit, content writing, and competitor analysis for organic search rankings.
by Iván574 installs31 stars
More from okaris
Browse all skillsExecute Python code in a safe sandboxed environment via [inference.sh](https://inference.sh). Pre-installed: NumPy, Pandas, Matplotlib, requests, BeautifulSo...
by okaris321 installs3 stars
Create AI-powered social media content for TikTok, Instagram, YouTube, Twitter/X. Generate: images, videos, reels, shorts, thumbnails, captions, hashtags. To...
by okaris118 installs6 stars
Build automated AI workflows combining multiple models and services. Patterns: batch processing, scheduled tasks, event-driven pipelines, agent loops. Tools:...
by okaris190 installs1 stars
Create AI marketing videos for ads, promos, product launches, and brand content. Models: Veo, Seedance, Wan, FLUX for visuals, Kokoro for voiceover. Types: p...
by okaris90 installs5 stars
Logo design principles and AI image generation best practices for creating logos. Covers logo types, prompting techniques, scalability rules, and iteration w...
by Ömer Karışman65 installs1 stars
Data visualization with chart selection, color theory, and annotation best practices. Covers chart types (bar, line, scatter, heatmap), axes rules, and story...
by okaris196 installs