← Back to Skills Marketplace
Email Design
by
Ömer Karışman
· GitHub ↗
· v0.1.5
1158
Downloads
0
Stars
6
Active Installs
2
Versions
Install in OpenClaw
/install email-design
Description
Email marketing design with layout patterns, subject line formulas, and deliverability rules. Covers welcome sequences, promotional emails, transactional tem...
README (SKILL.md)
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": "\x3Cdiv 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\">\x3Cdiv>\x3Ch1 style=\"font-size:36px;margin:0\">Spring Sale — 30% Off\x3C/h1>\x3Cp style=\"font-size:18px;opacity:0.9\">This weekend only\x3C/p>\x3C/div>\x3C/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": "\x3Cdiv style=\"width:600px;height:250px;background:linear-gradient(135deg,#2d3436,#636e72);display:flex;align-items:center;padding:40px;font-family:system-ui;color:white\">\x3Cdiv>\x3Cp style=\"font-size:14px;text-transform:uppercase;letter-spacing:2px;opacity:0.7;margin:0\">Welcome to\x3C/p>\x3Ch1 style=\"font-size:42px;margin:8px 0 0;font-weight:800\">DataFlow\x3C/h1>\x3Cp style=\"font-size:18px;opacity:0.8;margin-top:4px\">Your data, automated\x3C/p>\x3C/div>\x3C/div>"
}'
# Sale / promotional header
infsh app run infsh/html-to-image --input '{
"html": "\x3Cdiv 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\">\x3Cdiv>\x3Cp style=\"font-size:20px;opacity:0.9;margin:0\">This Weekend Only\x3C/p>\x3Ch1 style=\"font-size:72px;margin:8px 0;font-weight:900\">30% OFF\x3C/h1>\x3Cp style=\"font-size:18px;opacity:0.8\">All annual plans. Ends Sunday.\x3C/p>\x3C/div>\x3C/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):
\x3C!-- Bulletproof button (works everywhere including Outlook) -->
\x3Ctable cellpadding="0" cellspacing="0" border="0">
\x3Ctr>
\x3Ctd align="center" bgcolor="#22c55e" style="border-radius:6px;">
\x3Ca 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
\x3C/a>
\x3C/td>
\x3C/tr>
\x3C/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
Usage Guidance
This skill appears to be a legitimate email-design guide, but exercise caution before installing or executing anything it suggests. Specific recommendations: 1) Do not run curl | sh on cli.inference.sh without validating the installer — prefer manually downloading the binary or inspecting the script first. 2) Verify the CLI provider (inference.sh) reputation and fetch checksums from a trusted source; compare SHA-256 before running any binary. 3) Expect to supply credentials when using 'infsh login' — the skill metadata does not declare that, so be careful where you store/provide API keys. 4) If possible, run the installer and CLI in an isolated environment (VM/container) to limit blast radius. 5) If you need only static guidance (templates, subject-line formulas), you can use the skill without installing the external CLI. If you plan to use the image-generation feature, confirm the provider's privacy/security policies and consider an alternative from a well-known source (e.g., GitHub releases) or an image tool you already trust.
Capability Analysis
Type: OpenClaw Skill
Name: email-design
Version: 0.1.5
The `SKILL.md` file contains a `curl -fsSL https://cli.inference.sh | sh` command to install a CLI tool. This method is a supply chain vulnerability, as it executes arbitrary code downloaded from a remote server without prior inspection. While the stated intent is benign (installing a legitimate tool), this pattern introduces a significant risk of remote code execution if the remote script or server is compromised, classifying it as a high-risk capability without clear malicious intent within this specific skill bundle.
Capability Assessment
Purpose & Capability
The skill is an instruction-only email design guide and uses an image-generation CLI (inference.sh) for header/banner creation — that is coherent with email design and visual generation needs.
Instruction Scope
The SKILL.md stays within email design advice and shows concrete commands to generate header images. However, it explicitly instructs running a remote installer (curl -fsSL https://cli.inference.sh | sh) and then running 'infsh login' which involves an external service and credentials; the metadata does not declare any required credentials or environment variables to reflect that dependency.
Install Mechanism
There is no install spec in the registry, but the instructions tell the user/agent to run a remote install script from cli.inference.sh/dist.inference.sh (curl | sh). This is a higher-risk install pattern because it downloads and executes code from a third-party domain rather than a well-known release host; the SKILL.md claims SHA-256 checksums are available, but the installer+download-from-URL pattern and nonstandard host are disproportionate to the simple task of image generation unless you trust the provider.
Credentials
The skill metadata lists no required environment variables or primary credential, yet the runtime instructions call 'infsh login', implying an external account/API key may be required. The absence of declared credentials is an inconsistency — users/agents should expect to supply credentials to the external service, and that requirement should be explicit.
Persistence & Privilege
The skill does not request always:true and does not declare system-wide config writes. It is instruction-only and does not request elevated or persistent platform privileges in metadata.
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install email-design - After installation, invoke the skill by name or use
/email-design - Provide required inputs per the skill's parameter spec and get structured output
Version History
v0.1.5
email-design v0.1.5
- Expanded documentation with detailed best practices for email layout, subject line formulas, preview text, and deliverability rules.
- Added quickstart and visual generation examples using inference.sh CLI.
- Included pattern guides for welcome, promotional, product update, and transactional emails.
- Provided reference tables for layout, typography, and bulletproof button coding.
- Improved actionable tips on mobile optimization and avoiding spam triggers.
v0.1.0
Initial release of email-design skill: a practical guide for high-converting marketing emails.
- Covers layout patterns, subject line formulas, and deliverability best practices.
- Includes design specs for welcome, promotional, transactional, and update email types.
- Provides layout and copywriting templates, plus mobile optimization guidelines.
- Features AI-powered email header/banner image generation using inference.sh CLI.
- Offers HTML bulletproof CTA button code compatible with all major email clients.
Metadata
Frequently Asked Questions
What is Email Design?
Email marketing design with layout patterns, subject line formulas, and deliverability rules. Covers welcome sequences, promotional emails, transactional tem... It is an AI Agent Skill for Claude Code / OpenClaw, with 1158 downloads so far.
How do I install Email Design?
Run "/install email-design" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is Email Design free?
Yes, Email Design is completely free (open-source). You can download, install and use it at no cost.
Which platforms does Email Design support?
Email Design is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created Email Design?
It is built and maintained by Ömer Karışman (@okaris); the current version is v0.1.5.
More Skills