lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Biz SMTP 表单自动回复器 — 潜在客户填写表单后自动发送邮件

此技能将落地页上的注册表单（符合越南流量标准的姓名/电话/邮箱）转变为在用户提交表单后立即发送的2封自动邮件：(A) 发送给潜在客户的热情欢迎邮件，(B) 发送给网站所有者的通知邮件。邮件将根据来自 biz-* 流程的现有上下文为每个产品定制草稿（而非通用的“感谢您的注册，我们会尽快与您联系”——那是在浪费潜在客户）。

核心理念：邮件自动回复是黄金时刻。潜在客户刚点击提交按钮 = 处于意图巅峰期。30秒内到达的邮件必须 (1) 确认他们提交成功，(2) 交付CTA中承诺的内容（引流磁铁/预订/支付链接），(3) 明确下一步的期望。一封好的自动回复邮件 = 将20-40%的潜在客户从冷淡转化为热情。一封通用邮件 = 潜在客户屏蔽发件人或24小时内忘记品牌名称。

为什么选择SMTP（不锁定一个提供商）：SMTP是开放标准——用户可以选择适合预算、地区及合规要求的提供商。Gmail SMTP免费每天500封（适用于每天<50个潜在客户的落地页），Resend SMTP每月3000封，SendGrid每天100封永久免费，Brevo（越南流行）每天300封免费，越南主机商（Mắt Bão/PA/Inet）通常赠送SMTP。代码使用nodemailer——更换提供商只需更改4个环境变量，无需修改代码。避免供应商锁定。

输出技能：代码补丁 + 2封响应式HTML邮件草稿 + 环境变量列表 + 测试计划。技能不会自动发送测试邮件——用户必须首先确认草稿，因为引流磁铁链接、品牌语气和紧迫感措辞均属于用户的资产。

---

何时使用此技能

• 用户刚通过/biz-deploy-vercel部署完毕落地页，但表单提交后无响应。
• 用户已有落地页（Next.js, Vite或Vercel上的静态HTML）并希望接入邮件自动回复。
• 用户正在新建项目，希望从开始就集成邮件功能，然后再部署。
• 用户已有Gmail/Google Workspace，希望利用免费SMTP，而不是创建新的提供商账户。
• 用户有越南主机商（Mắt Bão, PA, Inet）提供现成SMTP服务器并希望使用。

在以下情况请勿使用此技能：

• 用户希望进行邮件营销广播（新闻通讯、7-30天滴灌活动）→ 更适合使用Mailchimp/ConvertKit/MailerLite。
• 用户希望使用SMS/Zalo OA自动回复 → 不同的使用场景。
• 用户希望集成CRM（将潜在客户导入Hubspot/Pipedrive/Notion数据库）→ 其他技能。
• 用户需要大量冷邮件推广 → 应使用Instantly/Smartlead，而非事务性邮件。

---

总体工作流程（7个阶段）

阶段0：检测项目技术栈（Next.js App / Pages / Vite / 静态HTML）
       ↓
阶段1：选择SMTP提供商（Gmail / Resend SMTP / SendGrid / Mailgun / Brevo / Zoho / 自定义）
       ↓
阶段2：收集上下文（offer.json + conversion-copy.md，或读取Next.js app/page.tsx，或读取已部署的HTML）
       ↓
阶段3：选择邮件模式（引流磁铁 / 预订 / 支付 / 培育）
       ↓
阶段4：草拟2封邮件（自动回复 + 网站所有者通知）—— 展示给用户
       ↓
阶段5：用户审查和编辑 —— 迭代直到用户批准
       ↓
阶段6：编写代码（安装 nodemailer + API 路由 + 表单绑定 + 环境变量）
       ↓
阶段7：提供商设置 + 测试计划 —— 指导如何获取SMTP凭据、验证域名（如果需要）、进行在线测试

每个阶段停等待用户确认——尤其是阶段1（提供商选择）、阶段4-5（邮件内容）、阶段7（提供商DNS），因为这些是用户的品牌资产。代码生成在阶段6，技能会更为主动。

---

阶段0 — 检测项目技术栈

读取项目的根文件以确定技术栈。技术栈决定了：API路由放置位置、nodemailer的导入语法、表单绑定类型（使用fetch还是form action）。

