Landing Page 建置器 — CAE 模式是做什麼的？

總覽說明

此技能可協助您根據使用者提供的資訊，建立高品質的 Landing Page（採用 CAE Việt Nam 的 EEC 模式）。整個流程由 Antigility 執行，使用者只需回答問題即可。

最終產出：

index.html + styles.css — 完整的、響應式的 Landing Page，包含動畫效果
google-apps-script.js — 用於接收表單資料、寫入 Google Sheets 並發送通知郵件的後端程式
逐步部署至 Cloudflare Pages 的說明

EEC 頁面架構（標準藍圖）

1. NAV — 固定定位，滾動時模糊效果，包含 Logo、連結及 CTA 按鈕
2. HERO — 全螢幕，紅色漸層，粒子效果，主標題 + 副標題 + 2 個按鈕
3. STATS BAR — 4 個顯著數據，具有動畫計數效果
4. WHY US — 6 個特色卡片，附帶懸停效果（3 欄）
5. INSTRUCTOR（可選） — 嵌入 YouTube Short 及認證資訊
6. COURSES — 3 門課程，中間卡片突出顯示，價格區塊
7. TIMELINE — N 週的網格狀學習路徑
8. TESTIMONIALS — 3 張評論卡片，附帶星級評分
9. FAQ — 可展開/收合的問答手風琴
10. CTA + FORM — 漸層區塊，註冊表單 → Google Sheets + 電子郵件
11. FOOTER — 3 欄：品牌、課程、聯絡資訊

流程（必須按順序執行）

第 0 階段：掃描與情境（務必最先執行）

在詢問任何問題之前，請先檢查環境並尋找舊有情境：

檢查 Mem0 是否可用：
- 嘗試呼叫 search_memory，查詢詞為："landing page preference màu font domain"
- 如果工具不存在 / 回報錯誤 → 完全忽略，立即進入第 1 階段，不要向使用者報告錯誤
- 如果工具存在且有找到資料 → 回報："我記得您上次使用 [顏色 X / 字型 Y / 網域 Z]。這次要沿用還是更改？"
- 如果工具存在但未找到資料 → 正常進行第 1 階段
儲存新的情境（如果 Mem0 可用） — 在使用者確認完 7 組資訊後，呼叫 add_memory：
```
Landing page [ Campaign 名稱]: 顏色=[hex], 字型=Be Vietnam Pro, 網域=[domain], 電子郵件=[email], 試算表=[sheet link]
```
- 如果 Mem0 不可用 → 跳過此步驟，不影響結果

設計原則： Mem0 是額外功能（漸進式增強），並非強制依賴項。此技能在沒有 Mem0 的機器上也應能完全正常運作。

第 1 階段：收集資訊（逐一詢問各組，等待回覆）

⚠️ 重要： 一次只詢問一組。不要一次問完所有問題。等到使用者回覆完一組後，再詢問下一組。

組別 A — 品牌與顏色

詢問：

為了建立 Landing Page，我需要先了解一些基本資訊。

**第 1 組：品牌**
1. 您的品牌/中心名稱是什麼？（例如：CAE Việt Nam、ABC 中心...）
2. 您的 Logo PNG 網址（或輸入"沒有"以便改用文字代替）
3. 想要使用的主色調？
   - 🔴 CAE 紅色（類似 EEC 頁面） — #8F1A1A + 金色 #FEC46F
   - 🔵 專業海軍藍 — #1A3A5C + 青色 #00C9FF
   - 🟢 清新綠色 — #0D6E3F + 金色 #FFD700
   - ✏️ 我想輸入其他顏色（請提供十六進位色碼）
4. 預期的網域名稱？（例如：uudai.yourdomain.com 或"還没有想到"）

組別 B — 英雄區內容

在收到組別 A 的回覆後，詢問：

**第 2 組：頁面頂端區塊（Hero Section）**
1. 您想要顯示的主要標題？（例如："100% 學術中文獎學金"）
2. 標題上方的小標語？（例如："測試計畫 — 名額有限"）
3. 標題下方的簡短描述（1-2 句）？
4. 主要 CTA 按鈕的文字？（例如："📝 立即註冊"、"🎓 領取獎學金"）
5. 是否有 4 個想要顯示的統計數字？（例如：3 個班級、100% 免費、8 週、每班 15 人）

