销售信版式与营销邮件视觉设计

邮件 HTML 设计为什么难

邮件客户端的渲染环境可能是前端最恶劣的场景之一：Gmail 与 Outlook 会剥离 <script> 标签和 CSS Grid，Android 版 Gmail 默认屏蔽图片，Apple Mail 与 iOS Mail 会把浅色背景自动反转为深色，且所有客户端都不支持 JavaScript。一份在浏览器里完美显示的页面，塞进邮件后可能直接崩溃或完全无法阅读。

这个技能如何工作

该技能将邮件设计拆分为五个必须按顺序执行的阶段，不允许跳步：

• Discovery：先确认邮件类型（事务性、营销、Newsletter 还是 Onboarding）、唯一转化目标、收件人画像、现有品牌资产、发送平台（ESP）以及是否需要暗色模式支持。至少确认邮件类型与目标后才继续。
• Brief：输出一份简短设计简报，要求客户确认后才进入布局阶段。后续所有设计决策都对照这份简报评估。
• Technical Constraints：固化硬性约束——宽度上限 600px（内容区最多 560px）、按图片被屏蔽的状态设计、仅使用 Web 安全字体或带显式回退的 Web 字体、用 @media (prefers-color-scheme: dark) 处理暗色反转、480px 以下单列布局、按钮至少 44×44px、不使用 JS 和 CSS Grid/Flexbox 做结构布局。
• Layout Spec：逐区块输出规格，包括主题行与预标题文本（各有字数上限）、Logo 与页眉、首屏 Hero 区（标题 24–32px，CTA 必须出现在首屏）、正文区块（每块只传达一个观点，3–5 句）、单一主 CTA 的按钮规范（含 Outlook VML 回退）、以及页脚必填项。
• Deliverable：产出一份开发可直接实现的完整规格说明，外加不超过 2000 字符的纯文本版本（CTA 转为裸 URL，去除所有格式标记）。

适用边界

该技能默认只处理销售信与营销邮件版式设计任务，不主动读取任务范围外的文件或数据。事实信息不足时会标记缺口并要求确认，不会猜测填充。营销输出仅为合规方案与内容草稿，不承诺流量或转化结果，也不提供刷量、群发骚扰或规避平台规则的设计。需要联网检索或调用接口时，会先说明目标与用途并取得明确同意。