Unitpost/email Skill 技能

技能简介

Unitpost/email 是一个 MIT 许可证的开源邮件组件库，专注于解决「一份 HTML 同时兼容 Outlook、Gmail 和 Apple Mail」这一长期痛点。开发者可以用 React 组件语法或字符串 TSX 语法编写邮件，库负责渲染成这三个主流邮件客户端都能正确显示的 HTML，完全离线工作，无需注册账号或申请 API Key。最新支持通过 npx skills add unitpostcom/email 直接安装到 AI 编程助手。

核心能力

跨邮箱客户端渲染

同一套代码在 Outlook（桌面及网页版）、Gmail（桌面及移动版）和 Apple Mail 上显示效果一致，无需针对不同客户端写兼容代码。

双重编写方式

支持 React 组件方式（@unitpost/email/react）和纯字符串方式（parseTsx），后者无需引入 React，适合在 Node 脚本或非 React 项目中使用。

灵活样式支持

支持 Tailwind 风格的 className、任意 raw CSS（custom-css 属性）以及传统内联样式，所有样式最终以 inline CSS 形式输出，避免邮件客户端过滤外部样式表。

变量插值

模板中未解析的 {{tokens}} 会原样渲染，变量值在发送时由程序填充，且所有值都会经过 HTML 转义防止注入，javascript: 协议链接会被自动丢弃。

零依赖发送

渲染出的 HTML 是标准字符串，可直接交给任意邮件发送服务（SendGrid、AWS SES、自建 SMTP 等），不绑定任何特定发送商。

AI Agent 友好安装

通过 npx skills add unitpostcom/email 即可让 AI 编程助手学会这套组件的用法、导入方式和预置布局，大幅降低 AI 生成合规邮件的门槛。

安装配置

方式一：AI Agent 安装（推荐）

npx skills add unitpostcom/email

此命令将 Unitpost/email 的所有组件、布局和使用说明注册到 AI 编程助手的上下文中，之后可以用自然语言让 AI 生成邮件代码。

方式二：Node 项目安装

npm install @unitpost/email zod

zod 为 peer dependency，需要 Node 18 以上版本。React 为可选依赖（仅在使用 @unitpost/email/react 时需要）。

使用步骤

第一步：选择编写方式

React 项目使用组件方式：

import { Section, Heading, Button, render } from "@unitpost/email/react";

const html = render(
  <Section>
    Hi Mike
    <Button>Get started</Button>
  </Section>,
);

非 React 环境使用字符串方式：

import { parseTsx, renderToHtml } from "@unitpost/email";
const html = renderToHtml(parseTsx("<Section>...</Section>"));

第二步：选择预置布局

官网提供多个预置布局（headers、heroes、CTAs、footers），直接复制 TSX 代码到项目中修改内容即可，无需从头设计。

第三步：填充变量

在模板中使用 {{user_name}}、{{order_id}} 等占位符，在发送程序中将实际值注入，保持模板与业务逻辑分离。

第四步：发送

将渲染好的 HTML 字符串交给邮件发送服务。无论使用哪家发送商，HTML 内容本身不变。

适用场景

• 事务性邮件：订单确认、密码重置、账户通知等需要高兼容性的自动化邮件
• 营销邮件：产品推广、促销活动、Newsletter 等需要美观布局的营销内容
• AI 生成邮件：AI 编程助手通过 npx skills add 学习后，自动生成合规邮件代码
• 多客户端产品：用户群体涵盖 Outlook、Gmail、 Apple Mail 任意组合的企业邮件系统

适用人群

• 前端开发者：需要快速产出跨客户端兼容邮件的项目
• AI 编程助手用户：通过 npx skills add 扩展 AI 生成合规代码的能力
• 营销技术团队：需要程序化生成美观营销邮件的自动化系统
• 全栈工程师：不愿在邮件渲染上耗费调试时间的快速迭代项目

工作原理

核心是「一次编写，多端渲染」：组件树经由 render() 或 renderToHtml() 转换为内联 CSS HTML，过程中自动处理了 Outlook 的 VML 渲染模式、Gmail 的安全策略限制和 Apple Mail 的 WebKit 渲染差异。parseTsx 允许直接解析 JSX-like 字符串而不需要完整的 React 运行时，适合服务端渲染场景。

官方链接

• 官网：https://www.unitpost.com/email
• 组件参考：https://www.unitpost.com/components
• Playground（浏览器在线预览）：https://www.unitpost.com/playground
• 模板库：https://www.unitpost.com/templates/gallery
• GitHub：https://github.com/unitpostcom/email
• npm：https://www.npmjs.com/package/@unitpost/email