組別 C — 優勢與課程

在收到組別 B 的回覆後，詢問：

**第 3 組：優勢與產品**
1. 列出您的 3-6 個優勢（每個優勢包含：表情符號圖示、簡短標題、1-2 句描述）
   例如：🎓 版權課程 | 從國際夥伴購買版權...
   
2. 列出 1-3 門課程/服務套裝（每個套裝包含）：
   - 課程名稱
   - 小徽章（例如："線上 · 8 週"、"線下 · 河內"）
   - 3-4 個主要特色
   - 原價（供劃線刪除用）
   - 優惠價 / "100% 免費" / 折扣百分比
   - 備註（例如："僅 15 個名額"）
   - 哪個課程「最為突出」？

組別 D — 路徑與講師

在收到組別 C 的回覆後，詢問：

**第 4 組：補充內容**
1. 是否有每週的學習路徑？（如果有，請列出各週的主題名稱）
2. 是否有想要介紹的講師/專家？
   - 姓名、職稱
   - YouTube 影片連結（選填）
   - 3 項突出認證/成就
3. 是否有來自客戶的 3 則見證？
   （姓名縮寫、全名、角色、引用內容）

組別 E — 常見問題與聯絡資訊

在收到組別 D 的回覆後，詢問：

**第 5 組：常見問題與聯絡資訊**
1. 列出 5-7 個常見問題及其答案？
2. 聯絡資訊：
   - 辦公室地址
   - 客服專線/Zalo
   - 電子郵件
   - Facebook 粉絲專頁 URL
3. 頁尾版權資訊："© 2025 [組織名稱]"

組別 F — 表單與後端

在收到組別 E 的回覆後，詢問：

**第 6 組：註冊表單與資料串接**
1. 表單需要收集哪些欄位？
   - [x] 姓名（必填）
   - [x] 電話號碼（必填）
   - [ ] 電子郵件
   - [ ] 地址 / 城市
   - [ ] 課程選擇核取方塊
   - [ ] 備註文字區塊
   - [ ] 其他欄位？

2. 當有人註冊時，哪個電子郵件地址會收到通知？
   （例如：[email protected]）

3. 您想要使用的通知郵件主旨？
   （例如："🔔 您的 Landing Page 有新的註冊！"）

4. 麻煩請提供您想要儲存註冊資料的 Google 試算表連結。
   （我會根據上述表單欄位建立腳本，並引導您在該試算表上執行）

⚠️ 使用者提供試算表連結後 → 立即停止並執行第 2 階段。

組別 G — Cloudflare 部署

在收到組別 F 的回覆後，詢問：

**第 7 組：部署資訊（最後一步）**
1. 您的 Cloudflare Account ID？
   （進入 dash.cloudflare.com → 選擇帳戶 → 查看 URL：cloudflare.com/ACCOUNT_ID）
2. 您的 Cloudflare API 金鑰？
   （進入 My Profile → API Tokens → Create Token → 使用 "Edit Cloudflare Pages" 範本）
3. Cloudflare Pages 專案名稱？（小寫、連字號，例如：my-landing-2025）
4. 要綁定的自訂網域？（例如：uudai.yourdomain.com 或"不需要"）

第 1.5 階段 — 10 星願景 ⭐（在開始生成之前務必執行）

"不要為數百萬人設計。要設計讓一個人感受到前所未有的驚豔體驗。" — Garry Tan

在撰寫任何程式碼之前，先停下來回答這 4 個問題：

標題是否「精準命中」？
- 在 3 秒內閱讀標題：客戶能立刻知道這是為他們準備的嗎？
- 如果不夠強有力 → 應用本技能中的「文案公式」來改寫
這個頁面是否有一個「令人難忘」的元素？
- 一個令人印象深刻的數字？一個大膽的承諾？一個意想不到的好處？
- 例如：「100% 免費學習 — 僅 15 個名額」→ 清晰、稀缺、立即行動
這個 Landing Page 可能犯下的致命錯誤是什麼？
- 表單欄位太多？英雄區缺少社會證明？CTA 按鈕不夠突出？
- 找出問題並立即在設計中修正
如果 Steve Jobs 審閱此頁面，他會刪掉什麼？
- 移除所有與單一目標註冊無關的元素

