# Send Email Design to your agent
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
## Fast path
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
## Suggested prompts
### New install

```text
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
```
### Upgrade existing

```text
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
```
## Machine-readable fields
```json
{
  "schemaVersion": "1.0",
  "item": {
    "slug": "email-design",
    "name": "Email Design",
    "source": "tencent",
    "type": "skill",
    "category": "内容创作",
    "sourceUrl": "https://clawhub.ai/okaris/email-design",
    "canonicalUrl": "https://clawhub.ai/okaris/email-design",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadUrl": "/downloads/email-design",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=email-design",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "packageFormat": "ZIP package",
    "primaryDoc": "SKILL.md",
    "includedAssets": [
      "SKILL.md"
    ],
    "downloadMode": "redirect",
    "sourceHealth": {
      "source": "tencent",
      "slug": "email-design",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-29T13:52:37.150Z",
      "expiresAt": "2026-05-06T13:52:37.150Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=email-design",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=email-design",
        "contentDisposition": "attachment; filename=\"email-design-0.1.5.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "email-design"
      },
      "scope": "item",
      "summary": "Item download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this item.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/email-design"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    }
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/email-design",
    "downloadUrl": "https://openagent3.xyz/downloads/email-design",
    "agentUrl": "https://openagent3.xyz/skills/email-design/agent",
    "manifestUrl": "https://openagent3.xyz/skills/email-design/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/email-design/agent.md"
  }
}
```
## Documentation

### 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": "<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.

### Email Width & Layout

ConstraintValueWhyMax width600pxGmail, Outlook rendering standardMobile width320-414pxResponsive fallbackSingle columnPreferredBetter mobile renderingTwo columnUse sparinglyBreaks on many clientsImage width600px max, 300px for 2-colRetina: provide 2x (1200px)Font size (body)14-16pxBelow 14px is hard to read on mobileFont size (heading)22-28pxMust be scannableLine height1.5Readability 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     │
└──────────────────────────────────┘

### Formulas That Work

FormulaExampleOpen Rate ImpactNumber + benefit"5 ways to cut your build time in half"HighQuestion"Are you still deploying on Fridays?"HighHow-to"How to automate your reports in 3 steps"Medium-HighUrgency (genuine)"Last day: 30% off annual plans"High (if real)Personalized"[Name], your weekly report is ready"Very HighCuriosity gap"The one feature our users can't stop talking about"Medium-High

### Rules

RuleValueLength30-50 characters (mobile truncates at ~35)Preview textFirst 40-100 chars after subject — design this intentionallyEmojiMax 1, at start or end, test with your audienceALL CAPSNever — triggers spam filtersSpam trigger wordsAvoid: "free", "act now", "limited time", "click here" in subjectPersonalization[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"

### Welcome Email (Automated, Day 0)

ElementContentSubject"Welcome to [Product] — here's what's next"HeaderBrand image or product screenshotBody3-4 sentences: what they signed up for, what to expect, one quick winCTA"Complete your setup" or "Try your first [action]"TimingImmediately after signup

### Promotional / Campaign

ElementContentSubjectBenefit-focused, urgency if realHeaderHero image showing the offer/outcomeBodyProblem → solution → offer → deadlineCTA"Get 30% Off" or "Start Free Trial"UrgencyReal deadline, not fake scarcity

### Product Update / Changelog

ElementContentSubject"New: [Feature name] is here"HeaderScreenshot or visual of the featureBodyWhat's new, why it matters, how to use itCTA"Try [feature]"

### Transactional (Receipts, Confirmations)

RuleWhyClear purpose in subject"Your order #1234 is confirmed"Minimal designDon't confuse with marketingKey info above the foldOrder number, amount, dateNo 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": "<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
}'

### CTA Buttons

RuleValueWidth200-300px, not full widthHeight44-50px minimum (tap target)ColorHigh contrast with backgroundTextAction verb + outcome: "Start Free Trial"ShapeRounded corners (4-8px border-radius)PlacementAbove the fold, repeated at bottom for long emailsQuantityONE 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

RuleWhySingle column layoutMulti-column breaks on mobileFont minimum 14pxSmaller is unreadableCTA button minimum 44px tallApple/Android tap targetImages scale to 100% widthPrevent horizontal scrollStack elements verticallySide-by-side breaks on narrow screensTest on Gmail app, Apple Mail, OutlookThe big 3 email clients

60%+ of emails are opened on mobile. Design mobile-first.

### Deliverability Checklist

FactorRuleImage-to-text ratioMax 40% images, 60% text (spam filters flag image-heavy emails)Alt text on imagesAlways — images blocked by default in many clientsUnsubscribe linkRequired by law (CAN-SPAM, GDPR) — make it easy to findFrom nameRecognizable person or brand nameReply-toReal address, not no-reply@ (hurts deliverability)List hygieneRemove bounces, clean inactive subscribers quarterlySPF/DKIM/DMARCTechnical authentication — set up once, critical for inbox

### Common Mistakes

MistakeProblemFixNo preview textShows "View in browser" or random codeSet preview text intentionallyImage-only emailsBlocked images = blank email + spam risk60%+ text, alt text on imagesMultiple CTAsDecision paralysis, lower click rateOne primary CTA per emailTiny textUnreadable on mobileMinimum 14px body, 22px headingsno-reply@ senderHurts deliverability, feels impersonalUse real reply addressNo mobile testingBroken layout for 60%+ of readersTest on Gmail app + Apple MailMissing unsubscribeIllegal (CAN-SPAM) + spam complaintsClear unsubscribe link in footerOver-designingEmail clients render CSS inconsistentlySimple layouts, inline stylesFake urgencyErodes trust, trains users to ignoreOnly 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
## Trust
- Source: tencent
- Verification: Indexed source record
- Publisher: okaris
- Version: 0.1.5
## Source health
- Status: healthy
- Item download looks usable.
- Yavira can redirect you to the upstream package for this item.
- Health scope: item
- Reason: direct_download_ok
- Checked at: 2026-04-29T13:52:37.150Z
- Expires at: 2026-05-06T13:52:37.150Z
- Recommended action: Download for OpenClaw
## Links
- [Detail page](https://openagent3.xyz/skills/email-design)
- [Send to Agent page](https://openagent3.xyz/skills/email-design/agent)
- [JSON manifest](https://openagent3.xyz/skills/email-design/agent.json)
- [Markdown brief](https://openagent3.xyz/skills/email-design/agent.md)
- [Download page](https://openagent3.xyz/downloads/email-design)