{ "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": { "downloadMode": "redirect", "downloadUrl": "/downloads/email-design", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=email-design", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "installMethod": "Manual import", "extraction": "Extract archive", "prerequisites": [ "OpenClaw" ], "packageFormat": "ZIP package", "includedAssets": [ "SKILL.md" ], "primaryDoc": "SKILL.md", "quickSetup": [ "Download the package from Yavira.", "Extract the archive and review SKILL.md first.", "Import or place the package into your OpenClaw setup." ], "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "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." ], "prompts": [ { "label": "New install", "body": "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." }, { "label": "Upgrade existing", "body": "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." } ] }, "sourceHealth": { "source": "tencent", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-04-23T16:43:11.935Z", "expiresAt": "2026-04-30T16:43:11.935Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard", "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.zip\"", "redirectLocation": null, "bodySnippet": null }, "scope": "source", "summary": "Source download looks usable.", "detail": "Yavira can redirect you to the upstream package for this source.", "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." ] }, "downloadPageUrl": "https://openagent3.xyz/downloads/email-design", "agentPageUrl": "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" }, "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "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." ], "prompts": [ { "label": "New install", "body": "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." }, { "label": "Upgrade existing", "body": "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." } ] }, "documentation": { "source": "clawhub", "primaryDoc": "SKILL.md", "sections": [ { "title": "Email Design", "body": "Design high-converting marketing emails with AI-generated visuals via inference.sh CLI." }, { "title": "Quick Start", "body": "curl -fsSL https://cli.inference.sh | sh && infsh login\n\n# Generate email header banner\ninfsh app run infsh/html-to-image --input '{\n \"html\": \"

Spring Sale — 30% Off

This weekend only