輸出： 在繼續之前將「願景筆記」加入回應：

🎯 10 星願景：
- 獨特優勢：[..]
- 最終標題：[..]
- 1 個令人難忘的元素：[..]
- 已刪除：[..]

創辦人挑戰規則（適用於願景關卡）

「扮演 CEO — 任務是挑戰平庸，而非認可它。」

如果使用者提供了弱標題（過於通用、未明確指出目標對象、缺乏具體利益），不得立即接受。請改為提出：

⚡ 創辦人模式：
標題「[使用者的標題]」過於通用。我提議 3 個更強而有力的替代方案：

[A] [具體利益] — [數字/時間] — [明確對象]
    例如：「100% 免費學習學術中文 — 僅 15 個名額」

[B] [提問鉤子] + [驚喜結果]
    例如：「您的孩子學習中文 8 週 — 會比國際學生更有自信？」

[C] [大膽承諾] + [證據]
    例如：「4 堂課內無進步 — 全額退款，無需理由」

您選擇哪個方向，或希望我根據其他想法改寫？

何時提出挑戰： 當標題至少缺少以下 3 個要素中的 2 個時：(1) 明確對象、(2) 具體利益、(3) 數字/承諾。

第 2 階段：建立 Google Apps Script（後端）

觸發條件： 使用者已提供 Google 試算表連結（組別 F.4）。

步驟 1 — 生成自訂腳本：

根據位於 templates/google-apps-script.js 的範本，建立一個根據 Landing Page 表單自訂的腳本：

填入 NOTIFICATION_EMAIL = 來自組別 F.2 的電子郵件
填入 EMAIL_SUBJECT = 來自組別 F.3 的主旨
填入 CAMPAIGN_NAME = 來自組別 A.1 的 Campaign 名稱
更新 writeToSheet() 函式，使其欄位數量與組別 F.1 的表單欄位相符
更新 doPost() 函式，使其能根據所選欄位正確解析 e.parameter

步驟 2 — 輸出供使用者複製的程式碼區塊：

生成完成後，在單一區塊中顯示完整程式碼，格式如下：

✅ 我已經為您的 Google 試算表建立了腳本！

以下是您需要複製並貼到試算表中的程式碼：
[程式碼區塊]

📋 在您的 Google 試算表上執行的說明（5 步驟）：

① 開啟您剛才提供連結的 Google 試算表 → 進入選單 Extensions → Apps Script
   （或點擊該試算表連結，然後在上方選單中找到 Extensions）

② 刪除編輯區中的所有預設程式碼（Ctrl+A → Delete）

③ 將上述我建立的完整程式碼貼入（Ctrl+V）

④ 按 Ctrl+S 儲存 → 將專案命名為 "Landing Page Handler" → 確定

⑤ 部署腳本：
   • 點擊 "Deploy" 按鈕（右上角）→ "New deployment"
   • 「類型」：選擇 "Web app"
   • 「執行身份」：選擇 "Me (您的電子郵件)"
   • 「誰擁有存取權」：選擇 "Anyone"
   • 點擊 "Deploy" → Google 會要求權限 → 點擊 "Authorize access" → 選擇 Google 帳戶
   • 複製出現的長 URL（格式：https://script.google.com/macros/s/.../exec）

📌 取得該 URL 後，請貼到此處，以便我將其嵌入 Landing Page。

步驟 3 — 等待使用者確認 SHEETS_ENDPOINT URL，然後再繼續第 3 階段。

第 3 階段：生成 Landing Page HTML

根據已收集的所有資訊，建立完整的 index.html 檔案：

需要建立的檔案結構：

單一 index.html 檔案（CSS 內嵌於 <style> 標籤中，不另建獨立檔案）
JavaScript 表單提交邏輯內嵌於 <script> 標籤中
不依賴任何框架，僅使用原生 HTML/CSS/JS
完全響應式（行動優先）
使用 Be Vietnam Pro（從 Google Fonts CDN 載入）— 完整支援越南語音符號，可替代 Inter/Montserrat

根據 EEC 模式設計：

配色方案來自組別 A.3
包含藍圖中的所有區塊
如果使用者未提供講師資訊 → 跳過該區塊
如果沒有見證 → 跳過該區塊
如果沒有時間軸 → 跳過該區塊