检测到的文件	技术栈	API路由路径	表单绑定
next.config.js/mjs/ts + app/ 文件夹	Next.js App Router	app/api/submit/route.ts	客户端组件 fetch('/api/submit')
next.config.js/mjs/ts + pages/ 文件夹	Next.js Pages Router	pages/api/submit.ts	客户端组件 fetch('/api/submit')
vite.config.js/ts	Vite (React/Vue/Svelte)	api/submit.js (Vercel 函数)	客户端组件 fetch('/api/submit')
package.json 无框架，有 index.html	静态HTML	api/submit.js (Vercel 函数)	内联 <script> 使用 fetch('/api/submit')
无本地项目，仅有URL	已部署的现有页面	需要用户先克隆仓库或提供仓库路径	—

进一步读取以确定表单字段：

• 在代码中查找 <form> → 列出所有现有的 <input name="...">
• 默认预期（根据项目记忆）：name, phone, email。某些页面可能包含：company, message, budget, utm_source。
• 如果表单尚不存在 → 技能将在阶段6创建一个包含最少3个字段（姓名/电话/邮箱）的新表单。

重要提示：如果用户没有本地项目（仅部署了URL），则暂停询问："Anh/chị có repo local để em wire code không? Em cần edit file source. Nếu chỉ có URL, anh/chị clone repo về và chỉ em đường dẫn nhé." 无法仅通过URL编写代码。

---

阶段1 — 选择SMTP提供商

请用户从7个提供商中选择1个。每个提供商有不同的SMTP配置（主机/端口/认证），技能在用户选择后会自动填写环境变量模板。

#	提供商	免费层	适用场景	SMTP主机	端口	备注
1	Gmail / Google Workspace	每天500封	用户已有Gmail/Workspace，流量低	smtp.gmail.com	587 (STARTTLS)	必须使用应用专用密码（2FA），不要使用主密码
2	Resend SMTP	每月3000封	需要高送达率 + 美观日志，可以设置DNS	smtp.resend.com	587	用户 = resend，密码 = API key。需要验证域名才能从自定义 @brand.vn 发送
3	SendGrid SMTP	每天100封永久免费	技术栈已熟悉SendGrid，需要webhook	smtp.sendgrid.net	587	用户 = apikey 字面值，密码 = API key
4	Mailgun SMTP	每天100封 × 3个月	欧盟/美国地区，对开发者友好	smtp.mailgun.org (美国) 或 smtp.eu.mailgun.org (欧盟)	587	用户/密码来自Mailgun域名设置
5	Brevo (Sendinblue) SMTP	每天300封永久免费	越南流行，免费层最广，有越南支持	smtp-relay.brevo.com	587	用户 = 登录邮箱，密码 = SMTP key（不同于API key）
6	Zoho Mail SMTP	每天5封免费，$1/用户/月	用户已使用Zoho Workspace	smtp.zoho.com	587	如果开启2FA，需要应用专用密码
7	自定义SMTP	取决于主机提供商	越南主机商（Mắt Bão/PA/Inet/Nhân Hòa）赠送SMTP，或使用自托管的Postfix	用户提供	用户提供	用户需粘贴完整主机/端口/用户/密码

根据产品类型的默认推荐：

• 落地页每天<50个潜在客户，用户有Gmail → Gmail SMTP（零成本，5分钟设置）。
• 落地页每天>50个潜在客户或需要专业级送达率 → Brevo（免费每天300封，在越南送达率好）或 Resend SMTP（每月3000封，日志美观）。
• 用户希望迁移无忧，将来可自托管 → 从一开始就使用自定义SMTP。

向用户提问的格式：

Anh/chị muốn dùng SMTP provider nào để gửi email tự động?

1. Gmail / Google Workspace (free 500/ngày, dễ nhất nếu đã có Gmail)
2. Resend SMTP (free 3000/tháng, deliverability cao, cần verify domain)
3. SendGrid SMTP (free 100/ngày forever, đã quen API)
4. Mailgun SMTP (free 100/ngày × 3 tháng)
5. Brevo / Sendinblue SMTP (free 300/ngày, popular VN)
6. Zoho Mail SMTP (nếu đã xài Zoho Workspace)
7. Custom SMTP (hosting VN của anh/chị có sẵn / tự host)

Nếu chưa có sẵn account nào, em đề xuất [Gmail nếu traffic thấp / Brevo nếu cần deliverability cao]. Anh/chị chọn số mấy?

用户选择后 → 保存，以便在阶段6注入环境变量模板，并在阶段7根据正确的提供商指导获取凭据。

⚠️ 重要 — 安全性：SMTP凭据（尤其是Gmail应用专用密码）拥有从用户账户发送邮件的权限。切勿将其硬编码到源代码中。始终使用环境变量。如果意外提交，警告用户立即轮换。

