marketing-email

星标1

分支0

更新时间2026年3月30日 05:07

Create professional HTML email campaigns (EDM) for enterprise internal distribution. Produces Outlook-compatible, responsive HTML emails with Microsoft brand styling. Supports single-language and multilingual (简中/繁中/English) layouts. Use when asked to create EDM, marketing email, newsletter HTML, email blast, or email campaign content.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

来源

haxudev

haxudev/haeronclaw

打开 GitHub 仓库查看创作者相关仓库

下载

Marketing Email / EDM Skill

Overview

Create elegant, professional HTML emails (EDM — Email Direct Marketing) for enterprise internal audiences. Output is a standalone .html file ready to paste into Outlook or any email platform.

Target audience: Enterprise internal users (Microsoft employees, partners) Primary email client: Desktop Outlook (Word rendering engine) — the most restrictive HTML email renderer Output: Single self-contained .html file written to /tmp

Workflow

Preferred: MJML → HTML (Recommended)

MJML handles Outlook compatibility automatically. Use this approach when possible.

Write MJML source (.mjml file in /tmp)
Compile to HTML: npx mjml /tmp/email.mjml -o /tmp/email.html
Review and deliver the .html file

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-all font-family="'Segoe UI','等线','DengXian','Microsoft YaHei','PingFang SC',Arial,sans-serif" />
      <mj-text font-size="15px" line-height="1.6" color="#333333" />
    </mj-attributes>
  </mj-head>
  <mj-body width="600px" background-color="#F3F2F1">
    <!-- Banner -->
    <mj-section background-color="#0078D4" padding="30px 40px">
      <mj-column>
        <mj-text color="#ffffff" font-size="24px" font-weight="700">
          Email Title Here
        </mj-text>
      </mj-column>
    </mj-section>

    <!-- Content -->
    <mj-section background-color="#ffffff" padding="30px 40px">
      <mj-column>
        <mj-text>Body content here</mj-text>
      </mj-column>
    </mj-section>

    <!-- CTA -->
    <mj-section background-color="#ffffff" padding="0 40px 30px">
      <mj-column>
        <mj-button background-color="#0078D4" color="#ffffff" font-size="15px"
                   font-weight="600" inner-padding="12px 30px" href="https://example.com">
          Call to Action
        </mj-button>
      </mj-column>
    </mj-section>

    <!-- Footer -->
    <mj-section background-color="#F3F2F1" padding="20px 40px">
      <mj-column>
        <mj-text font-size="12px" color="#999999">
          Footer disclaimer text
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Fallback: Raw HTML

When MJML is unavailable or for fine-tuned control, write raw HTML following the rules below.

EDM Design Standards

Layout

