Email Marketing
FreeCreate effective HTML emails for product launches.
Free · Opens the source repo
What Email Marketing does
The Email Marketing skill is designed to help developers and designers produce high-quality HTML emails specifically tailored for product launches. This skill emphasizes a clean, centered single-column layout that adheres to best practices for email design, ensuring that your marketing messages are both visually appealing and functional across various email clients. It provides a structured workflow that guides users through the process of creating an email that effectively communicates a brand's message and drives engagement through a clear call-to-action (CTA).
The workflow begins with reading the active design system document, allowing users to leverage existing design tokens for typography and layout. By selecting the appropriate brand and product from the brief, users can generate a cohesive wordmark and product name, ensuring that the email aligns with the overall branding strategy. The layout includes essential components such as a masthead, hero image, headline, body copy, a primary CTA, and a specifications grid, all designed to capture the recipient's attention and convey the product's benefits succinctly.
This skill is particularly useful for marketing teams and freelance designers who need to create product launch emails quickly and efficiently, without sacrificing quality. By following the outlined steps, users can produce a polished HTML email that meets industry standards, ensuring compatibility with various email clients. The emphasis on inline CSS and the absence of external images also helps in maintaining the integrity of the email design across different platforms.
Overall, the Email Marketing skill is a practical tool for anyone involved in digital marketing or design, providing a reliable framework for crafting effective email communications that resonate with audiences and drive conversions.
When to use it
Use this skill when tasked with creating product launch emails, newsletters, or any marketing emails that require a professional layout.
When not to use it
This skill may not be suitable for highly customized or complex email designs that require advanced interactivity or dynamic content.
What you can build with it
Launching a New Product
Quickly create a product launch email that highlights key features and drives sales through a clear CTA.
Monthly Newsletter
Design a visually appealing newsletter that keeps subscribers informed about updates and promotions.
Event Promotion
Craft an email to promote an upcoming event, ensuring all essential details are presented clearly and attractively.
How to install Email Marketing
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/email-marketing --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by nexu-ioEmail Marketing Skill
Produce a single HTML email — centered, single column, no chrome around the email body. Treat it like a marketing artifact: one big idea, one CTA.
Workflow
- Read the active DESIGN.md (injected above). Email leans on the display font more than any other surface — pick the loudest type token in the DS for the headline lockup.
- Pick the brand + product from the brief. Generate a real wordmark, a real product name, and one real benefit sentence — no placeholders.
- Layout, in order, all centered inside a 600–680px column on a tinted
page background (so the email body looks like an email, not the page):
- Masthead — wordmark on the left + 3 short nav links (SHOP, JOURNAL, MEMBERS) on the right. Thin underline.
- Hero block — a 16:9 product image placeholder. Use a DS-tinted gradient or a stylized SVG silhouette of the product (shoe, bottle, headphones, whatever the brief implies). Add a tiny brand stamp on the top-left and a colorway tag on the bottom-left.
- Eyebrow — small caps, accent color, separated by
·characters (e.g. "NEW · MAX-CUSHION TRAINER · EMBER FLARE"). - Headline lockup — 2–3 line headline using the display font, all caps,
extra-tight tracking. Apply a slight skew (
transform: skew(-6deg)) on one accent word to give it a sporty parallelogram feel. - Body — 2–3 sentence paragraph, left-aligned, body font.
- Primary CTA — solid pill or block button. One only.
- Specs grid — 2×2 grid of (big number + unit + label) callouts using the display font for the numbers.
- Footer — wordmark, address line, unsubscribe + view-in-browser links.
- Write a single HTML document:
<!doctype html>through</html>, CSS inline.- Center the column with
margin: 0 auto. Setbody { background: <tint> }so the email-on-page metaphor reads. - No external images — use inline SVG or DS-tinted gradient blocks for the product photo.
data-od-idon the masthead, hero, headline, CTA, specs.
- Self-check:
- Email reads top to bottom in 8–10 seconds.
- One CTA. Accent appears at most twice (eyebrow + CTA, or headline word).
- Looks legible on a 480px window (column reflows, type drops one step).
Output contract
Emit between <artifact> tags:
<artifact identifier="email-slug" type="text/html" title="Email — Subject Line">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact, nothing after.
Frequently asked questions about Email Marketing
Similar skills
Guideline Generation
Transform brand materials into actionable voice guidelines.
Landing Page Conversion Audit
Identify and fix conversion leaks on landing pages.
0-to-1 Launch
Accelerate your product launch to find early customers.
Competitor Ad Intelligence
Analyze and reverse-engineer competitor ad strategies.
Content Strategy
Generate data-driven content plans for your business.
Webinar Marketing
Optimize your webinars for better engagement and conversion.