# Transactional Email Template Builder > 当为新产品搭建事务邮件、迁移邮件服务商或重构遗留邮件模板时使用；用 React Email 组件 + 统一发送层产出含暗黑模式/i18n/防垃圾优化/UTM 追踪的生产级模板系统；不适用于纯营销群发活动、富交互 HTML 页面或站内信。触发词：事务邮件、邮件模板、React Email、Resend、邮件发送、邮件可达性 - Skill: `findscripter/transactional-email-template-builder` (Agent Skill) - Install (CLI): `npx skillmds@latest add findscripter/transactional-email-template-builder` - Raw SKILL.md: https://api.skillmd.com/api/skills/findscripter/transactional-email-template-builder/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: MIT - Author: findscripter (https://skillmd.com/u/findscripter) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/findscripter/transactional-email-template-builder --- ## 何时使用 适用： - 为新产品从零搭建事务邮件（欢迎、邮箱验证、密码重置、发票、通知、周报摘要）。 - 在邮件服务商之间迁移（Resend / Postmark / SendGrid / AWS SES），需要统一发送接口。 - 重构遗留模板：补可访问性、暗黑模式、i18n。 - 排查邮件可达性 / 进垃圾箱问题。 不该用（负边界）： - 纯营销群发活动（应使用专用营销 ESP 与独立发送域/IP，避免拖累事务邮件可达性）。 - 需要富交互的 HTML 页面（邮件客户端会剥离脚本、grid/flex，仅适合表格布局）。 - 站内通知 / 推送 / 短信等非邮件通道。 ## 步骤 1. 按结构落地目录：`components/`（layout、partials）、`templates/`（各类邮件）、`lib/`（send.ts 统一发送、providers/、tracking.ts）、`i18n/`（en.ts、de.ts…）、`preview/`。 2. 先写基础布局 `EmailLayout`：品牌头/脚、`` 文案、暗黑模式 `@media (prefers-color-scheme: dark)`（覆盖内联样式必须加 `!important`）、退订与隐私链接。 3. 基于布局写具体模板（如 `WelcomeEmail`、`InvoiceEmail`），props 用 TypeScript 接口约束，CTA 用 `