着陆

Landing — 优质 HTML 落地页生成器

> 与 product-team/skills/landing-page-generator/ 的区别： 该技能输出的是针对转化/潜在客户挖掘而优化的 Next.js TSX 组件。而本技能输出的是单个独立的 .html 文件，通过 GSAP 动画优化视觉体验。请根据使用场景选择。

根据文本提示或简报生成一个精美且独立的 .html 落地页。输出结果为单个 HTML 文件：所有 CSS 均在 <style> 中内联，所有 JS 均在 <script> 中内联，仅通过 CDN 引入 Google Fonts 和 GSAP 等外部依赖。页面具有独特的视觉风格、动画效果且达到生产级质量。

触发词

• "create a landing page" (创建落地页)

• "build a landing page" (构建落地页)

• "make a landing page for X" (为 X 制作落地页)

• "I need a web page for Y" (我需要一个 Y 的网页)

• "promotional page" (推广页)

• "product page" (产品页)

• "one-pager" (单页)

• "web presence" (网页展示)

• "sales page" (销售页)

• "landing for X" (X 的落地页)

交付模式

在 Claude Code CLI 中，将文件写入磁盘指定路径。在 Claude.ai 网页版 中，创建包含相同内容的 HTML artifact。

阶段 0：深度需求采集（4 个强制性问题，逐一询问）

按依赖顺序进行。每个问题都附带明确的“询问原因”。停止条件：最多 4 个问题。

Q1 (根问题) — 产品 / 服务

> 产品或服务是什么？请提供名称 + 1-2 句电梯演讲（Elevator Pitch）——它做什么，面向谁？
>
> *询问原因：* 标题、副标题和功能文案全部源自此处。“提高生产力的 App”会产生通用的模板文案；而“为讨厌 Zoom 的远程工程团队设计的异步站会工具”则能产生具有高转化率的落地页。

拒绝模糊描述。 如果用户仅提供名称而没有描述，请追问一次：“它具体做什么？面向谁？”如果追问后仍无描述，则在交付时明确标注“采用通用定位”。

Q2 (依赖于 Q1) — 受众定位

> 受众是谁？请选择一项：
>
> 1. 技术买家 (工程师, 运维, 安全专家)
> 2. 商业买家 (产品经理, 高管, 运营负责人)
> 3. 消费者 (大众, 爱好者)
> 4. 内部人员 (员工, 合作伙伴 —— 非公开销售)
>
> *询问原因：* 受众决定了文案的语调、专业术语的程度、社交证明的选择以及 CTA（行动号召）的措辞。技术买家关注细节；消费者关注益处；内部页面可以省略说服过程。

强制选择。

Q3 (必问) — 品牌覆盖

> 是否有需要覆盖默认设置（深海军蓝 + 青色 + Inte...）的品牌颜色或字体？
r)？请提供：主色 HEX，强调色 HEX，可选背景色 HEX。或者如果你想要精美的默认配置，请回答 "default"。**
>
> *询问原因：* 默认配置经过精心设计，但匹配你的品牌色会让页面与你现有的网站融为一体。即使只覆盖主色也能产生显著效果。

接受 "default" 或部分覆盖（例如仅提供主色）。如果仅提供主色，则通过算法推导强调色（调亮/调暗）。

Q4（取决于 Q1）— 语气

> 语气 — 请选择一项：
>
> 1. 专业 (Professional) — 自信、克制，适用于 B2B
> 2. 俏皮 (Playful) — 温暖、轻快，偶尔带点幽默
> 3. 权威 (Authoritative) — 专家风范，数据驱动，建立信任感
> 4. 极简 (Minimal) — 简洁、设计导向，低文字密度
>
> *询问原因：* 语气影响每一句话 —— 包括标题、微文案、按钮文字和结尾文案。预先选择可避免各章节之间出现语气割裂。

强制选择。推荐默认值： 若 Q2 = 技术/商业 $\rightarrow$ 专业；若 Q2 = 消费者 $\rightarrow$ 俏皮；若产品为设计导向 $\rightarrow$ 极简。

停止条件： Q4 完成后，提交并生成。生成过程中不再提出后续问题。

内容提取（含兜底策略）

从 Q1 的电梯演讲（elevator pitch）中推导：

• Hero 标题 — “产品功能”的精炼版本（8–12 个词）

• Hero 副标题 — “目标用户 + 价值主张”的版本（1–2 句话）

• 3–6 个功能要点 — 从演讲内容 + 受众 (Q2) + 语气 (Q4) 中提炼

• CTA 文本 — 导向行动，且符合语气

