How long does the integration take?

Change one base URL in an OpenAI-compatible client, or install the Python or TypeScript SDK; the quickstart routes a first request in a few minutes.

Will this lock us into another vendor?

No. The router is Apache-2.0 open source, your provider keys stay yours, and the API is OpenAI-compatible, so leaving is a change of base URL.

What happens when a provider fails?

The router falls back to the next model your policy allows and records the fallback in the trace, so an outage costs a retry, not an incident.

email-design - Skill - OpenSmartRoute

Name: email-design
Author: whytryharder

Imported from whytryharder/superpowers (guides/design/email-design/SKILL.md). Install upstream with npx skills add whytryharder/superpowers --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

Install email-design and it becomes one more candidate the router can pick - when it fits.

A listing is a routing target with a manifest: what it does, which domains it covers, what it costs and who publishes it. Once installed it sits beside your own models and tools, is scored like any other candidate for each request, and shows up in the trace when it wins. Ratings come from workspaces that installed it, one per account.

{ "ocm": "1", "id": "whytryharder-superpowers-email-design", "kind": "skill", "name": "email-design", "description": "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 banner", "publisher": "whytryharder", "version": "1.0.0", "capabilities": { "domains": [ "marketing", "math" ], "tags": [ "skill-md", "skills-sh" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "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 banner" ], "primary": false, "metadata": { "source": { "provider": "skills.sh", "repository": "https://github.com/whytryharder/superpowers", "path": "guides/design/email-design/SKILL.md", "ref": "HEAD", "url": "https://github.com/whytryharder/superpowers/blob/HEAD/guides/design/email-design/SKILL.md", "key": "whytryharder/superpowers/guides/design/email-design/SKILL.md" }, "allowed_tools": [ "Bash(belt", "*)" ] }, "instructions": "> **Install the belt CLI skill:** `npx skills add belt-sh/cli`\n\n# Email Design\n\nDesign high-converting marketing emails with AI-generated visuals via [inference.sh](https://inference.sh) CLI.\n\n## Quick Start\n\n> Requires inference.sh CLI (`belt`). [Install instructions](https://raw.githubusercontent.com/inference-sh/skills/refs/heads/main/cli-install.md)\n\n```bash\nbelt login\n\n# Generate email header banner\nbelt app run infsh/html-to-image --input '{\n \"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>\"\n}'\n```\n\n\n## Email Width & Layout\n\n| Constraint | Value | Why |\n|-----------|-------|-----|\n| **Max width** | 600px | Gmail, Outlook rendering standard |\n| **Mobile width** | 320-414px | Responsive fallback |\n| **Single column** | Preferred | Better mobile rendering |\n| **Two column** | Use sparingly | Breaks on many clients |\n| **Image width** | 600px max, 300px for 2-col | Retina: provide 2x (1200px) |\n| **Font size (body)** | 14-16px | Below 14px is hard to read on mobile |\n| **Font size (heading)** | 22-28px | Must be scannable |\n| **Line height** | 1.5 | Readability on all devices |\n\n### The Inverted Pyramid Layout\n\nThe most effective email layout funnels attention to a single CTA:\n\n```\n┌──────────────────────────────────┐\n│ HEADER IMAGE │ ← Brand/visual hook\n│ (600 x 200-300) │\n├──────────────────────────────────┤\n│ │\n│ Headline (one line) │ ← What's this about\n│ │\n│ 2-3 sentences of body copy │ ← Why should I care\n│ explaining the value. │\n│ │\n│ ┌──────────────┐ │\n│ │ CTA BUTTON │ │ ← One clear action\n│ └──────────────┘ │\n│ │\n├──────────────────────────────────┤\n│ Footer: Unsubscribe link │\n└──────────────────────────────────┘\n```\n\n## Subject Lines\n\n### Formulas That Work\n\n| Formula | Example | Open Rate Impact |\n|---------|---------|-----------------|\n| Number + benefit | \"5 ways to cut your build time in half\" | High |\n| Question | \"Are you still deploying on Fridays?\" | High |\n| How-to | \"How to automate your reports in 3 steps\" | Medium-High |\n| Urgency (genuine) | \"Last day: 30% off annual plans\" | High (if real) |\n| Personalized | \"[Name], your weekly report is ready\" | Very High |\n| Curiosity gap | \"The one feature our users can't stop talking about\" | Medium-High |\n\n### Rules\n\n| Rule | Value |\n|------|-------|\n| **Length** | 30-50 characters (mobile truncates at ~35) |\n| **Preview text** | First 40-100 chars after subject — design this intentionally |\n| **Emoji** | Max 1, at start or end, test with your audience |\n| **ALL CAPS** | Never — triggers spam filters |\n| **Spam trigger words** | Avoid: \"free\", \"act now\", \"limited time\", \"click here\" in subject |\n| **Personalization** | [First name] in subject lifts open rates 20%+ |\n\n### Preview Text\n\nThe preview text appears after the subject line in the inbox. Don't waste it.\n\n```\n❌ \"View this email in your browser\" (default, wasted space)\n❌ \"Having trouble viewing this?\" (no one cares)\n\n✅ Subject: \"5 ways to cut build time\"\n Preview: \"Number 3 saved us 6 hours per week\"\n\n✅ Subject: \"Your monthly report is ready\"\n Preview: \"Revenue up 23% — here's what drove it\"\n```\n\n## Email Types\n\n### Welcome Email (Automated, Day 0)\n\n| Element | Content |\n|---------|---------|\n| Subject | \"Welcome to [Product] — here's what's next\" |\n| Header | Brand image or product screenshot |\n| Body | 3-4 sentences: what they signed up for, what to expect, one quick win |\n| CTA | \"Complete your setup\" or \"Try your first [action]\" |\n| Timing | Immediately after signup |\n\n### Promotional / Campaign\n\n| Element | Content |\n|---------|---------|\n| Subject | Benefit-focused, urgency if real |\n| Header | Hero image showing the offer/outcome |\n| Body | Problem → solution → offer → deadline |\n| CTA | \"Get 30% Off\" or \"Start Free Trial\" |\n| Urgency | Real deadline, not fake scarcity |\n\n### Product Update / Changelog\n\n| Element | Content |\n|---------|---------|\n| Subject | \"New: [Feature name] is here\" |\n| Header | Screenshot or visual of the feature |\n| Body | What's new, why it matters, how to use it |\n| CTA | \"Try [feature]\" |\n\n### Transactional (Receipts, Confirmations)\n\n| Rule | Why |\n|------|-----|\n| Clear purpose in subject | \"Your order #1234 is confirmed\" |\n| Minimal design | Don't confuse with marketing |\n| Key info above the fold | Order number, amount, date |\n| No promotional content (mostly) | CAN-SPAM allows some, but keep minimal |\n\n## Header Image Design\n\n```bash\n# Welcome email header\nbelt app run infsh/html-to-image --input '{\n \"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>\"\n}'\n\n# Sale / promotional header\nbelt app run infsh/html-to-image --input '{\n \"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>\"\n}'\n\n# Feature announcement header with AI visual\nbelt app run falai/flux-dev-lora --input '{\n \"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\",\n \"width\": 1200,\n \"height\": 500\n}'\n```\n\n## CTA Buttons\n\n| Rule | Value |\n|------|-------|\n| **Width** | 200-300px, not full width |\n| **Height** | 44-50px minimum (tap target) |\n| **Color** | High contrast with background |\n| **Text** | Action verb + outcome: \"Start Free Trial\" |\n| **Shape** | Rounded corners (4-8px border-radius) |\n| **Placement** | Above the fold, repeated at bottom for long emails |\n| **Quantity** | ONE primary CTA per email |\n\n### Bulletproof Buttons\n\nHTML buttons render differently across email clients. Use the \"bulletproof button\" technique (VML for Outlook, HTML/CSS for everything else):\n\n```html\n\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n <tr>\n <td align=\"center\" bgcolor=\"#22c55e\" style=\"border-radius:6px;\">\n <a href=\"https://yoursite.com/action\" target=\"_blank\"\n style=\"font-size:16px;font-family:sans-serif;color:#ffffff;\n text-decoration:none;padding:12px 24px;display:inline-block;\n font-weight:bold;\">\n Start Free Trial\n </a>\n </td>\n </tr>\n</table>\n```\n\n## Mobile Optimization\n\n| Rule | Why |\n|------|-----|\n| Single column layout | Multi-column breaks on mobile |\n| Font minimum 14px | Smaller is unreadable |\n| CTA button minimum 44px tall | Apple/Android tap target |\n| Images scale to 100% width | Prevent horizontal scroll |\n| Stack elements vertically | Side-by-side breaks on narrow screens |\n| Test on Gmail app, Apple Mail, Outlook | The big 3 email clients |\n\n**60%+ of emails are opened on mobile.** Design mobile-first.\n\n## Deliverability Checklist\n\n| Factor | Rule |\n|--------|------|\n| Image-to-text ratio | Max 40% images, 60% text (spam filters flag image-heavy emails) |\n| Alt text on images | Always — images blocked by default in many clients |\n| Unsubscribe link | Required by law (CAN-SPAM, GDPR) — make it easy to find |\n| From name | Recognizable person or brand name |\n| Reply-to | Real address, not no-reply@ (hurts deliverability) |\n| List hygiene | Remove bounces, clean inactive subscribers quarterly |\n| SPF/DKIM/DMARC | Technical authentication — set up once, critical for inbox |\n\n## Common Mistakes\n\n| Mistake | Problem | Fix |\n|---------|---------|-----|\n| No preview text | Shows \"View in browser\" or random code | Set preview text intentionally |\n| Image-only emails | Blocked images = blank email + spam risk | 60%+ text, alt text on images |\n| Multiple CTAs | Decision paralysis, lower click rate | One primary CTA per email |\n| Tiny text | Unreadable on mobile | Minimum 14px body, 22px headings |\n| no-reply@ sender | Hurts deliverability, feels impersonal | Use real reply address |\n| No mobile testing | Broken layout for 60%+ of readers | Test on Gmail app + Apple Mail |\n| Missing unsubscribe | Illegal (CAN-SPAM) + spam complaints | Clear unsubscribe link in footer |\n| Over-designing | Email clients render CSS inconsistently | Simple layouts, inline styles |\n| Fake urgency | Erodes trust, trains users to ignore | Only use real deadlines |\n\n## Related Skills\n\n```bash\nnpx skills add inference-sh/skills@landing-page-design\nnpx skills add inference-sh/skills@ai-image-generation\nnpx skills add inference-sh/skills@prompt-engineering\n```\n\nBrowse all apps: `belt app list`", "cost": { "context_tokens": 2395 } }

email-design

About