---

阶段2 — 收集上下文

目标：对产品足够深入地理解，以便草拟的邮件不通用。3种输入模式：

模式A — 存在流程产物（最丰富）

用户刚刚运行了/biz-offer-alex-hormozi和/或ui-ux-pro-max → 拥有以下文件：

• output/<case-slug>/offer.json — 细分市场、理想成果、机制、赠品堆叠、保证、定价（主要真相来源）
• output/<case-slug>/conversion-copy.md — 即用型英雄区块（标题、副标题、CTA措辞）
• output/<case-slug>/landing-page/app/page.tsx — 当前已构建的Next.js销售页面（读取以了解正在使用的板块和表单字段）

⚠️ 2026-05-14更新： 旧流程包含 layout.json + copy.json（来自已废弃的biz-sales-page-layout）——新流程跳过这两个文件。只需 offer.json + 读取 page.tsx 即可获得足够的上下文。

读取上述3个来源。提取用于邮件的如下信息：

• 细分市场 + 理想成果 → 个性化主题行（"[Tên], lộ trình AI Agent 8 tuần đã sẵn sàng" 而非 "Welcome"）
• 机制名称 → 在正文中强化（"Hệ thống PROMPT framework anh/chị sắp học..."）
• 赠品堆叠 → 在邮件中列出（如果产品是免费/低价且可立即交付赠品）
• 保证文案 → 在邮件中引用以减轻焦虑
• CTA措辞 → 在邮件的最终CTA中呼应

模式B — 有落地页但无JSON

用户有已部署的HTML但未运行biz-offer/biz-sales-page。技能读取HTML：

• curl -s <URL> 或读取本地 index.html 文件
• 解析hero区域h1、副标题、CTA按钮文案、定价区域、保证区域
• 从中推断产品类型 + 细分市场

模式B在80%的情况下足够好，但邮件的个性化程度不如模式A。建议用户："可以运行/biz-offer-alex-hormozi来获取offer.json然后再回来，邮件质量会更高。或者继续使用模式B。"

模式C — 没有任何上下文

用户只有表单HTML，没有上下文。技能必须快速提问5个问题：

1. 您销售的产品/服务是什么？（一句话概括）
2. 用户填写表单后，您想发送给他们什么？（可下载的PDF / 预订链接 / 支付链接 / 仅确认稍后致电）
3. 品牌名称 + 发件人名称（将显示在 "From:" 中）
4. 您希望接收新潜在客户通知的邮箱地址
5. 您拥有的域名，用于验证SPF/DKIM（如果选择Resend/SendGrid/Mailgun/Brevo — Gmail则跳过）

---

阶段3 — 选择邮件模式

2触发器模型（适用于有结账流程的产品）：对于低价课程/数字产品且有在线支付，存在2个不同的触发点，发送2封不同的邮件。不要将它们合并到一封邮件中。

潜在客户在落地页填写表单
         ↓
   [触发点A — /api/submit]
         ↓
   邮件P3（付款前提醒，简洁版）
         ↓
潜在客户完成支付 → 支付提供商webhook
         ↓
   [触发点B — /api/payment-webhook]
         ↓
   邮件P5（购买后引导，完整版）

内容规则：

• P3（付款前）：仅包含支付链接 + 简短保证 + 紧迫感。不要列出全部交付物/赠品堆叠——潜在客户尚未"赚取"，列出会降低支付紧迫感。
• P5（付款后）：交付所有内容——访问链接、全部交付物、赠品堆叠、群组链接、办公时间表、1个跟进问题以个性化互动。这才是真正的黄金时刻。

（阅读记忆feedback_email-autoresponder-2-stage-flow以获取详细理由。）

---

根据阶段2的上下文，选择合适的模式。阅读references/email-formulas.md以获取详细的越南语模板。

模式	触发器	使用场景	主题行提示
P1 — 引流磁铁交付	表单提交	产品 = 下载PDF/电子书/模板/荟萃分析/免费清单	"[Tên], tài liệu [X] đã sẵn sàng — mở file ngay 👇"
P2 — 预订确认	表单提交	产品 = 预约通话/咨询/演示/免费策略会	"[Tên], đã ghi nhận đăng ký buổi tư vấn — bước tiếp theo bên trong"
P3 — 付款前提醒	表单提交（尚未支付）	产品 = 低价产品（199K-3M VND），邮件引导至结账	"[Tên], link thanh toán [Khóa X] — giữ giá ưu đãi 24h ⏰"
P4 — 培育（销售电话即将进行）	表单提交	产品 = 高价教练/代理服务（5M-50M+ VND），销售团队将在24小时内致电	"[Tên], em [Người gọi] sẽ liên hệ trong 24h — checklist chuẩn bị bên trong"
P5 — 购买后引导	支付Webhook	潜在客户刚完成支付——交付全部价值 + 1个个性化问题	"🎉 Chào mừng [Tên] vào [Khóa X] — mở khoá ngay"

