MJML 响应式邮件模板生成器
用 MJML 框架生成跨邮件客户端兼容的响应式 HTML 邮件，Outlook 安全、Gmail 优化、符合 WCAG 2.1 AA 无障碍标准。
技能仅做本地文本生成与编译，无网络发送、无凭据访问；明确避免全局安装、对 mj-include 做目录白名单限制、要求用户确认后再 npm install，数据流透明。扣分点：发布者未经注册表验证、仓库中未见完整供应链审计，且 npx/编译会拉取第三方包，风险面未完全收口。
文档对失败模式描述极为详尽（include 静默丢弃、stale 输出、CssSyntaxError、mj-hero 零高度等），错误恢复路径清晰。但静态评审无法执行，无提交的测试套件或 CI 证据覆盖关键路径，且 SKILL.md 中示例的'编译干净'仅为作者声明，故不给高分。
触发条件写得非常精确（创建/生成邮件模板、编译 MJML、跨客户端渲染排障），非适用范围（不用 accordion/carousel、示例仅为占位）也明确，渐进加载组件文件设计合理。扣分：核心功能依赖 Node/npm 生态（npx mjml、npm registry），在中国大陆网络可达性存疑，且未声明中文场景支持。
信息架构分层清晰（SKILL.md→compilation/reference→components 按需加载），MIT 许可、版本 2.0.0、安装路径与验证步骤齐全。扣分：无 CHANGELOG、维护者责任与更新路径仅靠 metadata 中一个文档链接，版本 2026 版权年份真实性未验证。
声称产出可直接经 ESP 发送的双文件（.mjml+.html），相比手写邮件 HTML 边际价值高。扣分：所有'可直接使用'均未在本静态评审中复现，示例内容为占位符，实际产出仍需用户替换品牌与验证渲染，静态上限为 7，未达更高档。
文中多处标注'已验证'（v4/v5 输出差异、5.4.0 行为），但这些是作者自述的执行结果，仓库内无第三方可复现的 CI/测试证据，跨源佐证有限，静态上限 5，实际仅给 4。
- 本评审为纯静态源码阅读，未执行任何编译或渲染验证；示例模板'编译干净'等说法仅为作者声明。
- 首次使用会经 npm/npx 拉取第三方 MJML 包，企业环境请自行审查依赖版本与供应链。
- 核心工作流依赖 npm registry 与 npx，中国大陆网络环境下可能需要镜像配置，且未声明中文内容/场景支持。
- 发布者 Framix 未经过 FollowSkills 企业注册表验证，身份按未知处理。
- 模板需经真实邮件客户端（如 Litmus 类工具）渲染验证后才可上生产；本文档中的兼容性保证不可视为已证实。
这个 Skill 能做什么，适合哪些场景？
这是一个 Claude Code 技能，通过一段对话即可生成可在 Outlook 2013–365、Gmail（网页与 App）、Apple Mail 等客户端正常渲染的响应式 HTML 邮件。它基于 MJML 5.x 框架，将语义化 XML 编译为邮件客户端所需的嵌套表格 HTML，包含 Outlook 的 Ghost Tables 和背景图 VML 注入。技能内建 9 条工程规则、组件参考库（按需加载以节省 token）和 4 个可编译通过的示例模板。每次交付都同时提供可编辑的 .mjml 源文件和可直接发送的 .html 产物。技能自带大量已验证的客户端兼容性陷阱知识，如 MJML 5 的 include 默认禁用、iOS/Android 列堆叠 bug 等。
技能按六步工作流运行：从对话中推断邮件类型、品牌色和布局需求；先声明布局结构再写代码；按需读取组件参考文件；生成带完整 <mj-head> 的 MJML 文档；用 npx mjml 配合 --config.minify=true 和 --config.validationLevel=strict 编译；最后同时交付 .mjml 源文件和编译后的 .html。生成过程强制执行：所有内容置于 Section→Column 层级、图片必须带 alt、mj-title 必填、通过 mj-html-attributes 设置标题 ARIA 角色、维护 4.5:1 对比度、支持 Handlebars/Liquid/Jinja 模板标签的 <mj-raw> 保护、以及可选的深色模式图案。它还能诊断跨客户端渲染问题。
- 需要给电商订单系统生成交易类邮件（含订单表格、Handlebars 变量、共用页脚 partial）的后端开发者
- 营销团队要用 Claude Code 快速产出促销邮件（hero 横幅、导航栏、社交图标行、非堆叠布局）而无需手写表格 HTML
- 内容编辑需制作带深色模式支持和 aria-level 标题层级的新闻通讯（newsletter）模板
- 从零搭建邮件发送系统的创业公司，需要一套 Welcome / Promo / 订单确认等可直接通过 ESP（SendGrid、AWS SES、Postmark）发送的模板基础
- 排查邮件在 Outlook 或 Gmail 中渲染异常（列堆叠、背景图丢失、被 102KB 截断）的开发者，可让 Claude 引用技能中的陷阱清单诊断
这个 Skill 有哪些优点和局限？
- 覆盖大量实测的客户端兼容性陷阱（MJML 5 include 静默丢弃、v5 minify 不再剥离空白导致列堆叠、Outlook 背景定位只认关键字值等），并给出可操作的规避方案
- 强制 strict 验证 + minify 编译，输出保证通过 Gmail 102KB 截断限制
- 无障碍标准落实到位：alt 文本、mj-title/aria-label、lang 属性、通过 mj-html-attributes 设置的 heading 角色、4.5:1 对比度
- 组件参考按需加载，简单模板不浪费 token；四个示例均在 MJML 5.4.0 严格模式下编译通过
- MIT 许可，可商用、可修改、可再分发
- 依赖 Node.js ≥ 20 和项目内安装的 MJML，环境不满足时无法编译
- 技能明确不建议使用 mj-accordion 和 mj-carousel，交互性邮件的能力有限；所有邮件客户端均完全屏蔽 JavaScript，无任何真实交互
- 未提及自动化测试套件；平台兼容性声称基于源文档中的经验结论，仓库内无独立测试佐证
- Outlook 的 VML 背景图仅支持 <mj-section> 和 <mj-hero>，列级背景图在 Outlook 中不显示
- 示例中的品牌、图片、文案均为占位符，直接使用需自行替换；无官方文档说明与其他邮件构建工具（如 Maizzle、HEML）的迁移路径
如何安装这个 Skill？
三种方式任选其一：
- 推荐：npx skills add framix-team/skill-email-html-mjml（需 vercel-labs/skills CLI，装入 ~/.claude/skills/）
- git clone https://github.com/framix-team/skill-email-html-mjml 然后执行 cp -r skill-email-html-mjml/email-html-mjml ~/.claude/skills/
- 从 GitHub 下载 ZIP，解压后将内层 email-html-mjml/ 文件夹复制到技能目录。
Claude.ai 用户：将 email-html-mjml/ 文件夹压缩后经 Settings → Capabilities → Skills → Upload skill 上传。
运行要求：Node.js ≥ 20，且在每个项目中执行 npm install -D mjml（切勿全局安装）。
如何使用这个 Skill？
安装后向 Claude 描述需求即可自动触发，例如："帮我生成一封带深色模式支持的新年促销邮件模板" 或 "把这个 .mjml 文件编译成 HTML"。技能会推断需求、声明布局、生成 MJML 并编译，最终交付成对的 .mjml 和 .html 文件。若模板使用 <mj-include>，编译时需加 --config.allowIncludes true 并用 --config.includePath 限定允许目录；交付前应 grep 编译产物确认 include 内容确实存在。四份示例（basic-layout、order-confirmation、promo-sale、newsletter）可作参考，其中文案和图片均为占位符，需替换后使用。
这个 Skill 与同类方案有什么区别？
源材料将 MJML 定位为可靠性框架而非便利层，指出手写 Ghost Tables、VML 注入和 CSS 内联几乎不可维护——这正是该技能相对于手写 HTML 邮件的差异化所在。但源材料未提及其他同类 MJML 技能或工具（如 Maizzle、HEML），故不做具体竞品对比。