Biz SMTP 表單自動回覆器 — 潛在客戶填寫表單後自動發送郵件
此技能將登陸頁面上的註冊表單（採用越南流量標準的姓名/手機/Email 格式）轉變為用戶提交後立即發送的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 還是表單動作）。
| 偵測到的檔案 | 框架 | 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 Function) | 客戶端元件 fetch('/api/submit') |
package.json 無框架，有 index.html | 靜態 HTML | api/submit.js (Vercel Function) | 內嵌 <script> 搭配 fetch('/api/submit') |
| 無本地專案，僅有 URL | 已部署的現有頁面 | 需要用戶先 clone 儲存庫或指定儲存庫路徑 | — |
進一步讀取以確定表單欄位：
- 在程式碼中尋找
<form>→ 列出所有已存在的<input name="..."> - 預設預期（根據專案記憶）：
name、phone、email。某些頁面會額外包含：company、message、budget、utm_source。 - 如果表單尚不存在 → 技能將在階段 6 建立一個包含最少 3 個欄位（姓名/手機/Email）的新表單。
重要：如果用戶沒有本地專案（只有已部署的 URL），請暫停並詢問：「您有可讓我整合程式碼的本地儲存庫嗎？我需要編輯原始檔案。如果您只有 URL，請 clone 儲存庫並告訴我路徑。」 無法僅透過 URL 進行整合。
階段 1 — 選擇 SMTP 供應商
詢問用戶從 7 個供應商中選擇一個。每個供應商有不同的 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 金鑰。需要驗證網域才能從自訂 @brand.vn 發送 |
| 3 | SendGrid SMTP | 永久免費每天 100 封 | 已熟悉 SendGrid 的技術棧，需要 Webhook | smtp.sendgrid.net | 587 | 使用者 = apikey 字面值，密碼 = API 金鑰 |
| 4 | Mailgun SMTP | 免費 3 個月每天 100 封 | EU/US 地區，開發者友善 | smtp.mailgun.org (美國) 或 smtp.eu.mailgun.org (歐盟) | 587 | 使用者/密碼來自 Mailgun 網域設定 |
| 5 | Brevo (Sendinblue) SMTP | 永久免費每天 300 封 | 越南流行，免費方案最寬裕，有越南客服支援 | smtp-relay.brevo.com | 587 | 使用者 = 登入 Email，密碼 = SMTP 金鑰（不同於 API 金鑰） |
| 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。
向用戶提問的格式：
您想使用哪個 SMTP 供應商來自動發送郵件？
1. Gmail / Google Workspace（免費每天 500 封，如果您已有 Gmail 最簡單）
2. Resend SMTP（免費每月 3000 封，高送達率，需要驗證網域）
3. SendGrid SMTP（永久免費每天 100 封，已熟悉 API）
4. Mailgun SMTP（免費 3 個月每天 100 封）
5. Brevo / Sendinblue SMTP（免費每天 300 封，越南流行）
6. Zoho Mail SMTP（如果您已使用 Zoho Workspace）
7. 自訂 SMTP（您現有的越南主機商 / 自行託管）
如果您還沒有任何帳戶，我建議使用 [如果流量低則選 Gmail / 如果需要高送達率則選 Brevo]。請選擇一個號碼？
用戶選擇後 → 保存起來，以便在階段 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）—— 新流程跳過這 2 個檔案。只需要offer.json+ 讀取 page.tsx 就足以獲得脈絡。
讀取上述 3 個來源。為郵件提取：
- 客戶群 + 理想成果 → 個性化主旨行（「[姓名]，AI Agent 8 週學習路徑已準備就緒」而非「歡迎」）
- 機制名稱 → 在郵件內文中強化（「您即將學習的 PROMPT 框架系統...」）
- 獎勵堆疊 → 在郵件中列出（如果提案是免費/低價，則立即提供獎勵）
- 保證文案 → 在郵件中直接引用以減輕焦慮
- CTA 用語 → 在郵件的最終 CTA 中對應使用
模式 B — 有登陸頁但無 JSON 檔案
用戶有已部署的 HTML，但未執行 biz-offer/biz-sales-page。技能讀取 HTML：
curl -s <URL>或讀取本機檔案index.html- 解析英雄區塊的 h1、副標題、CTA 按鈕文案、定價區塊、保證區塊
- 從中推斷提案類型和客戶群
模式 B 在 80% 的情況下足夠好，但郵件的個性化程度不如模式 A。建議用戶：「您可以執行 /biz-offer-alex-hormozi 來取得 offer.json，然後再回來，郵件品質會更好。或者繼續使用模式 B。」
模式 C — 無任何資訊
用戶只有表單 HTML，沒有脈絡。技能必須快速詢問 5 個問題：
- 您銷售的產品/服務是什麼？（一句話）
- 用戶填寫表單後，您想發送什麼給他們？（可下載的 PDF / 預約連結 / 付款連結 / 僅確認並稍後致電）
- 品牌名稱 + 寄件者名稱（將顯示在「寄件者：」中）
- 您希望收到新潛在客戶通知的 Email
- 您擁有的網域（用於驗證 SPF/DKIM — 如果是 Gmail 則跳過）
階段 3 — 選擇郵件模式
雙觸發模型（適用於有結帳流程的提案）：對於具有線上付款的低價課程/數位產品，有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/電子書/範本/文案/檢查表（免費） | 「[姓名]，[X] 資料已準備就緒 — 立即開啟檔案 👇」 |
| P2 — 預約確認 | 表單提交 | 提案 = 預約通話/諮詢/示範/免費策略會議 | 「[姓名]，已收到諮詢預約 — 下一步在裡面」 |
| P3 — 付款前提醒 | 表單提交（尚未付款） | 提案 = 低價產品（199K-3M VND），郵件引導至結帳頁面 | 「[姓名]，[X 課程] 付款連結 — 優惠價保留 24 小時 ⏰」 |
| P4 — 培育（即將進行銷售通話） | 表單提交 | 提案 = 高價教練/代理商服務（5M-50M+ VND），銷售團隊將在 24 小時內致電 | 「[姓名]，我（[致電者姓名]）將在 24 小時內與您聯繫 — 內含準備檢查表」 |
| P5 — 購買後引導 | 付款 Webhook | 潛在客戶剛完成付款 — 提供完整價值 + 1 個個性化問題 | 「🎉 歡迎 [姓名] 加入 [X 課程] — 立即解鎖」 |
選擇模式的規則：
- 提案 = 免費下載/培訓 → 僅 P1（1 個觸發，1 封郵件）。
- 提案 = 免費預約通話 → 僅 P2（1 個觸發，1 封郵件）。
- 提案 = 具有線上付款的低價產品（Stripe/Momo/ZaloPay/Sepay） → P3 + P5（2 個觸發，2 封郵件）。
- 提案 = 高價銷售通話 → 僅 P4，後續由銷售團隊處理（成交後的引導是另一個流程）。
技能建議合適的模式 + 原因，並詢問用戶確認。例如：「根據 offer.json，我看到這是一個 1.99M VND 的課程，並有付款整合。我建議設定 2 封郵件：P3（填寫表單時提醒付款）+ P5（付款後引導 + 1 個個性化問題）。您同意，還是只想要先發送一封 P3 郵件？」
階段 4 — 草擬 2 封郵件
生成2 封純越南語（使用「anh/chị」稱呼）、手機版響應式的 HTML 郵件。
郵件 A — 發送給潛在客戶的自動回覆器
6 個區塊的結構（具體用語請參閱每個模式的 references/email-formulas.md）：
- 主旨行 — 使用
{{name}}進行個性化，少於 50 個字元，如果在品牌語氣允許的情況下，結尾可加 1 個表情符號（✉️ 👇 ✓），避免觸發垃圾郵件的詞語（大寫的「FREE」、「$$$」、「guarantee」）。 - 預覽文字 — 在收件匣中顯示於主旨下方的 1 句話，說明開啟郵件的價值。
- 問候語 — 「Chào anh/chị {{name}},」 — 不要用「Dear」，不要用「Xin chào quý khách」。
- 主要內文 — 根據所選模式。規則：
- 簡短（少於 200 字）。
- 有 1 個明確的主要 CTA 連結/按鈕。
- 具體提及從脈絡中得來的提案名稱/機制（而不是「我們的產品」）。
- 如果是模式 P3/P4 → 包含 1 個緊急提醒 + 1 個安心保證（保證）。
- 簽名檔 — 寄件者姓名 + 品牌名稱 + 1 個聯絡連結（Zalo/電話/網站）。
- 頁尾 — 地址（反垃圾郵件法規要求）+ 取消訂閱連結（儘管是交易型郵件，但為了合規仍建議加上）。
郵件 B — 發送給擁有者的通知
…（此處內容較長，已截斷）