选择模式的规则：

• 产品 = 免费下载/培训 → 仅P1（1个触发器，1封邮件）。
• 产品 = 免费预订通话 → 仅P2（1个触发器，1封邮件）。
• 产品 = 低价商品带在线支付（Stripe/Momo/ZaloPay/Sepay） → P3 + P5（2个触发器，2封邮件）。
• 产品 = 高价销售电话 → 仅P4，通过销售团队跟进（成交后的引导是另一个流程）。

技能推荐合适的模式 + 理由，请求用户确认。例如："Dựa vào offer.json em thấy đây là khoá 1.99M VND có payment integration. Em đề xuất setup 2 email: P3 (nhắc thanh toán khi điền form) + P5 (onboarding sau khi pay xong + 1 câu hỏi personalize). Anh/chị đồng ý hay chỉ muốn 1 email P3 trước?"

---

阶段4 — 草拟2封邮件

生成 2封纯越南语邮件（使用anh/chị称谓），响应式HTML。

邮件A — 发送给潜在客户的自动回复

6区块结构（阅读references/email-formulas.md以获取每个模式的具体措辞）：

1. 主题行 — 使用 {{name}} 进行个性化，少于50个字符，如果适合品牌语气则在末尾添加1个轻量emoji（✉️ 👇 ✓），避免垃圾邮件触发器（"FREE", "$$", "guarantee"大写）。
2. 预览文本 — 主题行下方收件箱中显示的1行文本，说明打开邮件的价值。
3. 问候语 — "Chào anh/chị {{name}}," — 不使用"Dear"，不使用"Xin chào quý khách"。
4. 正文 — 根据所选模式。规则：
   • 简短（少于200词）。
   • 包含1个清晰的主要CTA链接/按钮。
   • 从上下文中明确引用产品名称/机制（而不是"sản phẩm của chúng tôi"）。
   • 如果模式为P3/P4 → 包含1个紧迫性提醒 + 1个保证（担保）。
5. 签名 — 发件人姓名 + 品牌名称 + 1个联系方式链接（Zalo/电话/网站）。
6. 页脚 — 地址（反垃圾邮件法要求）+ 取消订阅链接（出于合规性需要，即使是事务性邮件也应有）。

邮件B — 发送给网站所有者的通知

结构（根据模式略有不同）：

1. 主题行 — "[🔔] 新潜在客户：{{name}} — [产品名称]"
2. 正文 — 摘要表格：
   • 姓名：{{name}}
   • 电话：{{phone}}
   • 邮箱：{{email}}
   • 时间戳：[当前时间]
   • 来源：{{formSource}}
   • 下一步：根据模式。如果P3 → 提醒潜在客户尚未支付（"等待支付——链接在邮件A中已发送"）。如果P4 → 提醒销售团队在X小时内致电。
3. 关键信息 — 额外上下文：UTM参数（如果表单收集）、是否有客户历史、未完成支付金额。
4. 页脚 — 用于监控的无关紧要注释。

展示用于审查的格式：

• 邮件A和B分别显示为预览块（主题行 + 带有 {{...}} 变量占位符的渲染HTML）。
• 使用清晰的标题分隔，例如 "--- 自动回复（发送给潜在客户）---" 和 "--- 通知（发送给您）---"。

⚠️ 关键：展示草稿以供审查后，技能等待用户反馈。仅在此之后才继续到阶段6（编写代码）。不进行演示，不"顺便"编写代码。

---

阶段5 — 用户审查和编辑

用户被展示2封草稿邮件。他们可以：

• 批准两者（"已批准，继续"）
• 要求修改特定邮件或部分（"主题行太长，缩短，将加粗改为斜体"）
• 完全重写（"让我给你新的副本" → 粘贴，技能更新模板）
• 添加变量（"添加'价格'字段" → 技能在适当位置添加 {{price}}）
• 询问解释或替代方案（"为什么选择这个模式？" → 技能引用规则并推荐模式，可能需要重新运行阶段3）

