本技能的质量保证来自于使用这些资源。 它们编码了使输出与众不同的特定设计决策。不要描述该做什么——直接复制代码并调整它。

工作流程

步骤 1：了解产品

使用 AskUserQuestion 提问：

"告诉我你的落地页是关于什么的——产品/服务名称，以及一句话介绍。"

等待回答后再继续。

步骤 2：生成风格预览

填充两个占位符并打开结果——不要将模板文件读入上下文：

• PRODUCT_NAME → 来自步骤 1 的产品名称
• PRODUCT_HEADLINE → 一个简短有力的短语（3-5 个词），抓住产品精髓

_SKILL_DIR=$(ls -d ~/.agents/skills/citycraft 2>/dev/null || ls -d ~/.claude/skills/citycraft 2>/dev/null)
PYTHON=$(command -v python3 2>/dev/null || command -v python 2>/dev/null || echo "")
if [ -n "$PYTHON" ]; then
  # Python available (macOS / Linux / WSL / Windows with Python)
  # Pass LANG=en for English-language conversations
  "$PYTHON" "$_SKILL_DIR/assets/scripts/run_preview.py" \
    --template "$_SKILL_DIR/assets/style-preview-template.html" \
    --output   ./style-preview.html \
    --port     17433 \
    --timeout  300 \
    "LANG=zh" \
    "PRODUCT_NAME=ACTUAL_PRODUCT_NAME" \
    "PRODUCT_HEADLINE=ACTUAL_HEADLINE" \
    "RECEIVER_PORT=17433"
else
  # No Python — substitute via sed and open as a local file.
  # The submit button falls back to clipboard copy automatically.
  sed "s/__PRODUCT_NAME__/ACTUAL_PRODUCT_NAME/g; s/__PRODUCT_HEADLINE__/ACTUAL_HEADLINE/g" \
    "$_SKILL_DIR/assets/style-preview-template.html" > ./style-preview.html
  open ./style-preview.html 2>/dev/null || xdg-open ./style-preview.html 2>/dev/null \
    || echo "Open in browser: $(pwd)/style-preview.html"
  echo "Python not found — no live bridge. The submit button will copy the city name to clipboard. Paste it here."
fi

将脚本参数中的 ACTUAL_PRODUCT_NAME 和 ACTUAL_HEADLINE 替换为来自步骤 1 的实际值。

Windows PowerShell (no WSL/Git Bash): 直接运行 run_preview.ps1 — 它具有相同的接口。查看 assets/scripts/run_preview.ps1 了解用法。

告诉用户："我在浏览器里打开了57种城市风格的预览卡片，每个都是真实渲染效果。向下滚动可以看到全部——从京都到拉各斯到棕榈泉，再到伊斯坦布尔、迈阿密、成都、哥本哈根、维也纳、开普敦、波哥大、阿姆斯特丹、贝鲁特、波特兰，以及上海、北京、重庆、西安、杭州、深圳夜、敦煌、苏州、拉萨、罗马、布拉格、墨尔本、雅典、卡萨布兰卡、釜山、巴厘岛、多伦多、特拉维夫、华沙、孟买夜，还有新加入的大阪、清迈、米兰、台北、新奥尔良、苏黎世、温哥华。选好之后直接点卡片发送给我；如果本地桥接没有连上，也可以复制城市名告诉我。如果57个城市都不对，直接用自己的语言描述给我也行。"

步骤 3：打开交互式选项预览

用户已经选择了他们的城市。现在打开视觉选项预览，让他们可以感受布局和导航选择，而不是阅读描述。

如果用户点击了"让 AI 来选" (city =__AI_CHOOSE__): 完全跳过预览。相反，回顾对话以了解产品的受众、行业和基调。然后从 references/city-styles.md 中选择最合适的单个城市，并简要解释原因（2-3 句话）。与用户确认："我为你选了 [城市]——[理由]. 继续吗？" 然后使用该城市继续步骤 3。

3a — 获取城市颜色令牌（通过脚本，而非读取文件）

运行 get_city_tokens.py 仅提取 5 个颜色值——不要将 city-styles.md 读入上下文：

