email-marketing

邮件营销技能

制作一封单页 HTML 邮件——居中、单栏，邮件正文周围不带界面元素。将其视为营销素材：一个核心创意，一个 CTA。

工作流

1. 阅读当前的 DESIGN.md（已在上方注入）。与其他任何界面相比，邮件更依赖展示字体——从 DS 中挑选最醒目的字体令牌，用于标题组合。
2. 根据简报挑选品牌和产品。生成真实的品牌字标、真实的产品名称，以及一句真实的产品优势描述——不要使用占位符。
3. 按顺序布局，所有内容均居中放在宽度为 600–680px、带色调的页面背景上的栏中（让邮件正文看起来像邮件，而不是页面）：
   • 页眉——左侧放品牌字标，右侧放 3 个简短导航链接（SHOP、JOURNAL、MEMBERS）。下方加细线。
   • 主视觉区块——放置一个 16:9 的产品图片占位区域。使用带 DS 色调的渐变，或产品的风格化 SVG 剪影（鞋子、瓶子、耳机等，具体取决于简报内容）。左上角添加一个小型品牌印章，左下角添加配色标签。
   • 眉题——使用小型大写字母、强调色，并用 · 字符分隔（例如“NEW · MAX-CUSHION TRAINER · EMBER FLARE”）。
   • 标题组合——使用展示字体编排 2–3 行标题，全部大写，字距极紧。让一个强调词稍微倾斜（transform: skew(-6deg)），呈现运动感的平行四边形效果。
   • 正文——左对齐的 2–3 句段落，使用正文字体。
   • 主要 CTA——使用纯色胶囊形或块状按钮。仅放置一个。
   • 规格网格——用 2×2 网格展示（大号数字 + 单位 + 标签）信息块，数字使用展示字体。
   • 页脚——品牌字标、地址行、退订和在浏览器中查看的链接。
4. 编写一份 HTML 文档：
   • 从 <!doctype html> 写到 </html>，CSS 内联。
   • 使用 margin: 0 auto 将栏居中。设置 body { background: <tint> }，营造“页面上的邮件”视觉效果。
   • 不使用外部图片——产品图片使用内联 SVG 或带 DS 色调的渐变区块。
   • 在页眉、主视觉区块、标题、CTA、规格区域上添加 data-od-id。
5. 自检：
   • 从上到下读完邮件需 8–10 秒。
   • 仅有一个 CTA。强调色最多出现两次（眉题 + CTA，或标题中的词语）。
   • 在 480px 宽的窗口中清晰易读（栏会重新排列，字体缩小一级）。

输出约定

在 <artifact> 标签之间输出：

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

在产物前写一个句子，之后不写任何内容。