• 结尾文案 — 短小、感性，且符合语气

输入匮乏时的兜底方案： 根据产品名称的语义 + 受众语境虚构具有吸引力的内容。在 HTML 源码中使用注释标记推导内容 (<!-- inferred: ... -->)。不要因等待更多输入而停滞。

品牌系统规范

默认配色方案（深海军蓝 + 青色）

:root {
  --navy:       #0A1628;
  --navy-mid:   #0D1F38;
  --teal:       #00D4AA;
  --teal-glow:  rgba(0, 212, 170, 0.12);
  --amber:      #F5A623;
  --off-white:  #F7F7F2;
  --text-muted: rgba(247, 247, 242, 0.68);
  --card-bg:    rgba(0, 212, 170, 0.06);
  --card-border:rgba(0, 212, 170, 0.15);
}

覆盖模式

当 Q3 提供自定义品牌值时，将它们替换到 :root 块中：

品牌覆盖：
primary: #FF6B35    →  --navy / hero 背景
accent:  #2EC4B6    →  --teal / CTA / 高亮
bg:      #011627    →  --navy-mid / 章节背景
text:    #FDFFFC    →  --off-white

如果仅提供主色，则通过算法推导强调色（强调色调亮 15%；navy-mid 调暗 8%；glow 转换为 0.12 alpha 的 rgba）。使用 scripts/brand_palette_validator.py 进行确定性推导。

关于色彩理论 + WCAG + 算法调色规范，请参阅 references/brand_system_design.md。

排版

• 字体族： Inter (通过 Google Fonts)

• 字重量级： 400 (正文), 500 (眉标), 600 (链接), 700 (副标题), 800 (H1 + H2)

• 字号量级：

组件（必须指定 CSS）

• .btn-primary — 带有悬停状态（上移 + 亮度增加）的 CTA 按钮

• .feature-card — 带有悬停上移效果（translateY(-6px) + 边框增亮）的卡片

• .eyebrow — 带有字间距 (0.2em) 的大写类别标签

第一章节：Hero (首屏)

• min-height: 100vh，内容居中对齐

• H1 上方可选的眉标标签

• H1 (68

• 副标题 (17–19px, 1–2 句话)

• CTA 按钮 (.btn-primary)

• 向下滚动指示器 (动画 V 型图标, CSS bounce 效果)

• 深度图层 (鼠标视差):

第二部分：特性 (Features)

• 默认 3 列 (repeat(3, 1fr) 网格)

• 响应式：

• 每个卡片：

• 悬停状态：

第三部分：结尾 CTA

• 全宽，background: var(--navy-mid)

• padding: 120px 24px，文本居中

• 大型结尾标题 (52–62px, 800 字重)

• 短副文本 (--text-muted, 1–2 句话)

• CTA 按钮，背后带有环境径向渐变光晕：

background: radial-gradient(circle, var(--teal-glow) 0%, transparent 70%);

动画模式

参考 references/gsap_animation_patterns.md 标准。共需要五种模式：

1. Hero 入场动画 (GSAP 时间轴)

// 必须先使用 gsap.set() 以防止 FOUC（闪烁）
gsap.set([".eyebrow", ".hero h1", ".hero .subtitle", ".btn-primary", ".scroll-down"], {
  opacity: 0,
  y: 30
});
const tl = gsap.timeline({ defaults: { ease: "power3.out" } });
tl.to(".eyebrow", { opacity: 1, y: 0, duration: 0.6 })
  .to(".hero h1", { opacity: 1, y: 0, duration: 0.8 }, "-=0.3")
  .to(".hero .subtitle", { opacity: 1, y: 0, duration: 0.6 }, "-=0.5")
  .to(".btn-primary", { opacity: 1, y: 0, duration: 0.5 }, "-=0.3")
  .to(".scroll-down", { opacity: 1, y: 0, duration: 0.4 }, "-=0.2");

2. 鼠标视差

const hero = document.querySelector(".hero");
hero.addEventListener("mousemove", (e) => {
  const x = (e.clientX / window.innerWidth - 0.5) * 2;
  const y = (e.clientY / window.innerHeight - 0.5) * 2;
  gsap.to(".hero-shapes-back", { x: x * 45, y: y * 22, duration: 0.8 });
  gsap.to(".hero-shapes-mid",  { x: x * 22, y: y * 11, duration: 0.8 });
  gsap.to(".hero .container",  { x: x * 8,  y: y * 5,  duration: 0.8 });
});

3. 滚动触发的特性卡片

gsap.set(".feature-card", { opacity: 0, y: 55, rotateX: 18 });
ScrollTrigger.batch(".feature-card", {
  start: "top 80%",
  onEnter: batch => gsap.to(batch, {
    opacity: 1, y: 0, rotateX: 0,
    duration: 0.8,
    stagger: 0.11,
    ease: "power2.out"
  })
});

4. 漂浮装饰形状 (CSS keyframes — 非 GSAP)

使用 CSS 处理环境连续运动（对于无限循环动画，比 GSAP 更流畅且开销更低）：

@keyframes floatA {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(20px, -30px) rotate(8deg); }
}
@keyframes floatB { /* 不同的时长 + 旋转 */ }
@keyframes floatC { /* 不同的时长 + 旋转 */ }
.hero-shapes-back .shape-a { animation: floatA 12s ease-in-out infinite; }

