HTML邮件模板生成器

要解决的问题

写一封在 Gmail、Outlook、Apple Mail 里都能正确显示的 HTML 邮件，比写普通网页难得多。Outlook 使用 Word 渲染引擎，会忽略部分 CSS；各客户端对浮动、圆角、内边距的支持参差不齐。结果常常是同一段 HTML 在 Web 邮箱里正常，在 Outlook 里却错位：按钮变成方块，图片不显示，双栏布局塌成一栏。

核心能力与工作方式

该技能采用一套经过主流客户端验证的兼容方案：

• Table 布局：结构全部使用 table 元素，而非 div + 浮动，确保 Outlook 正确渲染。
• Inline CSS：核心样式直接写进 style 属性，绕过客户端的样式表过滤。
• 响应式适配：在 <head> 的 @media 查询中实现移动端缩放，主体固定 600px，移动端回退为 100% 宽度。
• Outlook 专项处理：MSO 条件注释配合 VML 按钮，保证 Outlook 中的圆角 CTA 按钮正确显示。

生成流程分四步：AI 先收集邮件类型与品牌信息并产出 JSON 配置；再调用 generate_email_template.py 渲染 HTML；随后在浏览器中预览；最后手动把占位图片与 # 链接替换为真实内容。

内置五种模板：欢迎、促销、密码重置、通知、订单确认，各有独立的字段结构，主题色默认值（如主色 #4A90D9、正文 #2D3748）也可按需覆盖。

适用边界

• 图片必须使用外部 HTTPS URL，不支持 base64 内嵌或本地路径。
• 颜色字段只接受 #RRGGBB / #RGB，不支持 hsl()、rgba() 或 CSS 变量。
• 生成的 HTML 是静态写死的，不支持变量占位符自动替换。
• 只输出 HTML 文件，不支持 Word / PDF，也不包含发送邮件的功能。
• 单个 HTML 建议不超过 500KB，过大可能被客户端截断。
• Outlook 中出现轻微样式偏差属于 table 布局的正常现象，Web 邮箱（Gmail、QQ、163）显示效果最佳。