Email Marketing Skill 用于制作一封品牌产品发布邮件，输出单个 HTML 文档。它把邮件视为营销作品：一个大创意、一个 CTA。
用途
该技能面向品牌产品发布场景，生成一封完整的 HTML 邮件。邮件居中、单栏，邮件正文周围没有额外界面装饰。
工作流
-
读取当前生效的 DESIGN.md（在上下文中注入）。邮件比其他界面更依赖展示字体，因此需从设计系统中挑选最响亮的字体 token 用于标题组合。
-
从简报中选取品牌与产品。生成真实的字标、真实的产品名和一句真实的利益点句子，不使用占位符。
-
按顺序布局，全部居中于 600–680px 的列内，页面背景带色调（使邮件正文看起来像邮件，而不是页面）：
- 报头（Masthead）：左侧字标，右侧 3 个短导航链接（SHOP、JOURNAL、MEMBERS）。细下划线。
- 主视觉块（Hero block）：16:9 产品图片占位。使用设计系统色调的渐变或产品的风格化 SVG 剪影（鞋、瓶、耳机等，由简报暗示）。左上角加小品牌印章，左下角加配色标签。
- 眉题（Eyebrow）：小型大写字母，强调色，用 · 字符分隔（例如 "NEW · MAX-CUSHION TRAINER · EMBER FLARE"）。
- 标题组合（Headline lockup）：2–3 行标题，使用展示字体，全大写，极紧字距。对其中一个强调词应用轻微倾斜（transform: skew(-6deg)），营造运动感的平行四边形效果。
- 正文（Body）：2–3 句段落，左对齐，正文字体。
- 主 CTA：实心胶囊或块状按钮。仅一个。
- 规格网格（Specs grid）：2×2 网格，由（大数字 + 单位 + 标签）标注组成，数字使用展示字体。
- 页脚（Footer）：字标、地址行、退订与在浏览器中查看链接。
编写单个 HTML 文档
- 从 <!doctype html> 到 </html>，CSS 内联。
- 用 margin: 0 auto 居中列。设置 body { background: <tint> }，使“页面上的邮件”隐喻成立。
- 不使用外部图片——产品照片使用内联 SVG 或设计系统色调的渐变块。
- 在报头、主视觉、标题、CTA、规格上添加 data-od-id。
自检
- 邮件自上而下 8–10 秒可读完。
- 仅一个 CTA。强调色最多出现两次（眉题 + CTA，或标题词）。
- 在 480px 窗口下可读（列重排，字号降一档）。
输出契约
在 <artifact> 标签之间输出：
<artifact identifier="email-slug" type="text/html" title="Email — Subject Line"> <!doctype html> <html>...</html> </artifact>
artifact 之前一句话，之后无内容。
适用场景
适用于品牌产品发布邮件的快速生成，尤其是需要与设计系统（DESIGN.md）保持一致、强调展示字体与单一 CTA 的营销邮件。
限制
资料未提供该技能的具体收费、价格、平台支持范围或效果数据。邮件中的产品图片以占位方式呈现（内联 SVG 或渐变块），并非真实产品照片。