Landing Page Builder
理念
此技能生成的落地页必须视觉上大胆——而非典型的嵌套容器、卡片网格或可预测的网页模板。每个输出都应像一件精心设计的手工艺品：
- 布局大胆 — 使用 clip-path 分割线而非水平线。文字溢出屏幕。元素突破网格限制。全视口标题。
- SVG 作为设计核心 — 不仅仅是装饰性点缀。SVG 路径随滚动动画，图标具有个性，背景纹理来自
<feTurbulence>噪点。 - 层次感与深度 — GSAP ScrollTrigger 创造真正的空间深度：部分重叠并覆盖前一个部分，内容滑动时固定面板，视差在不同 Z 层上。
- 背景质感 — 每个部分都有纹理。绝不要纯色平面背景。
- 导航惊喜 — 导航栏永远不是标准的水平条。
内置资源（必须使用——不要重新发明）
此技能附带了预先构建的资源。请直接阅读并使用它们：
| 文件 | 内容 | 何时使用 |
|---|---|---|
assets/style-preview-template.html | 57 城市风格预览卡片 | 步骤 2：用 sed 填充 __PRODUCT_NAME__ 和 __PRODUCT_HEADLINE__，保存为 style-preview.html，打开 |
assets/options-preview-template.html | 交互式演示：导航样式、颜色变体、过渡样式、英雄区/特性/评价变体 | 步骤 3：用 sed 填充城市颜色 Token 和产品名称，保存为 options-preview.html，打开 |
assets/textures.css | 6 个 CSS 纹理类（.texture-kyoto、.texture-paris、.texture-tokyo 等） | 将匹配的类复制到 style.css 中 |
assets/gsap-snippets.js | 6 个 GSAP 动画函数（模糊入场、线条揭示、视差、粘性步骤、爆炸菜单、磁吸药丸） | 将相关函数复制到 main.js 中 |
assets/clip-paths.css | 8 个 clip-path 分割线类（.clip-diagonal-br、.clip-parallelogram、.clip-arc-bottom 等） | 在 style.css 中至少使用 2 个作为部分分割线 |
assets/sections/hero-variants.html | 3 个英雄区模板（全屏铺张/分屏张力/极简下降） | 步骤 4：根据用户排版偏好选择变体，复制并改编 |
assets/sections/features-variants.html | 6 个特性展示模板（大数字/交替展示/时间线/本托格子/水平滚动/问答展开） | 步骤 4：根据内容类型选择（统计数据→大数字，工作原理→时间线） |
assets/sections/testimonial-variants.html | 6 个评价模板（紧凑卡片/单列引用/马赛克拼贴/滚动横条/对话气泡/头像墙） | 步骤 4：根据评价数量和视觉风格偏好选择 |
assets/sections/conversion-variants.html | 定价表、FAQ、品牌墙、强力 CTA | 步骤 4：复制相关部分，全部使用 CSS 自定义属性 |
references/product-demo-hero.md | 产品演示英雄区原理 + 场景设计指南 | 当用户希望在英雄区展示产品工作流程时阅读（参见步骤 3/4） |
此技能的质量保证来自使用这些资源。 它们编码了使输出与众不同的具体设计决策。不要描述要做什么——直接复制代码并加以改编。
工作流程
步骤 1：理解产品
复用用户已经给出的产品与风格；只在产品信息缺失时询问：
"告诉我你的落地页是关于什么的——产品/服务名称，以及一句话介绍。"
用户已给出产品说明、已选择城市或已委托 Agent 决策时，直接进入相应步骤。
步骤 2–3：可选风格与布局预览
用户已有选择时直接复用；让 Agent 选择时读取相关城市条目，说明理由后继续。需要比较时按 预览工作流 生成本地预览。没有可用预览能力时在对话中提供少量候选，不把打开页面当成用户已经选定。
步骤 4：生成落地页
输出到 {product-name}-landing/：
{product-name}-landing/
├── index.html
├── style.css
├── main.js
└── assets/
└── icons.svg
4a — Bash 组装（首先执行，在任何文件写入之前）
目标是避免将内置资产代码作为模型 Token 输出。 相反，使用 Bash 将现成的资源复制并管道到输出文件中。只有特定于产品的内容（文案、Token、覆盖）由模型编写。
步骤 1 — 设置目录
_SKILL_DIR="<当前 Skill 的绝对目录>"
_OUT="./{product-name}-landing"
mkdir -p "$_OUT/assets"
步骤 2 — 将章节变体组装到暂存文件中
规划要使用的变体（见下表），然后将每个变体管道到暂存文件中：
# 将 B / C / B / PRICING 替换为用户的实际选择
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
"$_SKILL_DIR/assets/sections/hero-variants.html" B > "$_OUT/_sections.html"
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
"$_SKILL_DIR/assets/sections/features-variants.html" C >> "$_OUT/_sections.html"
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
"$_SKILL_DIR/assets/sections/testimonial-variants.html" B >> "$_OUT/_sections.html"
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
"$_SKILL_DIR/assets/sections/conversion-variants.html" PRICING >> "$_OUT/_sections.html"
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
"$_SKILL_DIR/assets/sections/conversion-variants.html" CTA >> "$_OUT/_sections.html"
对于评价部分，使用：A、B、C、D、E、F
对于转化部分，使用：PRICING、COMPARE_PRICING、BRAND_WALL、CTA、FAQ_A、FAQ_B
步骤 3 — 将捆绑的 CSS 工具复制到 style.css 基础中
# 纹理：使用 --texture 标志（切勿读取完整的 city-styles.md）
python3 "$_SKILL_DIR/assets/scripts/get_city_tokens.py" "CITY_NAME" --texture > "$_OUT/_texture.css"
# Clip-paths：复制所有类，模型通过类名选择应用哪些
cat "$_SKILL_DIR/assets/clip-paths.css" >> "$_OUT/_texture.css"
步骤 4 — 将 GSAP 片段复制到 main.js 基础中
cat "$_SKILL_DIR/assets/gsap-snippets.js" > "$_OUT/_gsap-base.js"
现在读取三个暂存文件（_sections.html、_texture.css、_gsap-base.js）以了解可用内容，然后写入最终输出文件。
4b — 章节变体参考
常见页面序列：
- SaaS 工具：英雄 D → 特性 C → 特性 A → 评价 A → 定价 → FAQ A → CTA
- 机构作品集：英雄 A → 特性 B → 评价 C → CTA
- 开发者工具：英雄 B → 特性 C → 特性 A → 评价 A → 定价 → FAQ B → CTA
- 奢侈品：英雄 C → 特性 B → 评价 B → CTA
- B2C 应用：英雄 E → 特性 E → 评价 F → CTA
| 如果用户需要... | 使用此模板 | 变体 |
|---|---|---|
| 英雄区 — 巨大的粗体声明 | 全屏铺张 | A |
| 英雄区 — 产品视觉 + 标题 | 分屏张力 | B |
| 英雄区 — 优雅、故事优先 | 极简下降 | C |
| 英雄区 — 产品有工作流程要展示 | 产品演示型 | D（同时阅读 references/product-demo-hero.md） |
| 英雄区 — 排版主导、高冲击力 | 文字爆炸型 | E |
| 英雄区 — 编辑式叙事 | 杂志撕裂型 | F |
| 英雄区 — 俏皮的产品发布 | 弹出卡片型 | G |
| 特性 — 数据/指标焦点 | 大数字 | A |
| 特性 — 产品截图 | 交替展示 | B |
| 工作原理 — 分步 | 时间线 | C |
| 特性 — 模块化故事块 | 本托格子型 | D |
| 特性 — 可浏览的能力条 | 水平滚动卡带型 | E |
| 特性 — 异议处理 | 问答展开型 | F |
| 定价表 | 定价表 | PRICING |
| 带切换的定价比较 | 对比定价表 | COMPARE_PRICING |
| 评价 — 紧凑网格 | 紧凑卡片网格 | A |
| 评价 — 杂志风格 | 单列引用墙 | B |
| 评价 — 砖石布局 | 马赛克拼贴 | C |
| 评价 — 水平滚动 | 滚动横条 | D |
| 评价 — 对话气泡 | 对话气泡 | E |
| 评价 — 头像墙 | 视频头像墙 | F |
| 值得信赖的品牌 Logo | 品牌墙 | BRAND_WALL |
| 最终 CTA | 强力CTA区 | CTA |
| FAQ — 编辑排版 | 编辑排版型 | FAQ_A |
| FAQ — 卡片网格 | 全宽焦点型 | FAQ_B |
4c — 写入输出文件
index.html — 使用写入工具写入。没有 Markdown 代码块，直接写入文件。
- 文档结构：
<html>、<head>（Google Fonts、GSAP CDN、链接到 style.css + main.js）、<body> - 与所选导航样式匹配的导航 HTML
- 按页面顺序从
_sections.html粘贴<style>块和<section>HTML - 将所有占位符文案替换为真实产品文案——匹配城市美学的语气
- 没有 Lorem Ipsum，没有占位文本
- 打破模板的统一性：在每个章节中，改变项目的视觉权重。模板显示重复的模式——将一个项目设为焦点（强调背景、更大卡片、特色徽章、不同的内部布局），让其他项目退后。没有任何部分看起来像克隆网格。
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
style.css — 使用写入工具写入。结构：
:root块 — 完整的设计 Token 系统：来自$CITY_*Token 的颜色、所选字体、间距比例、圆角半径。这是模型从头编写的唯一部分。- 从
_texture.css粘贴纹理 + clip-path CSS - 与所选导航样式匹配的导航 CSS（来自
references/nav-catalog.md） - 布局和排版覆盖——仅与部分默认值不同的部分
clamp() 用于所有标题字号：
- 英雄主标题：
clamp(2.8rem, 7vw, 7rem)— 铺张型也不超过 7rem - 章节标题：
clamp(2rem, 4vw, 4rem) - 大数字/装饰数字：
clamp(4rem, 10vw, 9rem) - 副标题/说明文字：
clamp(1rem, 1.4vw, 1.2rem)
不要向 style.css 添加注释——它们消耗 Token 且对输出文件没有价值。
main.js — 使用写入工具写入。结构：
gsap.registerPlugin(ScrollTrigger)- 从
_gsap-base.js粘贴相关函数——所需最低限度：initHeroEntrance()— 错开英雄区元素进入initParallax()— 至少 2 个不同速度的层- 章节标题在视口进入时揭示
initStickySteps()或initBlastMenu()或initMagneticPill()— 匹配导航/布局
- 底部调用序列；字体加载后使用
ScrollTrigger.refresh()
不要向 main.js 添加注释。
assets/icons.svg — 带有 <symbol> 元素的 SVG 精灵。至少包含：Logo 标记、导航切换、箭头、勾选标记、2-3 个产品相关的特性图标。图标样式必须匹配城市美学的描边粗细和几何形状。
在所有文件写入后，删除暂存文件：
rm -f "$_OUT/_sections.html" "$_OUT/_texture.css" "$_OUT/_gsap-base.js"
设计法则（严禁违反）
- 没有
#ffffff背景。 无论是章节还是卡片。暖中性色：#f5ede0。冷色：#edf0ee。深色：#08060f。卡片使用轻微色调，绝不使用纯白色。 - 没有
#6366f1。 颜色来自城市风格调色板。 - 独立决定每个章节边界的过渡类型。 每对相邻章节都有其自己的视觉关系——不要在任何地方重复使用相同的 clip-path 类。用户在选项预览中选择一个过渡方向（几何锐利 / 有机柔和 / 覆盖混合 / 极简线条 / AI 自动）。使用该方向来限制选择哪些类：
GEOMETRIC→ 对角线、倒角、阶梯；ORGANIC→ 曲线、扇贝形、弧线；BLEND→ 覆盖叠加和渐变溶解；MINIMAL→ 细线规则。如果__AI_CHOOSE__，首先扫描所选城市在references/city-styles.md中的条目以查找分割/过渡语言。然后应用每个边界的逻辑：考虑两个部分是什么（英雄→特性、特性→定价等），它们的相对能量以及整体页面节奏。assets/clip-paths.css中的可用类：对角线（clip-diagonal-*、clip-parallelogram），曲线（clip-round-bottom、clip-scallop、clip-arc-bottom），渐变溶解（section-dissolve），平线规则（section-rule）。 - 没有通用图标。 匹配城市风格的描边粗细和几何形状。
- 至少两种字体。 显示/衬线字体用于标题 + 干净的无衬线字体用于正文。来自
references/city-styles.md。装饰/手写强调字体（当城市风格提到时）用于水印、引用或装饰元素——绝不用于按钮、导航或正文副本。 - 导航必须令人惊喜。 使用来自
references/nav-catalog.md的所选导航，并实现其完整的惊喜元素。 - 使用内置资源。 纹理、GSAP 片段和 clip-path 必须来自技能的资源文件——而不是从头重新实现。
.line-wrapCJK 修复。 当页面包含中文或日文文本并使用.line-wrap { overflow: hidden }进行线条揭示动画时，添加padding-top: 0.15em; margin-top: -0.15em;以防止 CJK 上升部分被顶部裁剪。- 没有克隆网格。 当一个部分包含多个重复项目（特性行、定价卡、FAQ 项目、评价）时，它们不能都共享相同的视觉处理。一个项目应该是焦点——更大、强调或具有不同的布局——而其他项目形成支持阵容。一个部分应该感觉像一张具有视觉层次的海报，而不是相同行的电子表格。这是导致页面看起来过于“模板化”而非设计感的最大原因。
参考文件
references/city-styles.md— 每种城市美学的确切设计参数（字体、颜色、纹理、动效、图标）references/nav-catalog.md— 4 种导航样式及其完整的实现说明和 GSAP 代码references/imagery-derivation.md— 如何将任何非城市描述（场景、时代、材料、情感）转换为具体的设计 Token 系统。每当用户描述的不是 57 个城市卡片之一时，请阅读此文件。references/product-demo-hero.md— 何时以及如何在英雄区（变体 D）构建时间驱动的产品工作流程演示。包含场景设计指南、三幕结构、onEnter() 回调模式以及产品类型到场景的映射表。每当用户希望展示其产品在英雄区中的过程时，请阅读此文件。
事实与降级
模板里的评价、客户 Logo、人数与价格仅为结构示例；没有证据就删除或换成真实产品说明，不编造背书。实现需支持键盘操作、prefers-reduced-motion 和脚本/CDN 加载失败时的静态可读内容。视觉验收说明实际检查的视口与状态；未渲染时不能声称视觉已通过。