\"\n}'\n\nInstall 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." }, { "title": "Email Width & Layout", "body": "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" }, { "title": "The Inverted Pyramid Layout", "body": "The most effective email layout funnels attention to a single CTA:\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└──────────────────────────────────┘" }, { "title": "Formulas That Work", "body": "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" }, { "title": "Rules", "body": "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%+" }, { "title": "Preview Text", "body": "The preview text appears after the subject line in the inbox. Don't waste it.\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\"" }, { "title": "Welcome Email (Automated, Day 0)", "body": "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" }, { "title": "Promotional / Campaign", "body": "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" }, { "title": "Product Update / Changelog", "body": "ElementContentSubject\"New: [Feature name] is here\"HeaderScreenshot or visual of the featureBodyWhat's new, why it matters, how to use itCTA\"Try [feature]\"" }, { "title": "Transactional (Receipts, Confirmations)", "body": "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" }, { "title": "Header Image Design", "body": "# Welcome email header\ninfsh app run infsh/html-to-image --input '{\n \"html\": \"

Welcome to

DataFlow

Your data, automated

\"\n}'\n\n# Sale / promotional header\ninfsh app run infsh/html-to-image --input '{\n \"html\": \"

This Weekend Only

30% OFF

All annual plans. Ends Sunday.

\"\n}'\n\n# Feature announcement header with AI visual\ninfsh 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}'" }, { "title": "CTA Buttons", "body": "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" }, { "title": "Bulletproof Buttons", "body": "HTML buttons render differently across email clients. Use the \"bulletproof button\" technique (VML for Outlook, HTML/CSS for everything else):\n\n\n\n \n \n \n
\n \n Start Free Trial\n \n
" }, { "title": "Mobile Optimization", "body": "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\n\n60%+ of emails are opened on mobile. Design mobile-first." }, { "title": "Deliverability Checklist", "body": "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" }, { "title": "Common Mistakes", "body": "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" }, { "title": "Related Skills", "body": "npx 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\nBrowse all apps: infsh app list" } ], "body": "Email Design\n\nDesign high-converting marketing emails with AI-generated visuals via inference.sh CLI.\n\nQuick Start\ncurl -fsSL https://cli.inference.sh | sh && infsh login\n\n# Generate email header banner\ninfsh app run infsh/html-to-image --input '{\n \"html\": \"

Spring Sale — 30% Off

This weekend only

\"\n}'\n\n\nInstall 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.\n\nEmail Width & Layout\nConstraint\tValue\tWhy\nMax width\t600px\tGmail, Outlook rendering standard\nMobile width\t320-414px\tResponsive fallback\nSingle column\tPreferred\tBetter mobile rendering\nTwo column\tUse sparingly\tBreaks on many clients\nImage width\t600px max, 300px for 2-col\tRetina: provide 2x (1200px)\nFont size (body)\t14-16px\tBelow 14px is hard to read on mobile\nFont size (heading)\t22-28px\tMust be scannable\nLine height\t1.5\tReadability on all devices\nThe Inverted Pyramid Layout\n\nThe most effective email layout funnels attention to a single CTA:\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\nSubject Lines\nFormulas That Work\nFormula\tExample\tOpen Rate Impact\nNumber + benefit\t\"5 ways to cut your build time in half\"\tHigh\nQuestion\t\"Are you still deploying on Fridays?\"\tHigh\nHow-to\t\"How to automate your reports in 3 steps\"\tMedium-High\nUrgency (genuine)\t\"Last day: 30% off annual plans\"\tHigh (if real)\nPersonalized\t\"[Name], your weekly report is ready\"\tVery High\nCuriosity gap\t\"The one feature our users can't stop talking about\"\tMedium-High\nRules\nRule\tValue\nLength\t30-50 characters (mobile truncates at ~35)\nPreview text\tFirst 40-100 chars after subject — design this intentionally\nEmoji\tMax 1, at start or end, test with your audience\nALL CAPS\tNever — triggers spam filters\nSpam trigger words\tAvoid: \"free\", \"act now\", \"limited time\", \"click here\" in subject\nPersonalization\t[First name] in subject lifts open rates 20%+\nPreview Text\n\nThe preview text appears after the subject line in the inbox. Don't waste it.\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\nEmail Types\nWelcome Email (Automated, Day 0)\nElement\tContent\nSubject\t\"Welcome to [Product] — here's what's next\"\nHeader\tBrand image or product screenshot\nBody\t3-4 sentences: what they signed up for, what to expect, one quick win\nCTA\t\"Complete your setup\" or \"Try your first [action]\"\nTiming\tImmediately after signup\nPromotional / Campaign\nElement\tContent\nSubject\tBenefit-focused, urgency if real\nHeader\tHero image showing the offer/outcome\nBody\tProblem → solution → offer → deadline\nCTA\t\"Get 30% Off\" or \"Start Free Trial\"\nUrgency\tReal deadline, not fake scarcity\nProduct Update / Changelog\nElement\tContent\nSubject\t\"New: [Feature name] is here\"\nHeader\tScreenshot or visual of the feature\nBody\tWhat's new, why it matters, how to use it\nCTA\t\"Try [feature]\"\nTransactional (Receipts, Confirmations)\nRule\tWhy\nClear purpose in subject\t\"Your order #1234 is confirmed\"\nMinimal design\tDon't confuse with marketing\nKey info above the fold\tOrder number, amount, date\nNo promotional content (mostly)\tCAN-SPAM allows some, but keep minimal\nHeader Image Design\n# Welcome email header\ninfsh app run infsh/html-to-image --input '{\n \"html\": \"

Welcome to

DataFlow

Your data, automated

\"\n}'\n\n# Sale / promotional header\ninfsh app run infsh/html-to-image --input '{\n \"html\": \"

This Weekend Only

30% OFF

All annual plans. Ends Sunday.

\"\n}'\n\n# Feature announcement header with AI visual\ninfsh 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\nCTA Buttons\nRule\tValue\nWidth\t200-300px, not full width\nHeight\t44-50px minimum (tap target)\nColor\tHigh contrast with background\nText\tAction verb + outcome: \"Start Free Trial\"\nShape\tRounded corners (4-8px border-radius)\nPlacement\tAbove the fold, repeated at bottom for long emails\nQuantity\tONE primary CTA per email\nBulletproof Buttons\n\nHTML buttons render differently across email clients. Use the \"bulletproof button\" technique (VML for Outlook, HTML/CSS for everything else):\n\n\n\n \n \n \n
\n \n Start Free Trial\n \n
\n\nMobile Optimization\nRule\tWhy\nSingle column layout\tMulti-column breaks on mobile\nFont minimum 14px\tSmaller is unreadable\nCTA button minimum 44px tall\tApple/Android tap target\nImages scale to 100% width\tPrevent horizontal scroll\nStack elements vertically\tSide-by-side breaks on narrow screens\nTest on Gmail app, Apple Mail, Outlook\tThe big 3 email clients\n\n60%+ of emails are opened on mobile. Design mobile-first.\n\nDeliverability Checklist\nFactor\tRule\nImage-to-text ratio\tMax 40% images, 60% text (spam filters flag image-heavy emails)\nAlt text on images\tAlways — images blocked by default in many clients\nUnsubscribe link\tRequired by law (CAN-SPAM, GDPR) — make it easy to find\nFrom name\tRecognizable person or brand name\nReply-to\tReal address, not no-reply@ (hurts deliverability)\nList hygiene\tRemove bounces, clean inactive subscribers quarterly\nSPF/DKIM/DMARC\tTechnical authentication — set up once, critical for inbox\nCommon Mistakes\nMistake\tProblem\tFix\nNo preview text\tShows \"View in browser\" or random code\tSet preview text intentionally\nImage-only emails\tBlocked images = blank email + spam risk\t60%+ text, alt text on images\nMultiple CTAs\tDecision paralysis, lower click rate\tOne primary CTA per email\nTiny text\tUnreadable on mobile\tMinimum 14px body, 22px headings\nno-reply@ sender\tHurts deliverability, feels impersonal\tUse real reply address\nNo mobile testing\tBroken layout for 60%+ of readers\tTest on Gmail app + Apple Mail\nMissing unsubscribe\tIllegal (CAN-SPAM) + spam complaints\tClear unsubscribe link in footer\nOver-designing\tEmail clients render CSS inconsistently\tSimple layouts, inline styles\nFake urgency\tErodes trust, trains users to ignore\tOnly use real deadlines\nRelated Skills\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: infsh app list" }, "trust": { "sourceLabel": "tencent", "provenanceUrl": "https://clawhub.ai/okaris/email-design", "publisherUrl": "https://clawhub.ai/okaris/email-design", "owner": "okaris", "version": "0.1.5", "license": null, "verificationStatus": "Indexed source record" }, "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" } }