landing

Landing — 高级 HTML 落地页生成器

**与 product-team/skills/landing-page-generator/ 不同。**该技能会输出经过转化率／潜在客户开发优化的 Next.js TSX 组件。本技能会输出单个自包含的 .html 文件，针对 GSAP 动画带来的高级视觉体验进行优化。请根据使用场景选择。

根据文本提示或简报，生成精美、自包含的 .html 落地页。输出为一个 HTML 文件：所有 CSS 都内嵌在 <style> 中，所有 JS 都内嵌在 <script> 中，唯一的外部依赖是通过 CDN 加载的 Google Fonts 和 GSAP。页面视觉鲜明、带有动画，并达到生产级质量。

调用触发条件

• “创建一个落地页”
• “构建一个落地页”
• “为 X 制作一个落地页”
• “我需要一个关于 Y 的网页”
• “宣传页”
• “产品页”
• “单页网站”
• “网络形象”
• “销售页”
• “为 X 做一个落地页”

交付模式

在 Claude Code CLI 中，将文件写入指定路径。在 Claude.ai 网页版中，使用相同内容创建 HTML 制品。

阶段 0：深入了解需求（4 个必须回答的问题，每次一个）

按依赖顺序提问。每个问题都明确说明“我为什么要问”。停止条件：最多 4 个问题。

Q1（根问题）— 产品／服务

产品或服务是什么？请提供名称和 1–2 句话的简要介绍——它有什么作用，面向哪些人？

我为什么要问： 标题、副标题和功能文案都源于此。“提升效率的应用”会产生泛泛的套话；“为讨厌 Zoom 的远程工程团队打造的异步站会工具”则能生成更有转化力的落地页。

**拒绝含糊其辞。**如果用户只给出名称，没有介绍，就追问一次：“它有什么作用？面向哪些人？”如果追问后仍未提供介绍，则继续交付，并明确说明“定位较为通用”。

Q2（取决于 Q1）— 受众表达风格

受众是谁？请选择一项：

1. 技术买家（工程师、运维、安全人员）
2. 商业买家（PM、管理层、运营负责人）
3. 消费者（大众、爱好者）
4. 内部受众（员工、合作伙伴——非公开销售）

我为什么要问： 受众决定文案风格、术语程度、社会证明的选择和 CTA 的措辞。技术买家想要具体信息；消费者关注收益；内部页面可以省去说服性内容。

必须选择一项。

Q3（始终询问）— 品牌自定义

是否要覆盖默认品牌颜色／字体（深海军蓝 + 青绿色 + Inter）？请按以下格式提供：主色 HEX、强调色 HEX、可选背景色 HEX。若想使用精致的默认样式，请回复“默认”。

我为什么要问： 默认样式经过精心设计，但与品牌保持一致，能让页面更自然地融入现有网站。即使只覆盖主色，也能带来很大改观。

接受“默认”或部分覆盖（例如只提供主色）。如果只提供主色，则通过算法推导强调色（变亮／变暗）。

Q4（取决于 Q1）— 语气

语气——请选择一项：

1. 专业——自信、克制、适合 B2B
2. 活泼——亲切、轻松、偶尔幽默
3. 权威——专业、以数据为导向、建立信任
4. 简约——言简意赅、以设计为主、文案密度低

我为什么要问： 语气会影响每一句文案——标题、微文案、按钮文字和结尾文案。提前选择能避免各个版块的语气不协调。

必须选择一项。**建议默认值：**若 Q2 选择了技术买家／商业买家，则选专业；若选择了消费者，则选活泼；若产品以设计为主导，则选简约。

**停止条件：**Q4 结束后，确定方向并生成内容。生成期间不再追问。

内容提取（含回退策略）

根据 Q1 的电梯陈述，提炼出：

• 主视觉标题——以醒目的方式概括“它的功能”（8–12 个词）
• 主视觉副文案——概括“适用对象 + 收益”（1–2 句话）
• 3–6 条功能要点——从陈述 + 受众（Q2）+ 语气（Q4）中提炼
• CTA 文案——以行动为导向，符合语气
• 结尾文案——简短、富有感染力，符合语气

**输入内容稀少时的回退策略：**根据产品名称的含义和受众语域，创作有吸引力的内容。请在 HTML 源码中用注释标记推断出的内容（``）。不要停下来等待更多输入。

品牌系统规范

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

: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 代码块中：

Brand override:
- primary: #FF6B35    →  --navy / hero bg
- accent:  #2EC4B6    →  --teal / CTA / highlights
- bg:      #011627    →  --navy-mid / section bg
- text:    #FDFFFC    →  --off-white

如果只提供了主色，则通过算法推导强调色（强调色亮度提高 15%；深海军蓝中间色亮度降低 8%；将颜色转换为 alpha 值为 0.12 的 rgba，以生成辉光）。使用 scripts/brand_palette_validator.py 进行确定性推导。

有关色彩理论、WCAG 和算法配色方案推导规范，请参阅 references/brand_system_design.md。

字体排版

• **字体系列：**Inter（通过 Google Fonts 加载）
• **字重比例：**400（正文）、500（眉题）、600（链接）、700（副标题）、800（H1 + H2）
• 字号比例：
  • 主视觉 H1：68–82px
  • 区块 H2：52–62px
  • 卡片标题：22px
  • 正文：17–19px
  • 眉题：13px（大写，字母间距加宽）
  • CTA 按钮：18px（字重 500）

组件（必须指定 CSS）

• .btn-primary — CTA 按钮，带悬停状态（上移 + 提亮）
• .feature-card — 卡片，悬停时上移（translateY(-6px) + 边框提亮）
• .eyebrow — 字母间距加宽（0.2em）的大写分类标签