迭代限制：无严格限制，但用户确认（"已批准"）后，技能锁定内容并在阶段6中使用。如果用户想再次更改，则重新运行阶段4-5。

---

阶段6 — 编写代码

在用户批准草稿后开始。仅在此之后。

在Next.js（App Router）中的示例代码实现：

文件：app/api/submit/route.ts

import { NextRequest, NextResponse } from 'next/server';
import nodemailer from 'nodemailer';

const transporter = nodemailer.createTransport({
  host: process.env.SMTP_HOST,
  port: parseInt(process.env.SMTP_PORT || '587'),
  auth: {
    user: process.env.SMTP_USER,
    pass: process.env.SMTP_PASS,
  },
});

export async function POST(request: NextRequest) {
  const body = await request.json();
  const { name, phone, email } = body;

  // 发送邮件A — 给潜在客户
  await transporter.sendMail({
    from: `"${process.env.BRAND_NAME}" <${process.env.SMTP_FROM_EMAIL}>`,
    to: email,
    subject: `[Tên], tài liệu [X] đã sẵn sàng — mở file ngay 👇`,
    html: `<!-- 邮件A的HTML内容，由阶段4-5生成，替换 {{name}} 等 -->`,
  });

  // 发送邮件B — 给网站所有者
  await transporter.sendMail({
    from: `"${process.env.BRAND_NAME}" <${process.env.SMTP_FROM_EMAIL}>`,
    to: process.env.OWNER_NOTIFY_EMAIL,
    subject: `[🔔] 新潜在客户：${name} — [产品名称]`,
    html: `<!-- 邮件B的HTML内容，由阶段4-5生成，替换 {{name}} 等 -->`,
  });

  return NextResponse.json({ success: true });
}

环境变量模板：

# 邮件提供商SMTP凭据
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
[email protected]
SMTP_PASS=your-app-password

[email protected]

# 接收新潜在客户通知的所属者邮箱
[email protected]

# 品牌名称（用于邮件的From:名称）
BRAND_NAME=Thương hiệu của bạn

注意：BRAND_NAME 用于发件人显示名称。如果提供商支持，SMTP_FROM_EMAIL 可以是一个验证过的域名（例如 [email protected]）。

---

阶段7 — 提供商设置 + 测试计划

在每个选中提供商的最后，列出具体步骤。

示例：Gmail SMTP

1. 在您的Google账户中启用2FA（如果尚未启用）。
2. 转到 https://myaccount.google.com/apppasswords → 创建一个名为"Landing Page SMTP"的应用专用密码。
3. 将SMTP_HOST设置为smtp.gmail.com，SMTP_PORT设置为587，SMTP_USER设置为您的Gmail邮箱，SMTP_PASS设置为上面第2步生成的应用专用密码。
4. 重要：Gmail SMTP每天限制约500封。如果超过此限制，邮件将失败。

测试计划（验证邮件有效性的通用步骤）

1. 部署代码后，在您的落地页上填写表单，使用测试姓名、电话、邮箱（使用个人邮箱，不要使用该表单将使用的邮箱）。
2. 检查邮件A是否在60秒内到达测试邮箱。如果没有：检查服务器日志（Vercel Functions / Node.js 日志）中的错误。常见错误：SMTP凭据错误、Gmail应用专用密码过期、端口587被防火墙阻止。
3. 检查邮件B是否到达您的网站所有者通知邮箱。
4. 检查邮件A中的链接（CTA）是否有效。
5. 可选：使用 https://www.mail-tester.com 检查邮件A的垃圾邮件分数（在发送测试邮件时使用专用测试邮箱）。如果分数>5/10，通常认为不错。

---

附录：邮件公式参考

（完整的模板位于 references/email-formulas.md 文件中。以下是提取的核心规则。）

• 主题行：始终使用 {{name}}。前4个词中承诺利益。避免ALL CAPS。
• 问候语在越南文化中很重要："Chào anh/chị {{name}},"。不要使用"Gửi"或"Dear"。
• CTA链接/按钮：至少1个。使用动作导向的措辞。如果模式P3 → 链接是支付页面。如果模式P1 → 链接是直接下载或带访问密码的页面。
• 签名：姓名、品牌名称、1个Zalo或电话号码。在品牌的地域市场内建立信任。
• 页脚：包含邮寄地址（或品牌注册办公地址）+ 取消订阅。即使对于事务性邮件，取消订阅有助于避免Gmail收件箱中的垃圾邮件投诉。

---

由 skills/cursor/pro business-skills 于2026-05-14生成