表單提交模式（必須使用隱藏 iframe — 避免 CORS 問題）：

const SHEETS_ENDPOINT = 'USER_GAS_URL'; // 填入來自步驟 2 的 URL

const hiddenFrame = document.createElement('iframe');
hiddenFrame.name = 'hidden_iframe';
hiddenFrame.style.display = 'none';
document.body.appendChild(hiddenFrame);

// 提交時：建立隱藏表單，透過 POST 將資料發送到 GAS 端點，目標指向隱藏 iframe
// 不使用 fetch() — 原生表單 POST 不會被 CORS 阻擋

localStorage 備份：

// 在提交前務必備份到 localStorage
const regs = JSON.parse(localStorage.getItem('lp_registrations') || '[]');
regs.push(data);
localStorage.setItem('lp_registrations', JSON.stringify(regs));

樂觀 UI + GAS 容錯機制（強制執行）：

// 1. 立即顯示成功訊息 — 不等待 GAS 回應
function submitForm(data) {
  // 先備份到 localStorage
  backupToLocal(data);

  // 立即顯示成功訊息（樂觀）
  showSuccessMessage();

  // 背景提交 GAS — 不阻塞 UI
  submitToGAS(data).catch(() => {
    // GAS 失敗但 localStorage 已有資料 → 靜默重試
    scheduleRetry(data);
  });
}

// 2. 如果 GAS 失敗則自動重試
function scheduleRetry(data, attempt = 1) {
  if (attempt > 3) return; // 失敗 3 次後放棄
  setTimeout(() => {
    submitToGAS(data).catch(() => scheduleRetry(data, attempt + 1));
  }, attempt * 3000); // 3 秒, 6 秒, 9 秒
}

// 3. GAS 超時設定為 10 秒（不讓使用者無限期等待）
async function submitToGAS(data) {
  const controller = new AbortController();
  const timeout = setTimeout(() => controller.abort(), 10000);
  try {
    // 使用 fetch 的 no-cors 模式（GAS 不回傳回應內容）
    await fetch(SHEETS_ENDPOINT, {
      method: 'POST', mode: 'no-cors',
      body: new URLSearchParams(data),
      signal: controller.signal
    });
  } finally {
    clearTimeout(timeout);
  }
}

注意： 使用 no-cors 模式的 fetch 搭配 URLSearchParams 是隱藏 iframe 的替代方案，不會被 CORS 阻擋。請根據情境擇一使用。

第 3.5 階段 — 瀏覽器驗證（部署前）

觸發條件： index.html 檔案已建立完成。

使用瀏覽器工具進行驗證，然後再告知使用者查看：

在瀏覽器中開啟檔案（或使用本地伺服器）
響應式檢查：
- 行動裝置 375px：選單未破版，表單適配螢幕，文字未被截斷
- 桌上型電腦 1440px：未過寬，佈局平衡
使用者體驗檢查：
- CTA 按鈕在折疊線上方可見，無需滾動
- 表單提交：輸入測試資料 → 檢查主控台無錯誤
- FAQ 手風琴展開/收合功能正常
- 平滑滾動，無卡頓
視覺檢查：
- 顏色符合所選色板
- 字型正確載入（Be Vietnam Pro）
- 無任何殘留的佔位文字
截圖與報告： 截取桌上型電腦和行動裝置的螢幕截圖，發送給使用者預覽

⚠️ 必須通過此檢查清單中的所有項目，才能執行第 3.6 階段的優化與第 4 階段的部署。

第 3.6 階段 — 優化調整

在使用者確認內容無誤後，執行一輪打磨：

微動畫： 為每個區塊在滾入視口時添加 fade-in 效果（IntersectionObserver）
懸停效果： 按鈕懸停時輕微縮放（transform: scale(1.03)）
CTA 脈動： 主要註冊按鈕具有微弱的脈衝動畫以吸引目光
計數器動畫： 統計數字（3 個班級、500+ 學生）在進入視口時從 0 數到目標值
表單回饋： 提交時顯示載入狀態，發送後顯示成功訊息
導航列模糊： 向下滾動時，導航列加入 backdrop-filter: blur() 效果，並產生陰影