Pure <table role="presentation"> layout — no <div> layout, no CSS Grid, no Flexbox
Content area: single <table>, do NOT nest tables inside content cells (pricing tables may use their own table)
Fixed width: width="600" on the outer wrapper table
Maximum 2 columns in content area (pricing/comparison tables may have more)
ALL styles inline — do NOT use <style> blocks (Outlook's Word renderer ignores them)
Use MSO conditional comments  for Outlook-specific fallbacks
cellpadding="0" cellspacing="0" border="0" on every table
Use align="center" on the outer table for centering in webmail clients

Font Stack

font-family: 'Segoe UI','等线','DengXian','Microsoft YaHei','PingFang SC',Arial,sans-serif;

Primary: Segoe UI (Windows), 等线/DengXian (CJK on modern Windows)
Fallback: Microsoft YaHei (CJK on older Windows), PingFang SC (macOS CJK), Arial (universal)
MSO conditional font fallback should also prioritize 等线/DengXian:

<!--[if mso]>
<style>
  body, td, th { font-family: '等线','DengXian','Segoe UI','Microsoft YaHei',Arial,sans-serif !important; }
</style>
<![endif]-->

Content Formatting

Element	Implementation	NOT
Headings	`<p style="font-size:20px; font-weight:700; ...">`	~~`<h1>`–`<h6>`~~ (inconsistent rendering)
Bullet lists	`•` (small circle) character + ` ` spacing	▶ ~~nested tables~~ ~~`<ul>`/`<li>`~~
Links	`<a style="color:#0078D4; text-decoration:none;">`	—
Link blocks	`<p>` with `background:#F3F6F9; border-left:3px solid #0078D4; padding:12px 16px;`	—
Images	`<img style="display:block;" width="XXX" alt="descriptive text">`	—
Spacers	`<td style="height:20px; line-height:20px; font-size:1px;"> </td>`	—

Color Palette (Microsoft Brand)

Element	Color	CSS
Banner background	Microsoft Blue	`background-color:#0078D4`
Banner text	White	`color:#ffffff`
Accent stripe	Cyan 4px	`border-top:4px solid #50E6FF`
Section title	Blue + underline	`color:#0078D4; border-bottom:2px solid #E3E3E3`
Body text	Dark gray	`color:#333333`
Links	Blue, no underline	`color:#0078D4; text-decoration:none`
Pricing table header	Blue bg, white text	`background:#0078D4; color:#fff`
Footer background	Light gray	`background-color:#F3F2F1`
Footer text	Muted gray	`color:#999999; font-size:12px`

CTA Button

Outlook does not support border-radius or many display properties on <a>. Use the VML fallback pattern:

<!-- CTA Button (Outlook-safe) -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" style="background:#0078D4; border-radius:4px;">
      <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://example.com"
        style="height:44px;v-text-anchor:middle;width:200px;" arcsize="10%" fillcolor="#0078D4" stroke="f">
        <v:textbox inset="0,0,0,0"><center style="color:#ffffff;font-family:'Segoe UI',Arial;font-size:15px;font-weight:600;">
          Call to Action
        </center></v:textbox>
      </v:roundrect>
      <![endif]-->
      <!--[if !mso]><!-->
      <a href="https://example.com" style="display:inline-block;background:#0078D4;color:#ffffff;padding:12px 30px;font-weight:600;font-size:15px;text-decoration:none;border-radius:4px;font-family:'Segoe UI',Arial,sans-serif;">
        Call to Action
      </a>
      <!--<![endif]-->
    </td>
  </tr>
</table>

Language Rules

Default behavior

Follow the user's requested language
If no language specified, match the language the user wrote in
Do NOT default to trilingual — only produce multilingual when explicitly requested

Trilingual layout (only when explicitly requested)

When the user asks for 简中 + 繁中 + English (三语版):

Stack vertically: Complete 简中 → Complete 繁中 → Complete English
Never interleave languages paragraph by paragraph
Add a language badge at the start of each section:

<td style="background:#0078D4;color:#fff;padding:4px 12px;font-size:12px;font-weight:600;border-radius:2px;display:inline-block;">
  简体中文
</td>

Add anchor navigation at the top:

<p style="font-size:13px;color:#666;margin:0 0 10px;">
  <a href="#zh-cn" style="color:#0078D4;text-decoration:none;">简体中文</a> &nbsp;|&nbsp;
  <a href="#zh-tw" style="color:#0078D4;text-decoration:none;">繁體中文</a> &nbsp;|&nbsp;
  <a href="#en" style="color:#0078D4;text-decoration:none;">English</a>
</p>

Separate language blocks with a 5px gray divider:

<td style="height:5px;background:#E3E3E3;font-size:1px;line-height:1px;">&nbsp;</td>

Translation quality

Simplified Chinese (简中): Natural mainland China terminology
Traditional Chinese (繁中): Use Taiwan/HK terminology where different (e.g., 軟體 not 软件, 雲端 not 云端)
English: Professional business English, concise and direct

HTML Email Skeleton (Raw HTML Template)

<!DOCTYPE html>
<html lang="zh-CN" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--[if mso]>
  <noscript><xml>
    <o:OfficeDocumentSettings>
      <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
  </xml></noscript>
  <style>
    body, td, th { font-family: '等线','DengXian','Segoe UI','Microsoft YaHei',Arial,sans-serif !important; }
  </style>
  <![endif]-->
</head>
<body style="margin:0;padding:0;background-color:#F3F2F1;font-family:'Segoe UI','等线','DengXian','Microsoft YaHei','PingFang SC',Arial,sans-serif;">

  <!-- Outer wrapper -->
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#F3F2F1;">
    <tr>
      <td align="center" style="padding:20px 0;">

        <!-- Email body 600px -->
        <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="background-color:#ffffff;">

          <!-- Accent stripe -->
          <tr><td style="height:4px;background-color:#50E6FF;font-size:1px;line-height:1px;">&nbsp;</td></tr>

          <!-- Banner -->
          <tr>
            <td style="background-color:#0078D4;padding:30px 40px;">
              <p style="margin:0;font-size:24px;font-weight:700;color:#ffffff;line-height:1.3;">
                Email Title
              </p>
              <p style="margin:8px 0 0;font-size:14px;color:rgba(255,255,255,0.85);line-height:1.4;">
                Subtitle or date
              </p>
            </td>
          </tr>

          <!-- Content section -->
          <tr>
            <td style="padding:30px 40px;">
              <!-- Section title -->
              <p style="margin:0 0 16px;font-size:18px;font-weight:600;color:#0078D4;border-bottom:2px solid #E3E3E3;padding-bottom:8px;">
                Section Title
              </p>
              <!-- Body text -->
              <p style="margin:0 0 12px;font-size:15px;color:#333333;line-height:1.6;">
                Body content goes here. Use inline styles for everything.
              </p>
              <!-- Bullet list -->
              <p style="margin:0 0 8px;font-size:15px;color:#333333;line-height:1.6;">
                &bull;&nbsp; First bullet point<br>
                &bull;&nbsp; Second bullet point<br>
                &bull;&nbsp; Third bullet point
              </p>
              <!-- Link block -->
              <p style="margin:16px 0;padding:12px 16px;background:#F3F6F9;border-left:3px solid #0078D4;font-size:14px;line-height:1.5;">
                <a href="https://example.com" style="color:#0078D4;text-decoration:none;font-weight:600;">
                  Resource Link Title →
                </a><br>
                <span style="color:#666;font-size:13px;">Brief description of the linked resource</span>
              </p>
            </td>
          </tr>

          <!-- Footer -->
          <tr>
            <td style="background-color:#F3F2F1;padding:20px 40px;">
              <p style="margin:0;font-size:12px;color:#999999;line-height:1.5;">
                This email was sent to internal recipients. Please do not forward externally.
              </p>
            </td>
          </tr>

        </table>
      </td>
    </tr>
  </table>

</body>
</html>

Outlook Compatibility Checklist

Before delivering the final HTML, verify:

Common Patterns

Pricing / Comparison Table

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
  <tr>
    <th style="background:#0078D4;color:#fff;padding:10px 12px;font-size:13px;font-weight:600;text-align:left;border:1px solid #E3E3E3;">Feature</th>
    <th style="background:#0078D4;color:#fff;padding:10px 12px;font-size:13px;font-weight:600;text-align:center;border:1px solid #E3E3E3;">Basic</th>
    <th style="background:#0078D4;color:#fff;padding:10px 12px;font-size:13px;font-weight:600;text-align:center;border:1px solid #E3E3E3;">Pro</th>
  </tr>
  <tr>
    <td style="padding:10px 12px;font-size:14px;border:1px solid #E3E3E3;">Feature name</td>
    <td style="padding:10px 12px;font-size:14px;text-align:center;border:1px solid #E3E3E3;">✓</td>
    <td style="padding:10px 12px;font-size:14px;text-align:center;border:1px solid #E3E3E3;">✓</td>
  </tr>
</table>

Key Metric / Highlight Box

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td width="33%" align="center" style="padding:16px 8px;">
      <p style="margin:0;font-size:28px;font-weight:700;color:#0078D4;">99.9%</p>
      <p style="margin:4px 0 0;font-size:13px;color:#666;">SLA Uptime</p>
    </td>
    <td width="33%" align="center" style="padding:16px 8px;">
      <p style="margin:0;font-size:28px;font-weight:700;color:#0078D4;">50+</p>
      <p style="margin:4px 0 0;font-size:13px;color:#666;">Azure Regions</p>
    </td>
    <td width="33%" align="center" style="padding:16px 8px;">
      <p style="margin:0;font-size:28px;font-weight:700;color:#0078D4;">24/7</p>
      <p style="margin:4px 0 0;font-size:13px;color:#666;">Support</p>
    </td>
  </tr>
</table>

Email File Output (.eml)

When the user requests a downloadable email file (e.g., "生成邮件文件", "create an email I can open in Outlook", "generate .msg", "generate email file"), produce an .eml file using the bundled helper script.

CRITICAL: NEVER create .msg files. Outlook .msg is a proprietary OLE2/CFBF binary format with MAPI properties. Python's email module creates MIME/RFC 5322 messages — saving these as .msg produces a corrupt file that Outlook cannot open. Always use .eml instead. .eml files open natively in Outlook, Thunderbird, and Apple Mail.

Using the helper script

import sys, os
sys.path.insert(0, os.path.join(os.environ.get("AGENT_SKILLS_DIR",
    "/home/site/wwwroot/.github/skills"), "marketing-email", "scripts"))
from create_eml import create_eml

# From an HTML file (after MJML compilation or raw HTML generation)
path = create_eml(
    html_path="/tmp/campaign.html",
    subject="Azure AI 最新动态 | Latest Updates",
    output_path="/tmp/azure_ai_updates.eml",
    sender="noreply@microsoft.com",
    to="all-hands@microsoft.com",
    importance="high",   # optional: "high", "normal", "low"
)

From an HTML string

path = create_eml(
    html="<html><body><h1>Hello</h1></body></html>",
    subject="Quick Update",
    output_path="/tmp/quick_update.eml",
)

Workflow: MJML → HTML → .eml

Write MJML source to /tmp/email.mjml
Compile: npx mjml /tmp/email.mjml -o /tmp/email.html

Convert to .eml:

path = create_eml(
    html_path="/tmp/email.html",
    subject="Campaign Subject",
    output_path="/tmp/campaign.eml",
)

Deliver both /tmp/email.html (for preview) and /tmp/campaign.eml (for Outlook)

Features

CJK support: UTF-8 encoding throughout, subject and body handle 中文/繁中/日本語
Multipart MIME: Includes both text/plain (auto-extracted) and text/html parts
Outlook priority: Set importance="high" to show the red exclamation mark in Outlook
Zero dependencies: Uses only Python standard library (email, datetime)

Output

Write the final HTML to /tmp/<descriptive-name>.html (e.g., /tmp/foundry_quota_update_edm.html)
When the user wants a downloadable email file, also generate /tmp/<descriptive-name>.eml
If using MJML, also keep the .mjml source in /tmp for future edits
The file delivery pipeline will automatically upload to blob storage and provide a download link
NEVER output .msg files — always use .eml for downloadable email files

name	marketing-email
description	Create professional HTML email campaigns (EDM) for enterprise internal distribution. Produces Outlook-compatible, responsive HTML emails with Microsoft brand styling. Supports single-language and multilingual (简中/繁中/English) layouts. Use when asked to create EDM, marketing email, newsletter HTML, email blast, or email campaign content.

marketing-email

同仓库更多 Skills

同仓库更多 Skills

Marketing Email / EDM Skill

Overview

Workflow

Preferred: MJML → HTML (Recommended)

Fallback: Raw HTML

EDM Design Standards

Layout

Font Stack

Content Formatting

Color Palette (Microsoft Brand)

CTA Button

Language Rules

Default behavior

Trilingual layout (only when explicitly requested)

Translation quality

HTML Email Skeleton (Raw HTML Template)

Outlook Compatibility Checklist

Common Patterns

Pricing / Comparison Table

Key Metric / Highlight Box

Email File Output (.eml)

Using the helper script

From an HTML string

Workflow: MJML → HTML → .eml

Features

Output

Marketing Email / EDM Skill

Overview

Workflow

Preferred: MJML → HTML (Recommended)

Fallback: Raw HTML

EDM Design Standards

Layout

Font Stack

Content Formatting

Color Palette (Microsoft Brand)

CTA Button

Language Rules

Default behavior

Trilingual layout (only when explicitly requested)

Translation quality

HTML Email Skeleton (Raw HTML Template)

Outlook Compatibility Checklist

Common Patterns

Pricing / Comparison Table

Key Metric / Highlight Box

Email File Output (.eml)

Using the helper script

From an HTML string

Workflow: MJML → HTML → .eml

Features

Output