email-marketing

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Email 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.

制作单页HTML邮件——居中、单列，邮件主体无额外边框装饰。将其视为营销物料：一个核心主题，一个行动按钮（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
```
  . Set
```
body { 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-id
```
  on 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).

阅读当前的DESIGN.md（已注入上方）。邮件比其他载体更依赖显示字体——从设计系统（DS）中选择最醒目的字体样式用于标题组合。
从需求中选取品牌和产品。生成真实的品牌标识、产品名称以及一句真实的产品卖点描述——禁止使用占位符。
布局，所有元素居中放置在600–680px宽度的列内，页面背景为淡色调（让邮件主体看起来像邮件而非页面本身）：
- 页眉（Masthead）——左侧为品牌标识，右侧为3个简短导航链接（SHOP、JOURNAL、MEMBERS）。下方添加细下划线。
- 主图区块（Hero block）——16:9比例的产品图片占位符。使用设计系统（DS）色调的渐变或产品风格化SVG轮廓（如鞋子、瓶子、耳机等，根据需求暗示选择）。在左上角添加小型品牌印章，左下角添加配色标签。
- 眉栏（Eyebrow）——小型大写字母，强调色，用
```
·
```
  分隔（例如："NEW · MAX-CUSHION TRAINER · EMBER FLARE"）。
- 标题组合（Headline lockup）——2–3行标题，使用显示字体，全部大写，字距紧凑。对其中一个强调文字应用轻微倾斜效果（
```
transform: skew(-6deg)
```
  ），营造运动感的平行四边形视觉效果。
- 正文（Body）——2–3个段落，左对齐，使用正文字体。
- 主要行动按钮（Primary CTA）——实心胶囊形或块状按钮，仅保留一个。
- 规格表格（Specs grid）——2×2网格，包含（大数字 + 单位 + 标签）标注，数字使用显示字体。
- 页脚（Footer）——品牌标识、地址栏、退订和浏览器查看链接。
编写单个HTML文档：
- 包含
```
<!doctype html>
```
  到
```
</html>
```
  的完整结构，CSS内联。
- 使用
```
margin: 0 auto
```
  实现列居中。设置
```
body { background: <tint> }
```
  ，强化“页面中的邮件”视觉隐喻。
- 不使用外部图片——产品图片采用内联SVG或设计系统（DS）色调的渐变区块。
- 在页眉、主图、标题、CTA、规格表格上添加
```
data-od-id
```
  属性。
自我检查：
- 邮件从上到下阅读耗时8–10秒。
- 仅保留一个CTA。强调色最多出现两次（眉栏+CTA，或标题文字）。
- 在480px窗口中显示清晰（列自动重排，字体缩小一级）。

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.

将内容包裹在

<artifact>

标签内：

<artifact identifier="email-slug" type="text/html" title="Email — Subject Line">
<!doctype html>
<html>...</html>
</artifact>

在artifact标签前添加一句话描述，之后无其他内容。