5. 滚动指示器 (CSS bounce)

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
.scroll-down { animation: bounce 2s ease-in-out infinite; }

必需的 CDN 依赖

<link href="https://fonts.googleapis.co

禁止使用其他外部 CSS 或 JS 文件。所有自定义 CSS 需放在 <style> 中，所有自定义 JS 需放在同一 HTML 文件内的 <script> 块中。

关于仅限内联的原理，请参阅 references/single_file_html_discipline.md。

• 区块内边距 (Padding)： 120px 24px（垂直 120，水平 24，在移动端相应缩小）

• 视口元标签： <meta name="viewport" content="width=device-width, initial-scale=1">

• 路径： ${OUTPUT_DIR}/<product-name-kebab>.html

• 默认 ${OUTPUT_DIR}： ./landing-pages/

• 文件名： 产品名称的小写 kebab-case 形式（例如 "Quill AI" → quill-ai.html）。使用 scripts/kebab_slug_generator.py 进行确定性的 slug 生成及重复检测。

• 自包含： 所有 CSS 位于 <style>，所有 JS 位于 <script>，仅允许 Google Fonts 和 GSAP CDN 外部链接。

生成后运行 scripts/html_validator.py --file ${OUTPUT_DIR}/<slug>.html。检查项包括：

• 包含所有 3 个必需区块 (.hero, .features, .closing-cta)

• gsap.set() 初始状态必须在任何 gsap.timeline 或 gsap.to 之前执行（防止 FOUC 闪烁）

• 除 Google Fonts 外，无外部 <link rel="stylesheet">

• 除 GSAP CDN 外，无外部 <script src=>

• 包含 <meta name="viewport">

| 情况 | 处理行为 |
|---|---|
| 输入仅为名称且无上下文 | 根据名称语义和受众语调构思吸引人的内容；在 HTML 源码中标记为 <!-- inferred --> |
| 输入文件过大或为 PDF | 在生成前完整阅读；不要截断 |
| 品牌颜色不足（仅提供 1 个 HEX 码） | 将其作为主色；通过 brand_palette_validator.py 算法化推导次色/强调色（加亮/加深） |
| 未指定特性数量 | 默认为 4 个 |
| 输出目录不存在 | 自动创建 |
| 输出路径已存在文件 | 添加时间戳后缀或询问用户 (kebab_slug_generator.py 会标记重复) |
| html_validator 返回 FAIL | 在一次针对性迭代中仅重新生成失败的区块；不要放弃整个文件 |

| 脚本 | 作用 |
|---|---|
| scripts/brand_palette_validator.py | 验证 HEX 格式，检查 WCAG AA 对比度，从主色生成推导色板（算法加亮/加深）。 |
| scripts/kebab_slug_generator.py | 产品名称 $\rightarrow$ kebab-case 文件名 + 输出目录重复检测。 |
| scripts/html_validator.py | 生成后结构检查：3 个区块、CDN 依赖、gsap.set() 初始状态、响应式断点、无外部文件。 |

• references/brand_system_design.md — 色彩理论 + WCAG + 算法色板推导（7+ 来源）

• references/gsap_animation_patterns.md — GSAP 动画模式

• animation_patterns.md — 入场时间轴 + ScrollTrigger 揭示效果 + 鼠标视差 + CSS 浮动 + 滚动指示器（7+ 来源）

• references/single_file_html_discipline.md — 为什么使用内联 + 仅限 CDN 外部引用 + 无障碍最低标准 + 无构建流程的理由（7+ 来源）

• 跳过 gsap.set() 初始状态（会导致 FOUC 闪烁）

版本： 1.0.0
源规范： megaprompts/04-landing-megaprompt.md
构建模式： 路径 B（直接转换）。与 product-team/skills/landing-page-generator/` 不同。