第 4 階段：部署至 Cloudflare Pages

使用 Cloudflare API 直接建立部署（無需透過 Git）：

步驟 1 — 準備檔案（根據需要進行最佳化）：

# 建立新的目錄並放入 index.html
mkdir -p cf-pages-deploy && cd cf-pages-deploy
cp ../index.html ./

# 使用 HTMLMinifier 或類似工具進行最佳化（可選）
# npm install -g html-minifier
# html-minifier --collapse-whitespace --remove-comments --remove-optional-tags \
#   --remove-redundant-attributes --remove-script-type-attributes \
#   --remove-style-link-type-attributes --use-short-doctype -o index.html index.html

步驟 2 — 使用 cURL 建立部署（一次性，無需 Wrangler）：

# 建立部署（使用 Cloudflare Pages API）
curl -X POST "https://api.cloudflare.com/client/v4/accounts/YOUR_ACCOUNT_ID/pages/projects/YOUR_PROJECT_NAME/deployments" \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: multipart/form-data" \
  -F "index.html=@./index.html"

步驟 3 — 將部署標記為生產環境：

# 取得部署 ID
DEPLOY_ID=$(curl -s \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  "https://api.cloudflare.com/client/v4/accounts/YOUR_ACCOUNT_ID/pages/projects/YOUR_PROJECT_NAME/deployments" | \
  python3 -c "import sys,json; d=json.load(sys.stdin); print([x['id'] for x in d['result'] if x['latest_stage']['name']=='deploy'][0])")

# 設定為生產環境
curl -X PATCH "https://api.cloudflare.com/client/v4/accounts/YOUR_ACCOUNT_ID/pages/projects/YOUR_PROJECT_NAME/deployments/$DEPLOY_ID" \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  --data '{"env_vars":{"ENVIRONMENT":{"value":"production"},"CAMPAIGN_NAME":{"value":"CAMPAIGN_NAME_HERE"}}}'

步驟 4 — 如果使用者有自訂網域（可選）：

# 將自訂網域新增至專案
curl -X POST "https://api.cloudflare.com/client/v4/accounts/YOUR_ACCOUNT_ID/pages/projects/YOUR_PROJECT_NAME/domains" \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  --data '{"name":"uudai.yourdomain.com"}'

成功標準

在標記為完成之前，必須滿足以下所有條件：

使用者滿意所有內容
Index.html 已生成並通過瀏覽器驗證
Google Apps Script 已建立且使用者已成功部署 Web App
Landing Page 已部署至 Cloudflare Pages
表單運作正常：送出測試資料後，Google Sheets 中出現新行（使用者應檢查）
Mem0（如果可用）已儲存設定以供未來使用

附錄：EEC 複製公式

吸引（Attract）— 英雄區標題公式：

[具體利益] + [數字/時間] + [明確對象]

範例：

❌ 「學習中文」
✅ 「8 週精通學術中文 — 為留學生設計」
✅ 「100% 免費學習 — 僅 15 個名額，立即註冊」

參與（Engage）— 優勢區塊結構：

以「我了解您的痛點」開頭
每個優勢 = 1 個具體結果，而非 1 項功能
在可能的情況下包含社會證明

轉換（Convert）— CTA 最佳實踐：

使用第一人稱（「是的，我要註冊！」勝過「註冊」）
低承諾語言（「了解詳情」勝過「立即購買」）
緊急性與稀缺性（「僅剩 5 個名額」、「優惠將於 24 小時後結束」）

疑難排解

問題	解決方案
GAS Web App 部署失敗	檢查帳戶權限並確保已啟用 Apps Script API。按照步驟 2 重新部署。
Cloudflare Pages 部署失敗	驗證 Account ID 和 API 金鑰是否正確。確保專案名稱尚未被使用。
表單提交但 Sheets 中無資料	檢查 GAS Web App URL 是否正確。在瀏覽器開發者工具的網路分頁中驗證 POST 請求是否成功。
字型載入失敗	確認 `index.html` 中的 Google Fonts CSS `@import` 或 `<link>` 語法正確。檢查是否有網路限制。
Mem0 不可用	這屬於預期行為。技能應在沒有 Mem0 的情況下正常運作。跳過所有 Mem0 相關步驟。

Landing Page 建置器 — CAE 模式