使用 Claude Code 和 Cloudflare Pages 建立登陸頁面（LP）

這份劇本將帶您從「我需要一個頁面」的狀態，一路走到 LP 上線並開始接收潛在客戶。主機是 Cloudflare Pages：免費、快速、具備自動 HTTPS 和伺服器端功能（Pages Functions），無需自己的伺服器即可接收表單。

此技能專為非開發人員設計。您（Claude）將在終端機中完成工作，並用簡單的語言解釋每個步驟。當某個步驟需要使用者操作（登入、控制台、DNS）時，請一次提供一個命令，準備好讓他們複製貼上。

廣告追蹤（像素、Conversions API、GA4、Google Ads 標籤）不在此技能的範圍內。如果有人要求，請在 LP 上線後再另行設置。

如何與使用者合作

先規劃，再動筆。 展示 LP 的各個區塊，附上每個區塊的文字及其來源。只有在使用者說「好」之後才開始組裝。
文字只來自來源。 價格、日期、時數、講師姓名、保證、獎金：一切都來自使用者提供的材料（簡報、網站、PDF、對話）。切勿憑空捏造數字或承諾。如果缺少資料，請提問。
主動推薦，不要只列選項。 當有選擇時（路徑、版面、網域），說出您會怎麼做以及原因。
未經要求，不得上線。 可以進行預覽。但若要發佈到正式網址或變更 DNS，必須先獲得使用者「可以發佈」的確認。
Windows 使用者： 在 PowerShell 中，使用 npx.cmd 代替 npx，並且每個命令都以 cd 加上專案資料夾的絕對路徑開頭。

0. 確定路徑

詢問（或從需求中推斷）LP 需要什麼。每個路徑都會疊加到前一個：

路徑	交付成果	請參閱
1. 簡易 LP	頁面上線於 `<projeto>.pages.dev`，按鈕導向結帳、WhatsApp 或其他網站	本文件
2. 自訂網域	`lp.suamarca.com.br/<slug>/`	`references/dominio.md`
3. 含表單的潛在客戶擷取	可儲存潛在客戶（D1）並透過 Webhook 將其傳送至 CRM 的表單，以及感謝頁面	`references/formulario.md`

同時收集以下資訊：

文字來源： 簡報、網站、PDF、課程大綱、舊的 LP。
品牌識別： 顏色、字型、標誌（檔案）、照片（檔案，需有使用權）。
按鈕目標： 結帳、WhatsApp（https://wa.me/55DDDNUMERO?text=...）或表單。
Slug： 簡短、小寫、使用連字號（curso-x、masterclass-y）。這會成為 URL 路徑。

1. 準備開發環境（僅需一次）

請遵循 references/cloudflare-setup.md：安裝 Node、Cloudflare 帳戶、wrangler login（使用者需在瀏覽器中操作）以及建立 Pages 專案。在繼續之前，請使用 npx wrangler whoami 確認。

2. 建立專案

一個專案資料夾會存放該品牌所有的 LP，每個 LP 一個子資料夾。一次部署會同時發佈所有內容。

minhas-lps/
  _redirects        （封鎖與已退役的 LP）
  _headers          （安全性標頭）
  wrangler.toml     （專案名稱與資料庫）
  schema.sql        （潛在客戶資料表，路徑 3）
  CLAUDE.md         （專案記憶：決策、已上線內容）
  functions/
    lead.js         （接收表單，路徑 3）
  obrigado/
    index.html      （表單送出後頁面，路徑 3）
  <slug>/
    index.html      （LP 本身）
    img/            （最佳化後的照片和標誌）

首先將此技能中的 modelo/projeto/ 資料夾複製到使用者希望放置專案的位置，並將 minha-lp/ 重新命名為 slug。此範本已包含表單、預覽鎖定和封鎖規則。如果專案已存在，只需透過複製 modelo/projeto/minha-lp/ 來建立新的子資料夾。不含表單的 LP（路徑 1）：將表單區塊替換為帶有目標連結的按鈕，並刪除 functions/、obrigado/ 和 schema.sql。

黃金法則：部署會發佈整個資料夾。 該資料夾中的任何檔案都將在網際網路上可存取（.claude/、CLAUDE.md、試算表、筆記）。因此：

