citycraft

落地页构建器

理念

此技能生成视觉上大胆前卫的落地页，而不是典型的嵌套容器、卡片网格和套路化网页模板。每个输出都应像一件精心设计的作品：

• 大胆布局 — 使用裁剪路径分隔线，而非水平线。让文字延伸至屏幕之外。让元素突破网格。使用全视口标题。
• 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	交互式演示：导航栏样式、颜色变体、过渡样式、Hero/Features/Testimonials 变体	第 3 步：用 sed 填入城市颜色标记 + 产品名称，保存为 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-diagonal-br、.clip-parallelogram、.clip-arc-bottom 等）	在 style.css 中至少使用 2 个作为区块分隔线
assets/sections/hero-variants.html	3 个 Hero 区块模板（全屏铺张/分屏张力/极简下降）	第 4 步：选择符合用户排版偏好的变体，复制并调整
assets/sections/features-variants.html	6 个 Features 区块模板（大数字/交替展示/时间线/本托格子/水平滚动/问答展开）	第 4 步：根据内容类型选择（统计数据 → 大数字，工作原理 → 时间线）
assets/sections/testimonial-variants.html	6 个 Testimonials 模板（紧凑卡片/单列引用/马赛克拼贴/滚动横条/对话气泡/头像墙）	第 4 步：根据评价数量和视觉风格偏好选择
assets/sections/conversion-variants.html	定价表、常见问题、品牌墙、强力 CTA	第 4 步：复制相关区块，它们都使用 CSS 自定义属性
references/product-demo-hero.md	产品演示 Hero 原则 + 场景设计指南	用户希望在 Hero 区块中展示产品工作流时阅读（参见第 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 组装（先执行此步骤，再写入任何文件）

**目标是避免将打包的资源代码作为模型令牌输出。**请改用 Bash，将现成资源复制并导入输出文件。模型只编写特定于产品的内容（文案、令牌、覆盖项）。

步骤 1 — 设置目录

_SKILL_DIR="<当前 Skill 的绝对目录>"
_OUT="./{product-name}-landing"
mkdir -p "$_OUT/assets"

步骤 2 — 将各区块变体组装到暂存文件中

规划要使用的变体（见下表），然后将各变体导入暂存文件：

# Replace B / C / B / PRICING with the user's actual choices
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: use --texture flag (never read full city-styles.md)
python3 "$_SKILL_DIR/assets/scripts/get_city_tokens.py" "CITY_NAME" --texture > "$_OUT/_texture.css"
# Clip-paths: copy all classes, model picks which to apply via class names
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 工具：Hero D → Features C → Features A → Testimonials A → Pricing → FAQ A → CTA
• Agency 作品集：Hero A → Features B → Testimonials C → CTA
• 开发者工具：Hero B → Features C → Features A → Testimonials A → Pricing → FAQ B → CTA
• 奢侈品：Hero C → Features B → Testimonials B → CTA
• B2C 应用：Hero E → Features E → Testimonials F → CTA

如果用户需要……	使用此模板	变体
Hero — 大气醒目的粗体宣言	全屏铺张	A
Hero — 产品视觉图 + 标题	分屏张力	B
Hero — 优雅、以故事为先	极简下降	C
Hero — 产品需要展示工作流	产品演示型	D（另请阅读 references/product-demo-hero.md）
Hero — 以排版为主、冲击力强	文字爆炸型	E
Hero — 杂志式叙事	杂志撕裂型	F
Hero — 趣味十足的产品发布	弹出卡片型	G
Features — 聚焦数据/指标	大数字	A
Features — 产品截图	交替展示	B
工作原理 — 分步展示	时间线	C
Features — 模块化故事区块	本托格子型	D
Features — 可浏览的功能横带	水平滚动卡带型	E
Features — 异议处理	问答展开型	F
定价表	定价表	PRICING
带切换功能的定价对比	对比定价表	COMPARE_PRICING
Testimonials — 紧凑网格	紧凑卡片网格	A
Testimonials — 杂志风格	单列引用墙	B
Testimonials — 瀑布流布局	马赛克拼贴	C
Testimonials — 横向滚动	滚动横条	D
Testimonials — 对话气泡	对话气泡	E
Testimonials — 头像墙	视频头像墙	F
值得信赖的品牌 Logo	品牌墙	BRAND_WALL
最终 CTA	强力 CTA 区	CTA
FAQ — 编辑式布局	编辑排版型	FAQ_A
FAQ — 卡片网格	全宽焦点型	FAQ_B

4c — 编写输出文件

index.html — 使用 Write 工具写入。不要使用 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 — 使用 Write 工具写入。结构：

1. :root 块 — 完整的设计令牌系统：来自 $CITY_* 令牌的颜色、所选字体、间距比例、圆角。模型只从头编写这一部分。
2. 粘贴 _texture.css 中的纹理和 clip-path CSS
3. 与所选导航样式一致的导航栏 CSS（来自 references/nav-catalog.md）
4. 布局和排版覆盖样式 — 只覆盖与分区默认样式不同的部分

所有标题字号都必须使用 clamp()：

