生成高转化率的落地页
交付真实的页面：可正常工作的 TSX 组件、真正的文案结构以及可衡量的性能。
匹配仓库现有的框架、样式和组件约定，仅使用已有的依赖：绝不安装任何新包（安全钩子会阻止安装）。如果从头开始且未选择技术栈，默认使用 Next.js + Tailwind；在其他情况下，如果页面确实需要缺失的依赖，请调用 mark_ticket_blocked 并指定该依赖名称。
目标（Core Web Vitals “良好”，现场 p75）：LCP ≤ 2.5 秒，INP ≤ 200 毫秒，CLS ≤ 0.1。 同时满足 WCAG 2.2 AA：文本对比度 ≥ 4.5:1，可见的焦点环，有标签的输入框，以及可键盘操作的页面。
文案框架（每页选择一个）
| 框架 | 结构 | 最佳适用场景 |
|---|---|---|
| PAS | 问题 → 激化 → 解决方案 | 对问题有认知的流量 |
| AIDA | 注意 → 兴趣 → 欲望 → 行动 | 冷流量、新品类 |
| BAB | 之前 → 之后 → 桥梁 | 成果/转变类产品 |
模板和五个异议的常见问题解答位于 references/copy-frameworks.md。copywriting 技能涵盖了标题和行动号召文案的撰写。
区块蓝图
- 英雄区：一个结果导向的标题（约 ≤ 10 个词），一个单句副标题说明方法，一个主要行动号召按钮，以及一个证明信号（如数量、Logo 或评分）。无轮播图。
- 问题区：维持现状的成本，使用客户自己的话表述。
- 解决方案/利益区：3–6 个利益点，每个附有一行解释和可选的视觉效果。
- 社交证明区：带有姓名、职位、公司和成果的客户评价；Logo。
- 定价区（如适用）：2–4 个层级，推荐的一个需高亮显示。
- FAQ 区：五个异议。使用原生
<details>/<summary>或无障碍的手风琴组件。FAQPage标记为可选，因为 Google 不再显示 FAQ 富结果。 - 底部 CTA 区：重复主要行动，尽量减少摩擦（例如仅需邮箱）。
步骤
-
收集输入。 产品名称、目标受众、主要痛点、期望成果、主要行动号召及其目标页面、可用的证明以及风格方向。先阅读任务单、
BRAND.md/令牌以及现有页面。如果在未给出明确指示时，不要停下来询问：使用已有内容，并在文案中用[TODO: …]标记缺失项。 绝对不要捏造客户评价、Logo、客户数量或评分。 -
根据流量来源和认知水平选择框架。 先写文案再布局。草拟五个标题，保留最清晰的一个。
-
将各区块构建为单独的组件，放在仓库的组件目录中。将文案放在 props 或内容对象中，不要散落在 JSX 里。尽量让页面在服务端渲染，仅在有交互需求的地方使用客户端组件。
-
SEO 元数据。 设置唯一的
<title>、meta 描述、规范链接、Open Graph 和 Twitter 标签，以及一个<h1>。在 Next.js App Router 中，使用metadata导出。 -
性能优化。
- 将英雄区/LCP 图片急切加载，使用
fetchpriority="high"。在 Next.js 16+ 中使用<Image preload>（或loading="eager"+fetchPriority="high"）；priority是 Next.js ≤ 15 的形式，在 16 中已弃用。切勿对其懒加载。 - 对折线以下的图片进行懒加载。
- 每张图片都需指定明确的
width/height，并使用 AVIF/WebP 格式。 - 字体使用
font-display: swap（或next/font），仅包含所需的字重。 - 折线以上不要加载第三方脚本。
- 将英雄区/LCP 图片急切加载，使用
-
表单（潜在客户捕获）。使用带有正确
type和autocomplete的带标签输入框，提供内联验证，以及一个保留用户输入的错误总结。显示成功状态，禁用重复提交，并提交到任务单中指定的真实端点。 -
验证。 运行并记录每项检查：
- 类型检查（
npx --no -- tsc --noEmit，失败时不下载）和仓库的 lint； - 仓库的构建脚本（如
npm run build）； - 一个渲染页面并断言 h1、主要行动号召链接以及表单成功和错误状态的组件测试；
- 作为实验室检查的 Lighthouse（移动端），记录 LCP、CLS、TBT 以及无障碍评分，仅当已经安装时（
npx --no -- lighthouse）； - 在 375 像素、768 像素和 1440 像素视口下检查溢出以及行动号召是否在折线以上，如果仓库有浏览器测试运行器则使用它。
切勿安装或下载任何工具来运行检查。如果你无法运行某项检查，请在证据中说明，而不是声称已执行。
- 类型检查（
完成条件
- 页面成功构建、通过类型检查并通过组件测试。
- 英雄区陈述了成果，主要行动号召在 375 像素和 1440 像素视口下位于折线以上（通过视口测试验证，或标记为未检查）。
- 如果 Lighthouse 或 axe 可用，实验室运行结果显示移动端 LCP ≤ 2.5 秒且 CLS ≤ 0.1，并且没有自动检测到的无障碍违规；否则证据中需说明这些指标未测量。
- 没有捏造的证明。每个缺失项都标记为
[TODO]并在报告中列出。
反模式
- 懒加载英雄区图片，或由于未设置尺寸的媒体或延迟加载的字体导致的布局偏移。
- 在付费活动页面上使用多个同等权重的行动号召按钮，或完整的站点导航。
- 构建中残留的 Lorem ipsum 或通用填充文案。唯一的允许占位符是显式的
[TODO: …]缺失项，且需在报告中列出。 - 英雄区中的轮播图和自动播放视频。