切勿將密碼、令牌或 Webhook URL 放在資料夾的檔案中（機密資訊應使用 wrangler pages secret put，請參閱 references/formulario.md）；
範本中的 _redirects 已經封鎖了 CLAUDE.md、.claude/*、wrangler.toml、schema.sql 和 package*.json。根目錄下的新檔案：要么確定可以公開，要么在部署前加入封鎖規則。

3. 編寫 LP

區塊規劃，附上每個區塊的文字。通常有助於轉換的順序：
1. 頂部：清晰的承諾、目標對象、日期和形式、按鈕。
2. 證明：教學者或使用者見證（真實照片、經歷、可驗證的數字）。
3. 使用者將獲得：3 到 6 個具體的好處。
4. 適合對象（以及不適合對象）。
5. 內容或課程大綱：摘要可見，詳細內容放在點擊後展開的 <details> 中。
6. 優惠方案：價格、條件、包含項目、保證（僅當存在時）。
7. 常見問題（放在 <details> 中）。
8. 最終按鈕和頁尾（品牌、聯絡方式、若收集資料需有隱私權政策）。
手機優先。 大部分流量來自手機。撰寫 CSS 時以 375px 為基準，再擴展到更大的螢幕。文字需易於掃讀：句子簡短、每個區塊有標題、避免文字牆。
按鈕始終可見：位於頂部，並在每個關鍵決策區塊後重複出現。
輕量圖片： JPG 或 WebP，每張約 200 KB 以下，<img> 需包含 width 和 height 屬性，非頂部圖片使用 loading="lazy"。頂部圖片使用 fetchpriority="high"。
後設資料： <title>、description、og:image（1200×630）和 favicon。這是在 WhatsApp 上分享連結時會顯示的內容。
無需依賴大型框架。 純 HTML、CSS 和 JavaScript 就足以勝任 LP。最多使用 Google Fonts 搭配 display=swap。

範本中的顏色和字型位於 <style> 頂部的變數中（:root）。在此處修改即可一次套用品牌識別。

4. 本地預覽

npx wrangler pages dev .

在 http://localhost:8788/<slug>/ 開啟，Functions 也會正常運作。在瀏覽器中以 375px 和 1280px 的寬度檢查：文字、圖片、按鈕、表單，以及無錯誤的控制台。如果應用程式有內建瀏覽器，請使用它並將螢幕截圖發送給使用者。

5. 線上預覽（供核准）

npx wrangler pages deploy . --project-name=<projeto> --branch=previa --commit-dirty=true

會產生一個 previa.<projeto>.pages.dev 的網址，與正式環境分開。將連結發送給使用者，請他們在手機上核准。範本會鎖定此網址上的表單（不會在 CRM 中產生假線索）。

6. 發佈

只有在獲得「可以發佈」的確認後：

npx wrangler pages deploy . --project-name=<projeto> --branch=main --commit-dirty=true

然後檢查：

LP 在正式網址上回應 200（curl -sI https://<endereço>/<slug>/）；
被封鎖的檔案回應 301（/CLAUDE.md、/wrangler.toml）；
如果有表單，一筆測試用的潛在客戶會到達目標（路徑 3）。

完整的檢查清單請參閱 references/checklist.md。

7. 記錄

更新專案的 CLAUDE.md，內容包括：新的 LP（slug、產品、日期）、按鈕目標、已註冊的 secrets（僅 NAME，切勿記錄值）以及部署 ID。這是下一次對話時要讀取的資訊，以避免破壞任何東西。如果專案使用 git，請僅提交 LP 的檔案。

後續變更

文字或價格： 編輯、預覽、發佈。在所有地方（頂部、優惠方案、常見問題、感謝頁面、後設資料）同步更新相同的資訊。
同一產品的兩個 LP（例如：按流量來源區分）：保持內容完全相同，並在每次部署時同時更新兩者。在 CLAUDE.md 中記錄兩者之間可能存在的差異。
退役一個 LP： 不要急著刪除資料夾。在 _redirects 中加入一行 301 重新導向到替代頁面（/slug-velho /slug-novo/ 301 和 /slug-velho/* /slug-novo/ 301）。舊的廣告、個人簡介連結和電子郵件仍然可以正常運作。
新的或更改的 Secret： 只有在新的部署之後才會生效。

已知陷阱

資料夾中遺忘的檔案會變成公開的。 曾經發生過包含存取金鑰的設定檔在網際網路上被公開的情況。wrangler pages deploy 不會遵守 .assetsignore：請使用 _redirects 中的封鎖規則。
Secret 已註冊但沒有任何變化： 在 secret put 之後缺少部署。
Secret 只包含值的一部分： 註冊的 Webhook 缺少 https:// 或只有金鑰，會導致 Invalid URL。請註冊完整的 URL。
帶有重音的名稱變成 %C3%A9： 在感謝頁面上解碼參數（decodeURIComponent）。範本已經處理了這個問題。
表單在線上預覽時「沒有任何反應」： 這是預覽鎖定在作用。請在 localhost 或正式環境中測試。

Cloudflare 落地頁