• Hero 主标题：clamp(2.8rem, 7vw, 7rem) — 即使采用铺张风格，也不得超过 7rem
• Section 标题：clamp(2rem, 4vw, 4rem)
• 大数字/装饰数字：clamp(4rem, 10vw, 9rem)
• 副标题/说明文字：clamp(1rem, 1.4vw, 1.2rem)

不要在 style.css 中添加注释 — 注释会占用令牌，且对输出文件没有价值。

main.js — 使用 Write 工具写入。结构：

1. gsap.registerPlugin(ScrollTrigger)
2. 粘贴 _gsap-base.js 中的相关函数 — 最低要求：
   • initHeroEntrance() — 让 Hero 元素依次进入
   • initParallax() — 至少设置 2 个不同速度的图层
   • 进入视口时显现分区标题
   • initStickySteps() 或 initBlastMenu() 或 initMagneticPill() — 与导航/布局匹配
3. 在底部添加调用顺序；字体加载后调用 ScrollTrigger.refresh()

不要在 main.js 中添加注释。

assets/icons.svg — SVG 雪碧图，包含 <symbol> 元素。至少包括：logo 标记、导航切换图标、箭头、勾号，以及 2–3 个与产品相关的功能图标。图标风格必须符合城市美学的描边粗细和几何形态。

写入所有文件后，删除暂存文件：

rm -f "$_OUT/_sections.html" "$_OUT/_texture.css" "$_OUT/_gsap-base.js"

---

设计准则（绝不可违背）

1. 不得使用 #ffffff 背景。 区块和卡片都不行。暖中性色：#f5ede0。冷色：#edf0ee。深色：#08060f。卡片应带轻微色调，绝不能是纯白色。
2. 不得使用 #6366f1。 颜色应来自城市风格调色板。
3. 针对每个区块边界独立决定过渡类型。 每对相邻区块都有各自的视觉关系——不要在所有地方重复使用同一个 clip-path 类。用户会在选项预览中选择一种过渡方向（几何锐利 / 有机柔和 / 覆盖混合 / 极简线条 / AI 自动）。用该方向来限定可选的类：GEOMETRIC → 斜线、切角、阶梯；ORGANIC → 曲线、扇贝形、弧线；BLEND → 覆盖层和渐变消融；MINIMAL → 细线。如果是 __AI_CHOOSE__，先查看 references/city-styles.md 中所选城市的条目，了解其中关于分隔线 / 过渡的描述。然后按边界逐一判断：考虑两个区块的类型（Hero → 功能、功能 → 定价等）、它们的相对张力，以及整页的节奏。可用类见 assets/clip-paths.css：斜线（clip-diagonal-*、clip-parallelogram）、曲线（clip-round-bottom、clip-scallop、clip-arc-bottom）、渐变消融（section-dissolve）、平直分隔线（section-rule）。
4. 不得使用通用图标。 图标的线条粗细和几何形状应与城市风格相匹配。
5. 至少使用两种字体。 标题使用展示字体 / 衬线字体，正文使用简洁的无衬线字体。字体应从 references/city-styles.md 中选择。装饰性 / 手写风格的点缀字体（城市风格中提到时）可用于水印、引言或装饰元素——绝不能用于按钮、导航或正文。
6. 导航必须带来惊喜。 使用 references/nav-catalog.md 中所选的导航方案，并完整实现其惊喜元素。
7. 使用随附资源。 纹理、GSAP 代码片段和 clip-path 必须来自技能的资源文件——不得从头重新实现。
8. .line-wrap 的中日韩文字修复。 页面包含中文或日文文本，并使用 .line-wrap { overflow: hidden } 实现逐行显示动画时，添加 padding-top: 0.15em; margin-top: -0.15em;，以防中日韩文字的上伸部分被顶部裁切。
9. 不得使用克隆式网格。 当一个区块包含多个重复项目（功能行、定价卡、常见问题、客户评价）时，不能让它们都采用相同的视觉处理。应有一个项目成为焦点——尺寸更大、带强调色或采用独特布局——其余项目作为陪衬。区块应像一张具有视觉层次的海报，而不是一张项目相同的电子表格。这是页面看起来像“模板”而非精心设计的最主要原因。

---

参考文件

• references/city-styles.md — 每种城市美学的精确设计参数（字体、颜色、纹理、动效、图标）
• references/nav-catalog.md — 4 种导航样式，附完整实现说明和 GSAP 代码
• references/imagery-derivation.md — 如何将任何非城市描述（场景、时代、材料、情绪）转化为具体的设计 Token 系统。用户描述不属于 57 张城市卡片中的任何一张时，务必阅读此文件。
• references/product-demo-hero.md — 何时以及如何在 Hero 中构建按时间驱动的产品工作流演示（变体 D）。包含场景设计指南、三幕结构、onEnter() 回调模式，以及产品类型 → 场景映射表。用户希望在 Hero 中展示产品流程时，务必阅读此文件。

事实与降级

模板中的评价、客户 Logo、人数和价格仅为结构示例；没有证据时，应删除或替换为真实的产品说明，不得编造背书。实现必须支持键盘操作、prefers-reduced-motion，并在脚本 / CDN 加载失败时仍提供静态可读内容。视觉验收说明必须注明实际检查的视口和状态；内容未渲染时，不得声称视觉验收已通过。