落地頁建置器
理念
此技能打造的落地頁面視覺上大膽張揚——不是典型的巢狀容器、卡片網格、可預測的網路模板。每個輸出都應該感覺像一個刻意的設計產物：
- 佈局大膽 — 使用剪裁路徑分隔線而非水平線。文字溢出螢幕邊界。元素突破其網格格局。全視口標題。
- 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 填入城市色彩代幣 + 產品名稱，另存為 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 個英雄區模板（全屏鋪張/分屏張力/極簡下降） | 步驟 4：根據使用者字型偏好選擇變體，複製並調整 |
assets/sections/features-variants.html | 6 個特色區模板（大數字/交替展示/時間線/本托格子/水平滾動/問答展開） | 步驟 4：根據內容類型選擇（統計數據 → 大數字，運作方式 → 時間線） |
assets/sections/testimonial-variants.html | 6 個見證區模板（緊湊卡片/單列引用/馬賽克拼貼/滾動橫條/對話氣泡/頭像牆） | 步驟 4：根據見證數量與視覺風格偏好選擇 |
assets/sections/conversion-variants.html | 定價表、常見問題、品牌牆、強力 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 組合（先做這個，在寫任何檔案之前）
目標是避免將預綁定資產的程式碼作為模型標記輸出。 相反地，使用 Bash 將現成資產複製並導入到輸出檔案中。僅有產品特定的內容（文案、代幣、覆寫）由模型撰寫。
步驟 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"
# 剪裁路徑：複製所有類別，模型透過類別名稱選擇要套用的
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 → 定價 → 常見問題 A → CTA
- 代理商作品集：英雄 A → 特色 B → 見證 C → CTA
- 開發者工具：英雄 B → 特色 C → 特色 A → 見證 A → 定價 → 常見問題 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 |
| 受信任的品牌標誌 | 品牌牆 | BRAND_WALL |
| 最終 CTA | 強力 CTA 區 | CTA |
| 常見問題 — 編輯排版型 | 編輯排版型 | FAQ_A |
| 常見問題 — 全寬焦點型 | 全寬焦點型 | FAQ_B |
4c — 編寫輸出檔案
index.html — 使用「寫入」工具編寫。無 Markdown 程式碼區塊，直接寫入檔案。
- 文件結構：
<html>、<head>（Google Fonts、GSAP CDN、連結至 style.css + main.js）、<body> - 與所選導航樣式匹配的 Nav 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區塊 — 完整的設計代號系統：來自$CITY_*代號的顏色、選擇的字型、間距比例、圓角半徑。這是模型從頭編寫的唯一部分。- 貼上來自
_texture.css的紋理 + 剪裁路徑 CSS - 與所選導航樣式匹配的 Nav 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 添加註解——它們消耗標記，對輸出檔案沒有價值。
main.js — 使用「寫入」工具編寫。結構：
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。 顏色來自城市風格色板。 - 獨立決定每個區塊邊界的轉場類型。 每對相鄰區塊都有其自身的視覺關係——不要在所有地方重複使用相同的剪裁路徑類別。使用者在選項預覽中選擇一個轉場方向（幾何銳利 / 有機柔軟 / 覆蓋混合 / 極簡線條 / 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 片段和剪裁路徑必須來自技能的資產檔案——而不是從頭重新實作。
.line-wrapCJK 修正。 每當頁面有中文或日文文字，並使用.line-wrap { overflow: hidden }進行線條揭示動畫時，請添加padding-top: 0.15em; margin-top: -0.15em;以防止 CJK 文字頂部的升部被裁剪。- 無複製網格。 當一個區塊包含多個重複項目（特色行、定價卡片、常見問題項目、見證）時，它們不應全部共享相同的視覺處理。一個項目應成為焦點——更大、強調或具有不同的佈局——而其他項目則形成配角。一個區塊應感覺像一張具有視覺層次的海報，而不是一個由相同行組成的試算表。這是頁面看起來「模板化」而非經過設計的最大單一原因。
參考檔案
references/city-styles.md— 每個城市美學的 exact 設計參數（字型、顏色、紋理、動畫、圖示）references/nav-catalog.md— 4 種導航樣式，附完整實作說明與 GSAP 程式碼references/imagery-derivation.md— 如何將任何非城市描述（場景、時代、材質、情感）轉換為具體的設計代號系統。每當使用者描述的內容不屬於 57 張城市卡片之一時，請閱讀此檔案。references/product-demo-hero.md— 何時以及如何在英雄區（變體 D）中建立時間驅動的產品工作流程示範。包含場景設計指南、三幕結構、onEnter() 回呼模式和產品類型 → 場景對應表。每當使用者想在英雄區展示其產品流程時，請閱讀此檔案。
事實與降級
模板裡的評價、客戶 Logo、人數與價格僅為結構範例；沒有證據就刪除或換成真實產品說明，不編造背書。實作需支援鍵盤操作、prefers-reduced-motion 和指令碼/CDN 載入失敗時的靜態可讀內容。視覺驗收說明實際檢查的視口與狀態；未渲染時不能聲稱視覺已通過。