npx skills add https://github.com/oil-oil/citycraft --skill citycraft本技能生成的落地页追求视觉上的大胆——绝非那种嵌套容器、卡片网格、千篇一律的网页模板。每一个输出都应像一件精心设计的产品:
<feTurbulence> 噪波。本技能附带预构建的资源。直接阅读并使用它们:
| 文件 | 内容 | 何时使用 |
|---|---|---|
assets/style-preview-template.html | 57 种城市风格预览卡片 | 步骤 2:用 sed 填充 和 ,保存为 并打开 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
__PRODUCT_NAME____PRODUCT_HEADLINE__style-preview.htmlassets/options-preview-template.html | 交互式演示:3 种排版风格,4 种导航风格,3 种颜色变体 | 步骤 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 | 3 种 Features 区块模板(大数字/交替展示/时间线) | 步骤 4:根据内容类型选择(统计数据 → 大数字,工作原理 → 时间线) |
assets/sections/conversion-variants.html | 定价表、推荐墙、强力行动号召 | 步骤 4:复制相关区块,全部使用 CSS 自定义属性 |
references/product-demo-hero.md | 产品演示 Hero 原则 + 场景设计指南 | 当用户希望在 Hero 中展示产品工作流程时阅读(见步骤 3/4) |
本技能的质量保证来自于使用这些资源。 它们编码了使输出与众不同的特定设计决策。不要描述该做什么——直接复制代码并调整它。
使用 AskUserQuestion 提问:
"告诉我你的落地页是关于什么的——产品/服务名称,以及一句话介绍。"
等待回答后再继续。
填充两个占位符并打开结果——不要将模板文件读入上下文:
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个城市都不对,直接用自己的语言描述给我也行。"
用户已经选择了他们的城市。现在打开视觉选项预览,让他们可以感受布局和导航选择,而不是阅读描述。
如果用户点击了"让 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。如果超时,请让用户在继续之前手动粘贴他们的选择。
输出到 {product-name}-landing/:
{product-name}-landing/
├── index.html
├── style.css
├── main.js
└── assets/
└── icons.svg
目标是避免将捆绑资源代码作为模型令牌输出。 相反,使用 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)以了解可用的内容,然后编写最终的输出文件。
常见的页面序列:
| 如果用户需要... | 使用此模板 | 变体 |
|---|---|---|
| Hero — 宏大、大胆的声明 | 全屏铺张 | A |
| Hero — 产品视觉 + 标题 | 分屏张力 | B |
| Hero — 优雅,故事优先 | 极简下降 | C |
| Hero — 产品有工作流程需要展示 | 产品演示型 | D (also read references/product-demo-hero.md) |
| Hero — 排版主导,高冲击力 | 文字爆炸型 | E |
| Hero — 编辑式故事叙述 | 杂志撕裂型 | F |
| Hero — 有趣的产品发布 | 弹出卡片型 | G |
| Features — 数据/指标焦点 | 大数字 | A |
| Features — 产品截图 | 交替展示 | B |
| How it works — 分步说明 | 时间线 | C |
| Features — 模块化故事块 | 本托格子型 | D |
| Features — 可浏览的功能带 | 水平滚动卡带型 | E |
| Features — 异议处理 | 问答展开型 | F |
| Pricing table | 定价表 | PRICING |
| Pricing comparison with toggle | 对比定价表 | COMPARE_PRICING |
| Testimonials | 引言墙 | TESTIMONIALS |
| Trusted brand logos | 品牌墙 | BRAND_WALL |
| Final CTA | 强力CTA区 | CTA |
| FAQ — editorial layout | 编辑排版型 | FAQ_A |
| FAQ — card grid | 全宽焦点型 | FAQ_B |
index.html — 使用 Write 工具编写。不要使用 Markdown 代码块,直接写入文件。
<html>、<head>(Google Fonts、GSAP CDN、链接到 style.css + main.js)、<body>_sections.html 的 <style> 块和 <section> HTML<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 工具编写。结构:
:root 块 — 完整的设计令牌系统:来自 $CITY_* 令牌的颜色、选定的字体、间距比例、圆角半径。这是模型从头开始编写的唯一部分。_texture.css 粘贴纹理 + 剪裁路径 CSSreferences/nav-catalog.md)所有标题字体大小使用 clamp():
clamp(2.8rem, 7vw, 7rem) — 铺张型也不超过 7remclamp(2rem, 4vw, 4rem)clamp(4rem, 10vw, 9rem)clamp(1rem, 1.4vw, 1.2rem)不要在 style.css 中添加注释——它们消耗令牌且对输出文件没有价值。
main.js — 使用 Write 工具编写。结构:
gsap.registerPlugin(ScrollTrigger)_gsap-base.js 粘贴相关函数——最低要求:
initHeroEntrance() — 错开入场英雄元素initParallax() — 至少 2 层以不同速度移动initStickySteps() 或 initBlastMenu() 或 initMagneticPill() — 匹配导航/布局ScrollTrigger.refresh()不要在 main.js 中添加注释。
assets/icons.svg — 包含 <symbol> 元素的 SVG 精灵。至少包含:徽标标记、导航切换图标、箭头、勾选标记、2-3 个与产品相关的功能图标。图标风格必须与城市美学的描边粗细和几何形状相匹配。
所有文件编写完成后,删除暂存文件:
rm -f "$_OUT/_sections.html" "$_OUT/_texture.css" "$_OUT/_gsap-base.js"
#ffffff 背景。 不在区块上,不在卡片上。暖中性色:#f5ede0。冷色:#edf0ee。深色:#08060f。卡片使用轻微色调,绝不使用纯白色。#6366f1。 颜色来自城市风格调色板。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 的选定导航栏,并完整实现其惊喜元素。.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
仓库
GitHub 星标数
17
首次出现
10 天前
安全审计
安装于
codex138
gemini-cli137
kimi-cli137
cursor137
opencode137
github-copilot137
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
118,000 周安装