_SKILL_DIR=$(ls -d ~/.agents/skills/citycraft 2>/dev/null || ls -d ~/.claude/skills/citycraft 2>/dev/null)
PYTHON=$(command -v python3 2>/dev/null || command -v python 2>/dev/null || echo "")
# Outputs CITY_BG=, CITY_SURFACE=, CITY_INK=, CITY_MUTED=, CITY_ACCENT=
eval $("$PYTHON" "$_SKILL_DIR/assets/scripts/get_city_tokens.py" "ACTUAL_CITY_NAME")

将 ACTUAL_CITY_NAME 替换为用户选择的城市名称（中文或英文）。脚本会处理两者。如果未找到该城市，脚本会以状态码 1 退出——在这种情况下，回退到手动读取 references/city-styles.md 中的 ### Colors 部分。

3b — 生成并打开 options-preview.html

使用来自 3a 的 $CITY_* 变量。不要将模板文件读入上下文：

if [ -n "$PYTHON" ]; then
  # Pass LANG=en for English-language conversations
  "$PYTHON" "$_SKILL_DIR/assets/scripts/run_preview.py" \
    --template "$_SKILL_DIR/assets/options-preview-template.html" \
    --output   ./options-preview.html \
    --port     17432 \
    --timeout  300 \
    "LANG=zh" \
    "PRODUCT_NAME=ACTUAL_PRODUCT_NAME" \
    "PRODUCT_HEADLINE=ACTUAL_HEADLINE" \
    "CITY_NAME=ACTUAL_CITY_NAME" \
    "CITY_BG=$CITY_BG" \
    "CITY_SURFACE=$CITY_SURFACE" \
    "CITY_INK=$CITY_INK" \
    "CITY_MUTED=$CITY_MUTED" \
    "CITY_ACCENT=$CITY_ACCENT" \
    "CITY_DARK_BG=#0e0c09" \
    "CITY_DARK_SURFACE=#1e1b16" \
    "CITY_DARK_INK=#f2ede4" \
    "CITY_DARK_ACCENT=$CITY_ACCENT" \
    "CITY_BRIGHT_BG=#fdf9f2" \
    "CITY_BRIGHT_SURFACE=#fffdf8" \
    "CITY_BRIGHT_INK=#1a1510" \
    "CITY_BRIGHT_ACCENT=$CITY_ACCENT" \
    "RECEIVER_PORT=17432"
else
  sed \
    -e "s/__PRODUCT_NAME__/ACTUAL_PRODUCT_NAME/g" \
    -e "s/__PRODUCT_HEADLINE__/ACTUAL_HEADLINE/g" \
    -e "s/__CITY_NAME__/ACTUAL_CITY_NAME/g" \
    -e "s/__CITY_BG__/$CITY_BG/g" \
    -e "s/__CITY_SURFACE__/$CITY_SURFACE/g" \
    -e "s/__CITY_INK__/$CITY_INK/g" \
    -e "s/__CITY_MUTED__/$CITY_MUTED/g" \
    -e "s/__CITY_ACCENT__/$CITY_ACCENT/g" \
    -e "s/__CITY_DARK_BG__/#0e0c09/g" \
    -e "s/__CITY_DARK_SURFACE__/#1e1b16/g" \
    -e "s/__CITY_DARK_INK__/#f2ede4/g" \
    -e "s/__CITY_DARK_ACCENT__/$CITY_ACCENT/g" \
    -e "s/__CITY_BRIGHT_BG__/#fdf9f2/g" \
    -e "s/__CITY_BRIGHT_SURFACE__/#fffdf8/g" \
    -e "s/__CITY_BRIGHT_INK__/#1a1510/g" \
    -e "s/__CITY_BRIGHT_ACCENT__/$CITY_ACCENT/g" \
    "$_SKILL_DIR/assets/options-preview-template.html" > ./options-preview.html
  open ./options-preview.html 2>/dev/null || xdg-open ./options-preview.html 2>/dev/null \
    || echo "Open in browser: $(pwd)/options-preview.html"
  echo "Python not found — no live bridge. Use the copy button in the preview and paste the result here."
fi

深色变体（__CITY_DARK_*）始终是奢华/夜间处理——接近黑色的背景、暖色亮文字、相同的强调色。明亮变体始终是清新/现代处理——接近白色的背景、深色文字、相同的强调色。城市的身份来自于基础颜色和强调色，而不是深色/明亮的外壳。

