email-design

Overview

What the email-design skill does

The email-design skill is a practical guide for designing high-converting marketing emails and templates. It combines proven layout patterns, subject line approaches, and deliverability-aware rules with an HTML-to-image workflow for on-brand header banners.

This skill focuses on:

• Marketing newsletters and promotional campaigns
• Welcome sequences and onboarding emails
• Transactional templates (receipts, alerts, confirmations)
• Mobile-friendly layouts that render reliably in Gmail, Outlook, and major clients
• Visual email headers generated from HTML using the inference.sh CLI

If you run email campaigns, design UI for email, or support marketing teams, email-design gives you ready-to-apply constraints and examples so you can move beyond guesswork.

Who email-design is for

Use the email-design skill if you are:

• Email marketers and growth teams planning newsletters, promos, or drip campaigns
• Designers and frontend developers responsible for HTML email templates
• Product and lifecycle marketers creating welcome flows and transactional communications
• Agencies and freelancers who need a repeatable approach to email layout, subject lines, and banners

It is especially useful when you want:

• A clear, client-tested layout spec (widths, columns, responsive rules)
• Guidance on subject lines and structure that support conversions
• A way to generate email header images directly from HTML snippets

When email-design is or isn’t a good fit

Good fit when:

• You send regular campaigns and care about CTR and conversions
• You need guardrails for junior marketers or new team members
• You want to standardize email layout and visual style across brands
• You already use, or are willing to install, the infsh CLI for HTML-to-image banners

Not ideal when:

• You only send plain-text emails and do not use templates or visuals
• You need a full email service provider (ESP) or sending infrastructure (this skill is about design, not delivery or list management)
• You are looking for a drag-and-drop visual editor; this is a pattern-and-workflow guide, not a web UI

How to Use

1. Installation and setup

To install the email-design skill into an Agent Skills–compatible environment, run:

npx skills add https://github.com/inferen-sh/skills --skill email-design

This pulls the email-design guide from the inferen-sh/skills repository and makes it available to your agent or tooling.

For its HTML-to-image workflow, the skill expects the inference.sh CLI (infsh) to be available:

# Install instructions (see official guide):
# https://raw.githubusercontent.com/inference-sh/skills/refs/heads/main/cli-install.md

Once infsh is installed and configured, you can log in and start generating banners directly from HTML snippets.

2. Key files and where to start

After installation, open these resources first:

• SKILL.md – Core description of the email-design skill, usage notes, and constraints
• guides/design/email-design (directory) – Detailed design guidance for layouts, subject lines, and email patterns (path may contain additional references depending on your checkout)

Typical review order:

1. SKILL.md – Understand the scope: layout, subject lines, deliverability rules.
2. Design guide files under guides/design/email-design – Apply patterns to your own campaigns (e.g., welcome sequences, promos, transactional emails).

3. Using the HTML-to-image banner workflow

The email-design skill includes an example of generating email header visuals from HTML using the infsh/html-to-image app.

Step-by-step example

1. Log in to inference.sh:

infsh login

2. Run the HTML-to-image app with inline HTML:

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>"
}'

3. Use the generated image as the hero banner or header in your promotional email template.

You can adapt the HTML block for different campaigns (e.g., new feature launches, webinars, seasonal promos) while keeping the recommended email width in mind.

4. Applying layout rules in your templates

The email-design skill documents practical layout constraints that match real-world client behavior. You can integrate them directly into your HTML/CSS structure.

Core constraints highlighted in the guide

• Max width: 600px – Standard rendering width for major clients like Gmail and Outlook
• Mobile width: 320–414px – Responsive fallback range for smartphones
• Single-column layout preferred – More reliable across mobile clients and older desktop apps

In practice, that means:

• Center your main content in a 600px-wide container table
• Avoid complex multi-column grids; if you need multiple columns, use stacked layouts on mobile
• Keep critical content (offer, CTA, key message) near the top and in the main column

5. Integrating with your email marketing workflow

You can use email-design in several ways:

• In planning:

  • Use the documented layout and subject line rules to brief designers and copywriters.
  • Define standard templates for newsletters, promotions, and transactional emails.

• In design and build:

  • Apply the width and layout constraints when coding HTML emails.
  • Use the HTML-to-image pipeline to quickly produce matching visual headers.

• In optimization:

  • Test subject line variations based on the formulas referenced in SKILL.md.
  • Refine visual hierarchy (e.g., inverted pyramid layout) to drive more clicks to your primary CTA.

6. Adapting the skill to your stack

The repository guidance is intentionally tool-agnostic around sending and ESP choice. To adapt email-design to your environment:

• ESP-agnostic templates:

  • Export HTML and images generated using email-design patterns and upload them to systems like Mailchimp, SendGrid, Braze, Customer.io, or your in-house email platform.

• Team onboarding:

  • Include the key constraints and patterns from SKILL.md in your internal design system or playbooks.

• Automation:

  • If you automate campaign creation via scripts or agents, call infsh app run infsh/html-to-image with dynamic HTML to generate bespoke banners per campaign.

FAQ

Is email-design an email sender or just a design skill?

email-design is a design and pattern skill, not an email sending platform. It helps you design layouts, subject lines, banners, and templates that work well in common clients. You still need an ESP or sending infrastructure (e.g., Mailchimp, SendGrid, your own SMTP) to send the emails.

Do I have to use the inference.sh CLI to benefit from email-design?

No. The core value of email-design—layout patterns, subject line approaches, and deliverability rules—is useful even without infsh. The inference.sh CLI is only required if you want to use the HTML-to-image workflow for email headers and banners.

What are the main layout recommendations in email-design?

The skill highlights:

• A 600px maximum email width for consistent rendering in Gmail and Outlook
• A 320–414px mobile width for responsive behavior on smartphones
• A preference for single-column layouts for more predictable display and easier mobile optimization
  These constraints help reduce layout issues and make your campaigns more reliable across devices.

Can I use email-design for transactional emails as well as marketing campaigns?

Yes. The skill specifically covers transactional templates (such as receipts, password resets, and alerts) alongside marketing emails. You can apply the same width, hierarchy, and subject line principles while keeping transactional content compliant and focused.

How does email-design help with subject lines?

email-design includes subject line guidance and formulas so you can craft clearer, more compelling subjects that match the content and intent of each email type (welcome, promo, newsletter, transactional). While it does not send emails or run experiments for you, it gives a structured starting point for A/B tests.

Can designers and developers use email-design together?

Yes. The skill is meant to be shared across marketing, design, and frontend roles:

• Marketers use the patterns to plan campaigns and write subject lines.
• Designers use layout rules to structure the visual hierarchy.
• Developers implement HTML templates within the technical constraints documented in the guide.

Where can I see the full technical details for email-design?

After installing the skill, open the Files view and inspect:

• SKILL.md – for the skill definition, scope, and concise rules
• The guides/design/email-design directory – for the full design guidance
  This gives you the complete reference behind the editorial summary on this page.