Email marketing design with layout patterns, subject line formulas, and deliverability rules. Covers welcome sequences, promotional emails, transactional tem...
数据来源：ClawHub。 在 ClawSkills 查看
选择你使用的 Agent
方法一：命令行安装（推荐）
推荐（无需提前安装 clawhub）
npx clawhub@latest --dir ~/.claude/skills install email-design或使用 clawhub CLI（需提前安装）
clawhub --dir ~/.claude/skills install email-design⚠️ 需要 Node.js 18+，没有 Node？请使用下方方法二直接下载 ZIP。 安装 Node.js →
方法二：手动下载安装（无需 Node）
下载 ZIP，解压后将文件夹放到以下路径，重启 Agent 即可：
安装路径
~/.claude/skills/email-design/💡解压后将文件夹放到上方路径，重启 Agent 即可生效
--- 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" allowed-tools: Bash(infsh *) ---
Design high-converting marketing emails with AI-generated visuals via inference.sh CLI.
curl -fsSL https://cli.inference.sh | sh && infsh login
# Generate email header banner
infsh 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>"
}'> 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.
| 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 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 │
└──────────────────────────────────┘| 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 |
| 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%+ |
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"| 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 |
| 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 |
| 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]" |
| 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 |
# Welcome email header
infsh 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
infsh 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
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
}'| 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 |
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>| 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.
| 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 |
| 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 |
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-engineeringBrowse all apps: infsh app list
安装 Email Design 后，可以对 AI 说这些话来触发它
Send a Slack message to the #engineering channel about the deployment
Formats and sends the message with relevant context, tagging the right people
Summarize all unread messages in my inbox from today
Reads messages across connected channels and returns a prioritized summary
Draft a reply to this customer complaint and send it for review
Writes an empathetic, professional response and routes it to the approval queue
将技能文件夹放到 ~/.claude/skills/email-design/ 目录（个人级，所有项目可用），或 .claude/skills/email-design/（项目级）。重启 AI 客户端后，用 /email-design 主动调用，或让 AI 根据上下文自动发现并使用。
Email Design 支持 Claude、Cursor、OpenClaw，可与这些 AI 平台无缝集成，扩展其能力。
Email Design 可免费安装使用。请查阅仓库了解许可证信息。
Email marketing design with layout patterns, subject line formulas, and deliverability rules. Covers welcome sequences, promotional emails, transactional tem...
Email Design 属于「Communication」分类，该分类的技能帮助 AI 智能体在此领域执行专业任务。