SuperAPI AI 工具集

email-render-builder

营销与增长

查看项目

更新于 10-13 20:07

技能介绍

用途

Email Render Builder 是 SEND Engage 流程中负责“渲染”环节的技能,用于将已批准的邮件创意转换为可在各类邮件客户端中一致呈现的 HTML 代码。它解决的是邮件在 Gmail、Outlook、Apple Mail 及移动端渲染不一致的问题,而非文案撰写或质量评分。

主要能力

响应式 HTML 布局构建:基于单列、表格结构的骨架,使用内联样式,内容宽度约 600px。采用嵌套表格而非 float/flex,不依赖外部样式表。布局承载文案但不改动任何文字。

响应式适配:单列在窄视口下重排,点击目标保持 ≥44px,字号在移动端无需缩放即可阅读。需说明采用流式/混合方案还是媒体查询方案,以及哪些客户端支持。

暗黑模式检查:检查每对前景/背景颜色在暗黑模式反转下的对比度,为文本和容器设置显式颜色,避免客户端强制反转导致文字或 logo 被淹没。

无障碍检查:语义化阅读顺序、每张图片有意义的 alt 文本、语言属性、足够对比度、移动端可维持的基础字号,逐项记录通过/失败。

图片禁用回退:邮件在图片被屏蔽时仍须传达信息。每张图片有 alt 文本,任何优惠/声明/CTA 不单独存在于图片中,背景图有纯色回退,每个 CTA 使用 bulletproof(非图片)按钮标记。

客户端渲染矩阵:针对每个目标客户端(Gmail 应用+网页、Outlook 桌面 Word 引擎+网页、Apple Mail、iOS Mail、Android)记录预期通过/失败及具体问题,标注为 Measured(基于真实种子/渲染测试)或 Estimated(基于支持矩阵)。

纯文本对等检查:text/plain 替代版本须与 HTML 承载相同核心信息、相同主 CTA 和相同目标 URL。

载荷绑定:记录源创意版本/哈希,计算精确的 HTML 和纯文本哈希。副本、披露、链接、图片或标记的任何编辑都会产生新的渲染版本。

使用方式

快速开始示例:

  • 从创意构建响应式 HTML:粘贴主题+正文+CTA,目标 URL
  • QA 邮件 HTML 跨 Gmail、Outlook、Apple Mail 和移动端:粘贴 HTML,标记暗黑模式和图片禁用问题
  • 修复在 Outlook 和图片禁用下损坏的渲染:粘贴 HTML

该技能读取已批准的邮件创意或待 QA 的原始 HTML、目标 URL、模式(促销/冷邮件/通讯)、目标客户端列表及品牌约束。输出用户可用的 HTML 构建结果、渲染 QA 报告和可复用的交接摘要。

当 Resend 作为 ESP 时,提供零依赖渲染测试发送脚本:preview python3 "${CLAUDE_PLUGIN_ROOT}/scripts/connectors/resend.py" send --from <已验证发件人> --to <自己的测试收件箱> --subject "[render test] …" --html build.html,需在添加 --live 前获得对确切测试收件人、发件人、主题、html_hash 和操作的单独授权。

适用场景

适用于需要将邮件文案转化为可跨客户端一致渲染的 HTML 代码、修复渲染问题、进行渲染 QA 或准备 A/B 渲染测试的营销场景。

限制

  • 不撰写主题行或正文文案(由 email-creative-builder 负责)
  • 不对邮件评分、不执行任何否决、不计算 profile 加权 EQS(由 email-quality-auditor 负责全部四项否决 S1/S2/N1/D1 和 EQS 汇总)
  • 若渲染修复需要改动文案,须标记并路由回 email-creative-builder
  • 任何未经真实种子/预览测试验证的渲染结果须标注为 Estimated
  • 不得编造客户端支持事实

质量门槛

交接前须满足:单列响应式表格在移动端重排;每对颜色在亮/暗模式下通过对比度;每张图片有 alt 文本且图片禁用时可读;每个 CTA 为 bulletproof 按钮;每个目标有标注通过/失败的客户端渲染矩阵;纯文本替代版本与 HTML 对等。任何一项失败须修复或在交接中报告。

后续技能

主要后续为 email-quality-auditor(评分并执行 SEND 否决);若渲染修复需改动文案则回到 email-creative-builder;若构建用于 A/B 测试则交给 send-experiment-designer;若图片禁用或暗黑模式问题源于落地页则交给 landing-optimizer。

官方文档暂未提供具体 URL。