Windows PowerShell (no WSL/Git Bash): 直接运行 run_preview.ps1。查看 assets/scripts/run_preview.ps1 了解用法。

当脚本退出时，它会将结果 JSON 打印到标准输出。如果超时，请让用户在继续之前手动输入他们的选择。

告诉用户："在浏览器里打开了一个互动选择页——有排版、导航的实际演示效果，还有三种色调的对比。可以点击全屏菜单看它怎么爆开，把光标移近底部胶囊感受磁性效果。全部选好之后，点底部的「告诉 Agent →」按钮，我会自动收到结果并继续生成；如果本地桥接没有连上，再把复制结果贴给我就可以。"

如果用户选择了非城市描述（场景、时代、材质、情感）：首先阅读 references/imagery-derivation.md 来推导设计令牌系统，使用这些推导出的颜色作为上面 CITY_* 参数的值，然后正常进行。

如果脚本打印了 JSON，直接解析它，并使用 city、layout、nav、tone、hero、features 和 sections 继续步骤 4。如果超时，请让用户在继续之前手动粘贴他们的选择。

步骤 4：生成落地页

输出到 {product-name}-landing/：

{product-name}-landing/
├── index.html
├── style.css
├── main.js
└── assets/
    └── icons.svg

4a — Bash 组装（首先执行此操作，在写入任何文件之前）

目标是避免将捆绑资源代码作为模型令牌输出。 相反，使用 Bash 复制并将现成的资源通过管道传输到输出文件中。只有产品特定的内容（文案、令牌、覆盖）由模型编写。

步骤 1 — 设置目录

_SKILL_DIR=$(ls -d ~/.agents/skills/citycraft 2>/dev/null || ls -d ~/.claude/skills/citycraft 2>/dev/null)
_OUT="./{product-name}-landing"
mkdir -p "$_OUT/assets"

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

计划使用哪些变体（见下表），然后将每个变体通过管道传输到暂存文件：

# 将 B / C / 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/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"

对于转化区块，使用名称：PRICING、COMPARE_PRICING、TESTIMONIALS、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 → Pricing → FAQ A → CTA
• 机构作品集：Hero A → Features B → Testimonials → CTA
• 开发者工具：Hero B → Features C → Features A → Pricing → FAQ B → CTA
• 奢侈品：Hero C → Features B → Testimonials → CTA

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 粘贴纹理 + 剪裁路径 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() — 错开入场英雄元素
   • initParallax() — 至少 2 层以不同速度移动
   • 区块标题在进入视口时显现
   • initStickySteps() 或 initBlastMenu() 或 initMagneticPill() — 匹配导航/布局
3. 底部的调用序列；字体加载后调用 ScrollTrigger.refresh()

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

assets/icons.svg — 包含 <symbol> 元素的 SVG 精灵。至少包含：徽标标记、导航切换图标、箭头、勾选标记、2-3 个与产品相关的功能图标。图标风格必须与城市美学的描边粗细和几何形状相匹配。

所有文件编写完成后，删除暂存文件：

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

设计法则（永不违反）

1. 没有 #ffffff 背景。 不在区块上，不在卡片上。暖中性色：#f5ede0。冷色：#edf0ee。深色：#08060f。卡片使用轻微色调，绝不使用纯白色。
2. 没有 #6366f1。 颜色来自城市风格调色板。
3. 选择一种过渡类型并始终如一地使用它。 选择适合城市特征的过渡类型——对角线用于大胆/都市，曲线用于有机/温暖，溶解用于情绪化/氛围感，平直线用于编辑/极简。在所有区块边界应用相同的过渡类型。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 代码片段和剪裁路径必须来自技能的资产文件——而不是从头重新实现。
8. .line-wrap CJK 修复。 每当页面包含中文或日文文本并使用 .line-wrap { overflow: hidden } 进行行显现动画时，添加 padding-top: 0.15em; margin-top: -0.15em; 以防止 CJK 字符的上升部分在顶部被裁剪。

参考文件

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

每周安装次数

139

仓库

oil-oil/citycraft

GitHub 星标数

17

首次出现

10 天前

安全审计

Gen Agent Trust HubPassSocketPassSnykPass

安装于

codex138

gemini-cli137

kimi-cli137

cursor137

opencode137

github-copilot137