Email Design — 邮件设计指南

Name: Email Design — 邮件设计指南
Author: Ömer Karışman

Ömer Karışman

Email Design — 邮件设计指南

v0.1.5

具有布局模式、主题行公式和送达规则的邮件营销设计。涵盖欢迎序列、促销邮件、事务性模板和移动优化。用于：邮件营销、新闻通讯设计、滴灌活动、邮件模板、事务性邮件。触发：邮件设计、邮件模板、邮件营销、新闻通讯设计、邮件布局、邮件活动、滴灌活动、欢迎邮件、促销邮件、事务性邮件、邮件主题行、邮件头部图片、邮件横幅。

0· 942·5 当前·6 累计

by @okaris (Ömer Karışman)·MIT-0

AI模型访问代码生成

下载技能包

License

MIT-0

最后更新

2026/4/8

安全扫描

VirusTotal

可疑

查看报告

OpenClaw

可疑

medium confidence

该技能的内容与其所述目的（邮件设计）匹配，但它指导从非标准域运行远程安装脚本（curl | sh），并要求您登录外部CLI而不声明凭证，这是不一致的并增加了风险。

评估建议

此技能似乎是合法的邮件设计指南，但在安装或执行它建议的任何内容之前要谨慎。具体建议：1) 在验证安装程序之前不要在cli.inference.sh上运行curl | sh——首选手动下载二进制文件或先检查脚本。2) 验证CLI提供商（inference.sh）声誉并从受信任来源获取校验和；在运行任何二进制文件之前比较SHA-256。3) 在使用'infsh login'时期望提供凭证——技能元数据未声明这一点，因此要小心您存储/提供API密钥的位置。4) 如果可能，在隔离环境（VM/容器）中运行安装程序和CLI以限制影响范围。5) 如果您只需要静态指南（模板、主题行公式），您可以使用该技能而不安装外部CLI。如果您计划使用图像生成功能，请确认提供商的隐私/安全策略，并考虑从知名来源（例如GitHub发布）或您已经信任的图像工具替代。...

详细分析 ▾

✓ 用途与能力

该技能是纯指令的邮件设计指南，并使用图像生成CLI（inference.sh）进行头部/横幅创建——这与邮件设计和视觉生成需求一致。

ℹ 指令范围

SKILL.md保持在邮件设计建议范围内，并显示生成头部图像的具体命令。然而，它明确指导运行远程安装程序（curl -fsSL https://cli.inference.sh | sh），然后运行'infsh login'，这涉及外部服务和凭证；元数据未声明任何所需的凭证或环境变量来反映该依赖。

⚠ 安装机制

注册表中没有安装规范，但指令告诉用户/代理从cli.inference.sh/dist.inference.sh运行远程安装脚本（curl | sh）。这是更高风险的安装模式，因为它从第三方域而不是知名发布主机下载并执行代码；SKILL.md声称SHA-256校验和可用，但除非您信任提供商，否则安装程序+从URL下载模式和非标准主机对于图像生成的简单任务是不成比例的。

⚠ 凭证需求

技能元数据未列出所需的环境变量或主凭证，但运行时指令调用'infsh login'，暗示可能需要外部账户/API密钥。缺乏声明的凭证是不一致的——用户/代理应该期望向外部服务提供凭证，并且该要求应该是明确的。

✓ 持久化与权限

该技能不请求always:true，不声明系统级配置写入。它是纯指令的，在元数据中不请求提升或持久的平台权限。

安装前注意事项

在验证安装程序之前不要在cli.inference.sh上运行curl | sh——首选手动下载二进制文件或先检查脚本。
验证CLI提供商（inference.sh）声誉并从受信任来源获取校验和；在运行任何二进制文件之前比较SHA-256。
在使用'infsh login'时期望提供凭证——技能元数据未声明这一点，因此要小心您存储/提供API密钥的位置。
如果可能，在隔离环境（VM/容器）中运行安装程序和CLI以限制影响范围。
如果您只需要静态指南（模板、主题行公式），您可以使用该技能而不安装外部CLI。如果您计划使用图像生成功能，请确认提供商的隐私/安全策略，并考虑从知名来源（例如GitHub发布）或您已经信任的图像工具替代。

安全有层次，运行前请审查代码。

License

MIT-0

可自由使用、修改和再分发，无需署名。

查看条款 ↗

运行时依赖

无特殊依赖

版本

latestv0.1.52026/2/10

email-design v0.1.5。- 扩展了文档，包含邮件布局、主题行公式、预览文本和送达规则的详细最佳实践。- 添加了使用inference.sh CLI的快速入门和视觉生成示例。- 包含了欢迎、促销、产品更新和事务性邮件的模式指南。- 提供了布局、排版和防弹按钮编码的参考表。- 改进了关于移动优化和避免垃圾邮件触发器的可行提示。

● 可疑

安装命令点击复制

官方npx clawhub@latest install email-design

镜像加速npx clawhub@latest install email-design --registry https://cn.clawhub-mirror.com

技能文档

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

Quick 开始

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% Off
This 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 & 布局

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

Inverted Pyramid 布局

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 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%+

预览 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 更新 / 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

页头 Image Design

# Welcome email header infsh app run infsh/html-to-image --input '{ "html": "Welcome to DataFlow Your data, automated" }' # Sale / promotional header infsh app run infsh/html-to-image --input '{ "html": " This Weekend Only 30% OFF All 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):



  
    
      
        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%+ 的 emails opened 在...上 mobile. Design mobile-第一个.

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

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% Off
This 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 to DataFlow Your data, automated" }' # Sale / promotional header infsh app run infsh/html-to-image --input '{ "html": " This Weekend Only 30% OFF All 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):



  
    
      
        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

数据来源：ClawHub ↗ · 中文优化：龙虾技能库

OpenClaw 技能定制 / 插件定制 / 私有工作流定制

免费技能或插件可能存在安全风险，如需更匹配、更安全的方案，建议联系付费定制

了解定制服务

License

运行时依赖

版本

安装命令 点击复制

技能文档

Quick 开始

Spring Sale — 30% Off

Email Width & 布局

Inverted Pyramid 布局

Subject Lines

Formulas Work

Rules

预览 Text

Email Types

Welcome Email (Automated, Day 0)

Promotional / Campaign

Product 更新 / Changelog

Transactional (Receipts, Confirmations)

页头 Image Design

DataFlow

30% OFF

CTA Buttons

Bulletproof Buttons

Mobile Optimization

Deliverability Checklist

Common Mistakes

Related Skills

Quick Start

Spring Sale — 30% Off

Email Width & Layout

The Inverted Pyramid Layout

Subject Lines

Formulas That Work

Rules

Preview Text

Email Types

Welcome Email (Automated, Day 0)

Promotional / Campaign

Product Update / Changelog

Transactional (Receipts, Confirmations)

Header Image Design

DataFlow

30% OFF

CTA Buttons

Bulletproof Buttons

Mobile Optimization

Deliverability Checklist

Common Mistakes

Related Skills

安装命令点击复制