写邮件模板这事，终于不用跟 Outlook 死磕了

做过 EDM 的朋友都知道：一个看起来挺正常的 HTML 邮件，到 Outlook 里就崩成鬼样——图片错位、按钮点不动、背景全黑。这是 Outlook 用 Word 渲染邮件的”祖传 bug”，不是你的锅，但每次都让你来背。今天推荐的这个 Skill，就是给 Claude Code 装上一个”邮件渲染老中医”，让它一开口就把这些坑都给你绕过去。

它到底解决了什么

email-html-mjml 来自开源作者 framix-team，目前在 GitHub 上已经攒到约 42 颗星，采用 MIT 协议开放。它不是一个简单的”邮件模板生成器”，而是一整套围绕 MJML 5.x 的工程化流程。MJML 本身就是个”语义化邮件 XML”——你写一次，编译出 Outlook 2007–365、Gmail 网页 / App、Apple Mail 都能正确渲染的 table HTML。

手工写这堆嵌套表格、MSO 条件注释、VML 背景图、Ghost Tables，基本等于找虐。这个 Skill 直接把这层脏活从你脑子里搬走：

• 自动注入 Ghost Tables（MSO 条件注释），Outlook 的 Word 引擎拿到正确的固定宽度布局，现代客户端看不到这些注释；
• 在 <mj-section> 和 <mj-hero> 里自动塞 VML 背景图，这是 Outlook 唯一两个支持背景图的位置；
• 用 Hybrid-Fluid 混合宽度计算，现代客户端走流体百分比，Outlook 走 Ghost Table 固定宽度，一份源搞定两套逻辑；
• 编译时强制开启 --config.minify=true，把产物压到 Gmail 102KB 裁剪阈值以下，避免邮件被腰斩；
• 背景位置只允许 top/center/bottom 关键字，px 值 Outlook 直接静默忽略——这种文档里几乎没人写的细节，Skill 里都帮你堵住了。

用起来是什么体验

安装一行命令搞定：

npx skills add framix-team/skill-email-html-mjml

前提是你本地有 Node.js 14+，并在项目里 npm install -D mjml。之后你只需要跟 Claude 说”帮我做一个 SaaS 注册成功的欢迎邮件，要有 logo、二维码、CTA 按钮”，它会先拆解结构，从组件索引里加载相关文档，生成完整的 MJML 源码，再用 npx mjml 编译出生产可用的 HTML。最后交付物是 两份：.mjml 源码给你后续维护，.html 直接贴进你的邮件平台。

适合谁 / 不适合谁

适合：做 SaaS、跨境电商、Newsletter、运营活动页的团队，尤其是对 Outlook 兼容性有强需求的企业客户场景；做 WCAG 2.1 AA 无障碍合规的开发者（Skill 里默认就走这套规范，含屏幕阅读器和深色模式适配）。

不太适合：只发纯文本邮件的场景；或者你想直接调 ESP（Mailchimp / SendGrid）的模板编辑器，而不是写代码的团队。

为什么值得现在 star

邮件模板这事儿十几年没变过，碎片化的客户端兼容知识才是真正的护城河。这个 Skill 把零散的 workaround 沉淀成可复用的工作流，等于把一个资深邮件前端工程师的经验打包给你用。42 颗星还在早期，README 里连”iOS/Android 列堆叠 bug 是靠 font-size:0 修复而不是压缩”这种内幕都写得很清楚，作者明显是踩过坑的人。

下次再有老板问”这个邮件在 Outlook 里怎么又错位了”，把这个仓库转过去就行了。

👉 GitHub：framix-team/skill-email-html-mjml

GitHub: https://github.com/framix-team/skill-email-html-mjml