使用 Claude Code 和 Cloudflare Pages 创建着陆页

从“我需要一个页面”到着陆页上线并接收潜在客户的完整流程。托管使用 Cloudflare Pages：免费、快速、自动 HTTPS，以及服务器端函数（Pages Functions）用于处理表单，无需自有服务器。

此技能适用于非开发者。您（Claude）在终端中完成工作，并用简单语言解释每一步。当某个步骤需要人工操作（登录、控制面板、DNS）时，请一次只给出一个命令，准备好让他们复制粘贴。

广告追踪（像素、Conversions API、GA4、Google Ads 标签）不在此技能范围内。如果需要，请在着陆页上线后单独设置。

如何与用户协作

先规划再动笔。 展示着陆页的各个板块及其文本内容和来源。只有在用户“确认”后才开始搭建。
文本仅来自来源。 价格、日期、时长、讲师姓名、保证、奖励：所有信息必须来自用户提供的材料（简报、网站、PDF、聊天记录）。切勿凭空捏造数字或承诺。缺少数据时，请提问。
推荐而非罗列。 当有选择时（路径、布局、域名），说明您的推荐及其理由。
未经请求，不上线。 可以预览。但要在官方地址发布或修改 DNS，必须得到用户的“可以发布”的许可。
Windows 用户： 在 PowerShell 中，使用 npx.cmd 代替 npx，并且每个命令前都要用 cd 切换到项目的绝对路径。

0. 确定路径

询问（或从需求中推断）着陆页需要什么。每个路径建立在之前路径的基础上：

路径	交付内容	参考文档
1. 简单 LP	页面在 `<项目>.pages.dev` 上线，包含指向结账、WhatsApp 或其他网站的按钮	本文件
2. 自定义域名	`lp.yourbrand.com/<slug>/`	`references/domain.md`
3. 含表单的潜在客户页	可记录潜在客户（D1）并通过 webhook 发送至 CRM 的表单，以及感谢页	`references/form.md`

同时收集：

文本来源： 简报、网站、PDF、大纲、旧 LP。
品牌标识： 颜色、字体、Logo（文件）、照片（文件，需有使用权）。
按钮目标： 结账、WhatsApp（https://wa.me/55DDDNUMERO?text=...）或表单。
Slug： 简短、小写、带连字符（course-x, masterclass-y）。将用于 URL 路径。

1. 准备机器（只需一次）

参考 references/cloudflare-setup.md：安装 Node.js，注册 Cloudflare 账户，执行 wrangler login（用户在浏览器中完成），创建 Pages 项目。继续前，先使用 npx wrangler whoami 确认。

2. 搭建项目

一个项目文件夹存放该品牌的所有 LP，每个 LP 一个子文件夹。一次部署将发布所有内容。

my-lps/
  _redirects        (拦截和下架的 LP)
  _headers          (安全标头)
  wrangler.toml     (项目名称和数据库)
  schema.sql        (潜在客户表，路径 3)
  CLAUDE.md         (项目记忆：决策、已上线内容)
  functions/
    lead.js         (接收表单，路径 3)
  obrigado/
    index.html      (表单提交后页面，路径 3)
  <slug>/
    index.html      (LP 本身)
    img/            (优化后的照片和 Logo)

首先将此技能中的 model/project/ 文件夹复制到用户想要存放项目的位置，并将 my-lp/ 重命名为 slug。模板已包含表单、预览锁定和拦截规则。如果项目已存在，只需通过复制 model/project/my-lp/ 来创建新的子文件夹。无表单的 LP（路径 1）：将表单块替换为带有目标链接的按钮，并删除 functions/、obrigado/ 和 schema.sql。

黄金法则：部署会发布整个文件夹。 该文件夹中的任何文件都会在互联网上可访问（.claude/、CLAUDE.md、电子表格、笔记）。因此：

切勿将密码、令牌或 Webhook URL 放入文件夹内的文件中（机密应使用 wrangler pages secret put，请参阅 references/form.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 和 JS 足以构建 LP。最多使用 Google Font 并带 display=swap。

模板中的颜色和字体位于 <style> 顶部的 :root 变量中。修改此处即可一次性应用品牌标识。

4. 本地预览

npx wrangler pages dev .

在 http://localhost:8788/<slug>/ 打开，功能正常。在浏览器中检查 375px 和 1280px 分辨率下：文本、图片、按钮、表单，确保控制台无错误。如果应用内嵌浏览器，请使用它并向用户发送截图。

5. 在线预览（用于审批）

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

会生成一个 preview.<project>.pages.dev 的独立预览地址。将链接发到用户手机上供其审批。模板会锁定此地址上的表单（防止向 CRM 发送虚假潜在客户）。

6. 发布

仅在收到“可以发布”确认后：

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

之后检查：

LP 在官方地址返回 200 状态码 (curl -sI https://<地址>/<slug>/)；
被拦截的文件返回 301 (/CLAUDE.md、/wrangler.toml)；
如果有表单，发送一个测试潜在客户，确认其到达目标（路径 3）。

完整检查清单请参见 references/checklist.md。

7. 记录

更新项目中的 CLAUDE.md，记录：新 LP（slug、产品、日期）、按钮目标、已注册的机密（仅名称，绝不记录值）以及部署 ID。这是下次对话要读取的内容，以确保不会破坏任何东西。如果项目使用 git，只需提交 LP 相关的文件。

后续更改

文本或价格： 编辑、预览、发布。在所有地方（顶部、优惠、常见问题、感谢页面、元数据）同步更新相同信息。
**同一产品的两个 LP（**例如，按流量来源区分）：保持内容相同，并在同一次部署中更新两者。在 CLAUDE.md 中记录两者之间可能存在的差异。
下架 LP： 不要急于删除文件夹。在 _redirects 中添加一行 301 重定向到替代页面（/old-slug /new-slug/ 301 和 /old-slug/* /new-slug/ 301）。旧广告、Bio 链接和电子邮件将继续正常工作。
添加或更换机密： 只有在新部署后才会生效。

已知陷阱

文件夹中遗留的文件会变成公开文件。 曾发生过包含访问密钥的配置文件在互联网上公开的情况。wrangler pages deploy 不尊重 .assetsignore：请使用 _redirects 中的拦截规则。
已注册机密但无变化： 缺少在 secret put 之后的新部署。
机密值不完整： 注册的 webhook 缺少 https:// 或仅包含密钥会导致 Invalid URL。请注册完整的 URL。
带重音符号的名称显示为 %C3%A9： 在感谢页面解码参数（decodeURIComponent）。模板已包含此逻辑。
在线预览中表单“无反应”： 这是预览锁定机制在起作用。请改用 localhost 或生产环境进行测试。

Cloudflare 落地页