技能介绍

要解决什么问题

一封邮件在 Gmail、Outlook、Apple Mail 和手机上的表现往往不一致：表格布局被 Word 引擎改写、暗色模式把对比度打穿、图片默认关闭后 CTA 消失。文案可以由 email-creative-builder 负责，但渲染层需要单独的构建与验收：单封 HTML、内联样式、客户端兼容矩阵，以及 HTML 与 text/plain 是否说同一件事。

本技能只做 SEND Engage 里的「渲染半环」——产出可交付的 E/D 单元和渲染 QA 报告，不写主题/正文文案，也不评分、不执行 S1/S2/N1/D1 否决（那是 email-quality-auditor 的职责）。

技能如何工作

输入通常是已批准的创意（主题、预标题、正文、CTA 及纯文本备选），或待 QA 的原始 HTML，外加落地页 URL、模式（promo/cold/newsletter）、目标客户端列表与品牌色/字体/Logo 约束。

核心步骤包括：

按 references/email-render-specs.md 搭单列、约 600px 宽的表格骨架，嵌套表而非 flex，不依赖外链样式表
响应式：窄屏重排、触控目标 ≥44px、移动端可读字号
暗色模式：逐对检查前景/背景对比，显式设色，避免客户端强制反色后文字或 Logo 不可读
无障碍：阅读顺序、alt、语言属性、对比度与字号清单逐项 pass/fail
图片关闭：信息不能只在图里；每个 CTA 用 bulletproof（非图片）按钮；背景图要有纯色兜底
客户端渲染矩阵：按 Gmail/Outlook 桌面+Web/Apple Mail/iOS/Android 标注 pass/fail 与具体破损点，行标记为 Measured（真实种子箱/预览）或 Estimated（支持矩阵推断）
纯文本一致性：text/plain 与 HTML 在核心信息、主 CTA、目标 URL 上一致

若修复渲染必须改文案（主题过长、按钮装不下标签），只上报并退回 email-creative-builder，不在此改字。交付前会对 QA 报告做 humanizer 去套话处理；严重渲染阻塞项可写入 hot-cache / open-loops。

边界与注意点

无创意且无 HTML → NEEDS_INPUT；带 CTA 但缺落地 URL → 需补齐才能做 message-match
未做真实种子/预览测试时，不得把 Estimated 写成 Measured；未知客户端行为应记为 open loop
可选：在 Resend 为 ESP 时，可用连接器向自有邮箱发 [render test]，把矩阵行从 Estimated 升级为 Measured（仅自测，非群发活动）
构建通过后，主路径下一步是 email-quality-auditor 打分与否决；若要做渲染/主题 A/B，则接 send-experiment-designer

截图预览

使用场景

创意已定稿，要在交给 email-quality-auditor 前，把单列内联表格 HTML 与纯文本备选按同一套 CTA 链接成型
从 ESP 导出或粘贴的模板 HTML，需按 Gmail/Outlook/Apple Mail 等目标客户端填渲染矩阵并区分 Measured 与 Estimated
促销或 newsletter 成稿后，要验收暗色模式对比度、图片默认关闭时是否仍能读到 offer 并点击 bulletproof 按钮
外采或遗留 HTML 未过规范，需补齐约 600px 表格骨架、alt 与无障碍清单，并核对 text/plain 与 HTML 信息一致