Agent Skills
返回列表
📁

Juice 邮件样式内联工具

办公效率 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_3c6cb52e/inline-css-into-html-emails-before-delivery-across-mail-clients-juice。

技能介绍

问题：HTML 邮件的样式总是错位

多数邮件客户端的渲染引擎对 HTML 和 CSS 的支持并不一致。当你把一个常规网页的 HTML 直接粘贴到邮件正文中时，外部样式表通常会被过滤，<style> 标签也经常被忽略，导致邮件在 Gmail、Outlook 等客户端中出现字体、颜色或布局错乱。要解决这个问题，必须在发送前把 CSS 规则直接写入元素的 style 属性。

技能如何工作

这个技能基于 Juice 完成样式内联，核心能力是把样式表中的选择器规则转换为对应元素的行内样式。使用时，Agent 需要确保当前环境已安装 Node.js，然后通过 CLI 或代码调用 Juice。

  • CLI 转换：执行 juice [options] input.html output.html，Juice 会读取源文件并输出邮件安全的 HTML。
  • 模板引擎适配：如果使用 Handlebars，可以设置 juice.codeBlocks.HBS = {start: '{{', end: '}}'}，避免模板中的 <= 被误判为 HTML 标签。
  • 参数命名规则：CLI 选项使用短横线命名，例如 extraCss 对应 extra-css，webResources.scripts 对应 web-resources-scripts。

适用边界与注意点

  • 该技能只负责把 CSS 内联到 HTML，不会重写 HTML 结构或优化响应式布局。
  • 如果你的构建流程依赖 Browserify，直接引入 juice 会失败，因为 Juice 及其依赖使用了 require('fs')。此时应改用 juice/client 版本。
  • 内联后的 HTML 仍需在真实邮件客户端中测试，尤其是 Outlook 的桌面版本，它对现代 CSS 的支持仍然有限。

使用场景

  • 把已经写好的 HTML 邮件正文发给 Gmail、Outlook 前，需要把样式表内联到元素 style 属性，避免版式错位。
  • 邮件模板使用 Handlebars 变量和比较符号，在生成邮件 HTML 前配置 codeBlocks，防止模板语法被当成 HTML。
  • 团队要把 HTML 邮件归档或交给下游系统，需要先通过 Juice 生成不依赖外部样式表的邮件 HTML。
  • 在 Node.js 环境中批量转换邮件 HTML 时，需要用命令行把 input.html 生成可发送的 output.html。

适合人员

  • 邮件营销工程师：负责批量发送 HTML 活动邮件，希望各客户端版式稳定。
  • 前端开发工程师：维护网页版邮件模板，需要在 Node.js 构建流程中生成邮件安全 HTML。
  • 营销运营：需要归档已生成的 HTML 邮件，或把邮件内容交接给下游系统。
  • 使用 Browserify 打包邮件生成脚本的开发者：需要避开 require('juice')，改用 juice/client。