区块 1：主视觉

• min-height: 100vh，内容使用 flex 居中
• 可选眉题标签，置于 H1 上方
• H1（68–82px，字重 800）
• 副标题（17–19px，1–2 句话）
• CTA 按钮（.btn-primary）
• 向下滚动指示器（带 CSS 弹跳动画的箭头）
• 纵深层次（鼠标视差）：
  • .hero-shapes-back — 大型模糊圆形，绝对定位，低不透明度
  • .hero-shapes-mid — 较小的形状，边缘更清晰，不透明度更高
  • 内容层（H1 + 副标题）— 随鼠标方向轻微移动

区块 2：功能

• 默认 3 列（repeat(3, 1fr) 网格）
• 响应式布局：
  • 在 900px 断点处为 2 列
  • 在 580px 断点处为 1 列
• 每张卡片：
  • SVG 图标（28px，stroke=var(--teal)，无填充）
  • 标题（22px，字重 700）
  • 描述（15–16px，--text-muted）
• 悬停状态：
  • transform: translateY(-6px)
  • border-color: var(--teal)（从 --card-border 提亮）
  • transition: 0.3s ease

区块 3：结尾 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. 主视觉入场（GSAP 时间线）

// MUST use gsap.set() FIRST to prevent 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 关键帧——不要使用 GSAP）

CSS 负责环境氛围的连续运动（相比 GSAP，更平滑，也更适合无限循环动画）：

@keyframes floatA {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(20px, -30px) rotate(8deg); }
}
@keyframes floatB { /* different duration + rotation */ }
@keyframes floatC { /* different duration + rotation */ }

.hero-shapes-back .shape-a { animation: floatA 12s ease-in-out infinite; }

5. 滚动指示器（CSS 弹跳）

@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.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

不要使用其他外部 CSS 或 JS 文件。所有自定义 CSS 都放在 <style> 中，所有自定义 JS 都放在同一个 HTML 文件的 <script> 代码块中。

仅使用内联代码的原因，请参阅 references/single_file_html_discipline.md。

布局规则

• 容器最大宽度： 1200px，居中
• 区块内边距： 120px 24px（垂直 120，水平 24，在移动端缩小）
• 响应式断点：
  • 900px → 功能网格从 3 列变为 2 列
  • 580px → 所有网格变为 1 列；H1 缩小至约 52px
• 视口 meta 标签： <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）
• 是否包含 CDN 依赖（Inter + GSAP + ScrollTrigger）
• gsap.set() 初始状态是否位于任何 gsap.timeline 或 gsap.to 之前（防止 FOUC）
• 900px + 580px 响应式断点
• 除 Google Fonts 外，是否没有外部 <link rel="stylesheet">
• 除 GSAP CDN 外，是否没有外部 <script src=>
• 是否包含 <meta name="viewport">
• 所有动画元素是否都有初始状态声明

错误处理

情况	处理方式
输入只有名称，没有上下文	根据名称语义和受众语体创作有吸引力的内容；在 HTML 源代码中将其标记为 ``
输入文件很大或是 PDF	生成前完整读取；不要截断
品牌颜色信息不足（仅提供 1 个 HEX）	将其用作主色；使用 brand_palette_validator.py 通过算法调整亮度或暗度，推导出辅助色和强调色
未指定功能数量	默认设为 4
输出目录不存在	创建该目录
输出路径已有文件	添加时间戳后缀或询问用户（kebab_slug_generator.py 会标记重复项）
html_validator 返回 FAIL	在一次有针对性的处理中，仅重新生成未通过验证的区块；不要放弃整个文件

可移植性

• Claude Code CLI： 原生支持，可直接将 HTML 文件写入文件系统。
• Claude.ai 网页版： 原生支持，可将 HTML 生成为一个制品，而不是文件。

工具

脚本	用途
scripts/brand_palette_validator.py	验证 HEX 格式，检查 WCAG AA 对比度，并根据主色通过算法生成衍生配色（调整亮度或暗度）。
scripts/kebab_slug_generator.py	将产品名称转换为 kebab-case 文件名，并检测输出目录中的重复项。
scripts/html_validator.py	生成后的结构检查：3 个区块、CDN 依赖、gsap.set() 初始状态、响应式断点，以及无外部文件。

参考资料

• references/brand_system_design.md — 色彩理论 + WCAG + 算法配色衍生（7+ 个来源）
• references/gsap_animation_patterns.md — 入场时间线 + ScrollTrigger 显现效果 + 鼠标视差 + CSS 浮动效果 + 滚动指示器（7+ 个来源）
• references/single_file_html_discipline.md — 使用内联代码的原因 + 仅使用 CDN 外部资源 + 无障碍最低要求 + 无构建流程的理由（7+ 个来源）

应拒绝的反模式

• 在输出目录中硬编码绝对路径
• 只提供一套品牌配色，且没有覆盖说明
• 写之前先列提纲——应一次性写完
• 使用外部 CSS 或 JS 文件（必须内联；仅允许使用 Google Fonts + GSAP CDN）
• 跳过 gsap.set() 初始状态（会导致 FOUC）
• 默认网格中的功能超过 6 个（难以快速浏览）
• 在技能本身中引用特定品牌内容

---

版本： 1.0.0 源规范： megaprompts/04-landing-megaprompt.md（维护者本地草案规范——已被 git 忽略，不包含在公开仓库中） 构建模式： 路径 B（直接转换）。与 product-team/skills/landing-page-generator/ 不同。