參考驅動的高級登陸頁面建構器

Korean 輸出風格：對於面向 Korean 使用者的文字（HITL 問題、狀態報告、回答），請套用 $CLAUDE_PLUGIN_ROOT/docs/development/korean-style.md — 參見 §「HITL 問題編寫規則」與 §「回答·報告原則」。寫入磁碟的 Korean 檔案會由 korean-style PostToolUse 鉤子自動進行風格檢查。

透過結合三種能將專業工作與一般 AI 輸出區分開來的實務，產出生產級、自包含的登陸頁面：

視覺參考優先 — 在做出任何設計決定之前，先使用真實瀏覽器從 Pinterest（及同類圖庫）收集真實的動畫/佈局參考，然後將其濃縮為以參考為錨點的設計摘要（絕不抄襲）。
AI 影片作為設計素材 — 英雄背景是使用 Google Veo 3.1 生成的無縫循環影片，根據設計標記進行藝術指導，經過網頁後期處理，並透過隱藏循環接縫的無限循環腳本播放。
收斂，而非一擊 — 完成的頁面在報告完成之前，會通過對抗性的 screen-quality-loop 測試。

核心原則：

以參考為錨點，絕不參考抄襲 — 參考貢獻的是模式（佈局原型、動態詞彙、色板方向）；不會重現任何特定設計，也絕不交付第三方素材。
DESIGN.md 即法則 — 當 docs/design-system/DESIGN.md 存在時，其標記和 aesthetic_rules 會覆蓋在步驟 0 推導出的色調預設值。
每個外部相依項目都有優雅降級 — 無法存取 Pinterest、缺少 Veo 工具、沒有 ffmpeg、以及沒有瀏覽器，這些情況都可以存活；每種備援方案都必須在 最終報告中明確說明，絕不默默取代。
成本紀律 — 預設生成預算為恰好 1 張靜態圖片 + 1 段 Veo 影片（8 秒，veo-3.1-lite）；任何更多請求都需要使用者的明確要求（references/veo-loop-video.md §6 中有限的單次 Seam-QA 再生屬於預算的一部分，而非超支）。
動畫無障礙是沒得商量 — prefers-reduced-motion 備援、可見的暫停控制（WCAG 2.2.2）以及海報優先的 LCP 策略是強制性的，而非潤飾。

輸出位置：landing/{slug}/（交付物）+ landing/{slug}/.work/（原始片段、靜態圖、QA 證據 — 頁面絕不參考此目錄）。

🌐 語言規則：在執行此技能之前，請閱讀專案的 CLAUDE.md 並檢查 ## Language 區塊以偵測專案語言。如果專案語言並非 Korean (ko)，請將所有面向使用者的頁面文案和報告輸出翻譯成該專案語言。技術識別碼（檔案路徑、CSS 變數、類別名稱）保持不譯。如果沒有 CLAUDE.md 或 ## Language 區塊存在，則預設使用 Korean。

執行程序

步驟 0：輸入與設計色調

A. 參數解析

參數	動作
文字簡報（例如 `適用於自由工作者的 AI 記帳 SaaS`）	用作產品/品牌簡報
URL	`WebFetch` 該頁面 — 提取產品、目標受眾、現有品牌線索
`docs/planner/{NNN}-*/` 路徑	讀取規劃交付物（人物誌、KPI、螢幕設計）作為簡報
`--refs=<dir>`	使用使用者自己的參考圖片（來自 `<dir>`）；跳過步驟 1 的捕捉（分析仍會執行）
`--slug=<name>`	交付目錄名稱；否則從品牌/功能衍生出 kebab-case
`--no-video`	完全跳過 Veo — 英雄使用 CSS 動畫備援（路徑 C）
`--auto`	零 HITL — 以聲明的假設繼續進行（適用於管道使用）
(空)	掃描 `docs/planner/` 以取得最新套件；如果沒有，則要求一行簡報

B. 模糊性檢查（先思考再編碼 — 最多 1 則 HITL）

如果簡報未明確指定 (1) 目標受眾 和 (2) 單一主要轉換動作（註冊 / 購買 / 聯絡 / 下載），則帶入解釋選項詢問一次。在 --auto 模式下，選擇最可能的解釋，並在最終報告的「假設」區塊中記錄。絕不詢問超過一個輸入問題。

C. 設計單一事實來源載入

docs/design-system/DESIGN.md 存在 → 載入標記 + aesthetic_rules；下方的色調表格僅用於填補缺口。
否則 → 從簡報推導設計色調：

品牌/產品訊號	設計色調	英雄動態方向
SaaS / 開發工具 / AI 產品	深色漸層科技	緩慢極光 / 漸層漂移，稀疏粒子場
奢華 / 高級商品	編輯式奢華	巨觀材質漂移（絲綢、液態金屬），淺景深
消費者應用程式 / 生活方式 / 健康	柔和環境	柔焦場景，漂移光暈，柔和視差
金融 / B2B / 企業	自信極簡	抽象幾何，緩慢線條與網格動態，節制色板
創意工作室 / 活動 / 作品集	大膽動態	高對比形狀，掃掠色塊

載入兩個 UX 指南 — 它們管轄步驟 2–4 中的所有美學和動態決策：
- $CLAUDE_PLUGIN_ROOT/docs/ux/vibe-coding-design-guide.md（§4 提示技巧，§4.1 反 AI 美學，§4.2 以參考為錨點的提示）
- $CLAUDE_PLUGIN_ROOT/docs/ux/vibe-coding-animation-guide.md（§15 動畫無障礙，§18 AI 生成的影片背景）

D. 主要工作樹保護與開發同步

登陸頁面是規劃階段的交付物 — 在 dev 的主要工作樹中執行，與其他 dev-sync 技能相同：

PLUGIN_ROOT="${CLAUDE_PLUGIN_ROOT:-$(find ~/.claude/plugins/cache -maxdepth 3 -type d -path '*/astra-methodology/*' 2>/dev/null | sort -V | tail -1)}"
if [ -z "$PLUGIN_ROOT" ] || [ ! -f "$PLUGIN_ROOT/scripts/worktree-helpers.sh" ]; then
  echo "ERROR: CLAUDE_PLUGIN_ROOT not found. Check the plugin cache path." >&2; exit 1
fi
source "$PLUGIN_ROOT/scripts/worktree-helpers.sh"
astra_ensure_main_worktree || exit 1

然後像 /catalog-generator 步驟 0.G 那樣同步 dev（檢查分支 → 如有髒工作區則 stash → git fetch origin dev && git checkout dev && git pull origin dev → pop stash；當 dev 不存在時，回退到 main/master）。

步驟 1：參考收集（Pinterest）

在設計任何東西之前，收集 6–12 個動畫/佈局參考。完整程序、查詢配方、彈出視窗處理以及看板範本：在開始此步驟前，請閱讀 $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/reference-collection.md。

A. 解析瀏覽器後端

根據外掛範圍的順序（ego 預設 → Chrome MCP 備援；單一事實來源：$CLAUDE_PLUGIN_ROOT/docs/development/browser-backend-policy.md）：

command -v ego-browser >/dev/null 2>&1 && echo ego || echo ""

輸出為空 → 當 mcp__chrome-devtools__* 工具存在時，使用 chrome-mcp。兩者都不可用 → 捕捉備援：WebSearch 搜尋當前的登陸頁面/動畫展示描述（獎項畫廊、動態展示），並建立純文字參考看板；在最終報告中陳述「參考看板：搜尋衍生（無瀏覽器）」。

B. 搜尋與捕捉

從 {tone} + {industry} + medium 建構 4–5 個 Pinterest 搜尋查詢（參考檔案中的配方）。
每個查詢：開啟 https://www.pinterest.com/search/pins/?q={query}，關閉覆蓋模態視窗，window.scrollTo(0, 0)（ego 空白影格防護），捕捉結果網格，然後開啟前 1–2 個圖釘並捕捉其詳細視圖。
ego 模式：一個 heredoc 等於一輪，並且 一次捕捉需要三輪或更多輪（導航 → 就緒探測 → 掃掠+捕捉；絕不能壓縮成一輪，否則捕捉結果會是空白的 — 請參閱參考檔案）；任務空間 astra landing {slug}；captureScreenshot 使用絕對路徑；完成時使用 completeTaskSpace('astra landing {slug}', { keep: false }) 關閉。
將捕捉結果儲存到 landing/{slug}/design/references/ref-{NN}.png。如果 Pinterest 無法連線（登入牆持續存在 / 網路封鎖）→ 在參考檔案中列出的同類圖庫上重試相同的查詢；仍然一無所獲 → 使用步驟 1.A 的捕捉備援。

C. 視覺分析 → 參考看板

為每個捕捉提取結構化記錄（分析提示在參考檔案中）：佈局原型、英雄處理方式、動態詞彙（什麼在動、移動多慢、什麼 easing）、色板方向、字體特徵、密度、一個值得改編的獨特細節。在可用時使用 mcp__fect-mcp__vision_analyze；否則直接 Read 每個 PNG（多模態讀取）。

寫入 landing/{slug}/design/reference-board.md — 每張圖片的記錄 + 一個綜合區塊（「這些參考達成共識的內容」）。在宣稱看板存在之前，使用 [ -f ] 進行驗證。

原創性防護：看板記錄的是模式，絕非重現特定圖釘的指示。參考捕捉保留在 design/references/ 中作為內部工作材料 — 它們絕不能從 index.html 連結，也絕不能作為頁面素材交付。

步驟 2：設計方向綜合

將參考看板 + 設計色調 + DESIGN.md 濃縮成一個 已提交的設計摘要，位於 landing/{slug}/design/direction.md，其中包含以下決策：

佈局原型 — 例如全視口影片英雄 + 交錯功能帶 + 結尾 CTA。
動態詞彙 — 從參考看板提取的頁面範圍動態規則（持續時間、easing、滾動揭示樣式），並對應到 vibe-coding-animation-guide.md 的技巧。
英雄媒體計畫 — 路徑 A/B/C 決策（步驟 3 表格），加上影片的主題、情緒和相機行為。
色板 + 字體 — 如果存在 DESIGN.md 的標記，則使用；否則從色調 + 參考衍生（OKLCH 值，一個顯示字體 + 一個內文字體）。
反 AI 獨特元素 — 至少 2 個具體的獨特選擇（根據設計指南 §4.1 / DESIGN.md aesthetic_rules）：例如不對稱網格、編輯襯線配對、顆粒/噪點紋理、自訂滾動指示器、超大數字。通用的置中英雄 + 三張卡片 + 紫色漸層輸出是缺陷，而非基準。

HITL（在 --auto 下跳過）：將這 5 個決策呈現為一個緊湊摘要，並提出一個確認/調整問題。這是最後一個決策閘門 — 之後的所有操作將無人值守運行。

步驟 3：英雄循環影片製作（Veo 3.1）

在此步驟之前，請閱讀 $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/veo-loop-video.md — 其中包含提示配方、工具呼叫範本和所有 ffmpeg 命令。

A. 路徑決策

條件	路徑
`mcp__fect-mcp__veo_*` 存在且 `mcp__fect-image__nanobanana_text2img` 存在	A — 書擋循環（預設）
`mcp__fect-mcp__veo_*` 存在，但 fect-image 不存在	B — text2video + 交叉淡化循環
Veo 工具不存在，或 `--no-video`	C — CSS 動畫英雄（無影片；範本在 `references/video-integration.md`）

工具存在與否是根據工作階段的可用工具來決定（fect-mcp 伺服器是使用者層級的，並非捆綁提供 — 不存在是正常情況，而非錯誤）。記錄所選路徑；最終報告必須說明所選路徑，並針對 B/C 說明原因。

B. 路徑 A — 書擋循環（第一影格 == 最後影格）

無縫循環技巧：生成一張經過藝術指導的靜態圖片，然後讓 Veo 將它 從該影格動畫回該影格 — veo_img2video 的 lastImagePath 設定為與 sourceImagePath 相同的檔案。該片段的第一影格和最後影格像素完全相同，因此在循環時看不到接縫，並且靜態圖片還可兼任 LCP 海報。

靜態圖片：mcp__fect-image__nanobanana_text2img → landing/{slug}/.work/hero-frame.png — 16:9，色調匹配的色板，標題將放置處有平靜的負空間，無文字、無標誌、無人臉（根據參考檔案中色調的提示範本）。
片段：mcp__fect-mcp__veo_img2video — sourceImagePath = lastImagePath = hero-frame.png，durationSeconds: 8，resolution: "1080p"（1080p 需要 8 秒），aspectRatio: "16:9"，預設模型（veo-3.1-lite — 僅在 lite 輸出連續兩次失敗 Seam QA 時，才提升為 fast/完整版）。提示 = 週期性環境動態，且明顯回到起點（參考檔案中每個色調的配方；無剪輯、無新主體、無文字）。
驗證（絕不可以在沒有驗證的情況下聲稱成功）：[ -f ] 檢查 mp4 檔案 + ffprobe 持續時間 ≥ 7 秒。缺失/過短 → 重新生成一次；仍然失敗 → 路徑 B；Veo 完全報錯 → 路徑 C。
接縫 QA：提取第一影格 + 最後影格，使用 mcp__fect-mcp__vision_compare（或 Read 兩者）進行比較。有可見跳躍 → 在其上套用參考檔案中的 ffmpeg 交叉淡化循環。

C. 路徑 B — text2video + 交叉淡化循環

使用適合循環的提示配方進行 mcp__fect-mcp__veo_text2video，然後使用 ffmpeg 自交叉淡化（將最後一秒混合到第一秒；命令在參考檔案中）使其無縫。海報 = 提取的第一影格。

D. 後期製作（所有影片路徑）

使用 ffmpeg（command -v ffmpeg）：移除音訊（-an — 背景影片一律靜音；Veo 的原生音軌是冗餘的），編碼階梯 hero-desktop.mp4（1920 w，H.264 CRF 24，+faststart）+ hero-mobile.mp4（720 w，CRF 26），並產生 hero-poster.jpg（路徑 A：從 hero-frame.png 轉換；路徑 B：第一影格）。輸出產物位於 landing/{slug}/assets/video/。

無 ffmpeg → 將原始 Veo mp4 用作兩種變體；JS 交叉淡化播放器（步驟 4）會掩蓋任何殘留的接縫。在最終報告中說明缺少壓縮 — 切勿將頁面呈現為尺寸最佳化後的狀態。

預算閘門：hero-desktop.mp4 ≤ 4 MB，hero-mobile.mp4 ≤ 1.5 MB，海報 ≤ 200 KB（使用 stat -f%z / du -k 檢查）。超過預算 → 提高 CRF 並重新編碼，然後再繼續。

9:16 直式變體（第二次 Veo 生成）僅在使用者明確要求時才生成 — 預設的行動策略是 720 w 降採樣 + 海報優先載入。

步驟 4：頁面實作

在此步驟之前，請閱讀 $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/video-integration.md — 其中包含英雄標記、完整的 loop-video.js 無限循環播放器、CSS 動畫備援範本以及響應式中斷點。

A. 標記結構

在 landing/{slug}/index.html 建立符合標準的 HTML5 文件：

英雄章節：<video> 元素內嵌由 loop-video.js 驅動的 hero-desktop.mp4（預設使用 hero-mobile.mp4 作為行動版 src）；<img> 作為帶有 fetchpriority="high" 的 LCP 海報；當 prefers-reduced-motion 啟用時顯示的 CSS 動畫備援；WCAG 暫停按鈕。
功能帶：交錯的 section（標題 + 描述 + 選擇性媒體），使用 CSS scroll-reveal 覆蓋層。
CTA 區塊：最終的行動呼籲，有主要和次要按鈕，搭配檢測在視口內的 IntersectionObserver。
頁尾：極簡品牌 + 政策連結。無自我參照或 AI 署名。

B. CSS 架構

單一 assets/css/main.css（< 50 KB，壓縮後），標記為驅動變數 + 以 LOGICAL 屬性為基礎（margin-block、padding-inline — 無 margin-top/margin-left）。
響應式：行動優先（320px → 768px → 1024px → >= 1280px）。
英雄章節：min-height: 100dvh，絕對定位定錨的影片容器，覆蓋漸層（改進可讀性）。
效能：will-change: transform 僅在滾動揭示元素上；content-visibility: auto 在視口外區塊上。

C. 無限循環影片播放器

assets/js/loop-video.js 的 JS 播放器實作（完整實作的範本在影片參考檔案中）：

在 loadedmetadata 時，從持續時間減去影片的交叉淡化視窗（預設為 1.5 秒）。
timeupdate 監聽器偵測最後 N 秒 → 觸發 currentTime 無接縫回溯。
play/pause 事件將按鈕文字更新為暫停圖示或播放圖示。
prefers-reduced-motion 媒體查詢：從不使用 video 元素，僅顯示海報靜態圖片 + CSS 備援 + 暫停控制。

D. 路徑 C 備援（無影片）

當 --no-video 設定或影片工具不存在時：英雄區域使用全視口 CSS 動畫（根據影片參考檔案 §4，每個色調都有範本）。無 JavaScript 影片播放器；海報是色彩漸層或 canvas 生成的紋理。

E. 響應式行為

斷點	影片來源	佈局
< `768px`	`hero-mobile.mp4`（720 w）	堆疊帶狀，緊湊內邊距
`768px`–`1024px`	`hero-mobile.mp4`（仍然 720 w）	2 列網格，中等內邊距
`1024px`–`1280px`	`hero-desktop.mp4`（1920 w）	完整 12 欄網格，標準內邊距
≥ `1280px`	`hero-desktop.mp4`（1920 w，若可用則為 4K）	寬螢幕佈局，最大內容寬度 `container`

F. 零 HITL 實作

在步驟 2 的設計閘門之後，所有實作決策都來自 design/direction.md（佈局、色板、動態）和 assets/video/（準備好的素材）。無 HITL，無捷徑，無半完成狀態 — 頁面在步驟 5 可以 QA 之前不得儲存。

步驟 5：螢幕品質收斂（screen-quality-loop）

在報告完成之前，登陸頁面必須通過對抗性 screen-quality-loop。閱讀 $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/screen-quality-loop.md 以取得完整程序。

A. 執行收斂迴圈

source "$CLAUDE_PLUGIN_ROOT/scripts/screen-quality-loop.sh"
run_sql "landing/{slug}"

這個腳本會：

開啟 index.html 並擷取桌面 + 行動 + prefers-reduced-motion 的螢幕截圖。
對抗 LLM 評分（視覺像素規格、佈局移位、對比度、動畫降級）。
回寫修正（精確 CSS 數值、HTML 調整、壓縮）。
最多重複 3 次，或直到分數 ≥ 門檻值。

B. 手動品質檢查

如果 screen-quality-loop.sh 不可用或是非互動式的，請執行這些檢查：

LCP 海報存在：<img> 帶有 fetchpriority="high"，在影片 <video> 之前載入。
暫停按鈕可見且可點擊：WCAG 2.2.2（暫停、停止或隱藏）。
reduce-motion 備援：影片未載入，靜態備援可見。
無滾動抖動：100vh / 100dvh 已正確處理。
無控制台錯誤：使用 Read 檢查瀏覽器主控台內容。

C. 最終驗證

[ -f landing/{slug}/index.html ]
[ -f landing/{slug}/assets/video/hero-poster.jpg ]
[ -d landing/{slug}/assets/ ]

步驟 6：報告

產生一份報告，說明所建立內容的結構。輸出至 landing/{slug}/report.md：

# 登陸頁面：{slug}

**色調**：{tone}
**路徑**：{A|B|C} — {原因}
**參考**：{數量} 張圖片（看板：{board}）

### 假設（如果 HITL 被跳過）
- 目標受眾：{assumed_audience}
- 主要動作：{assumed_action}

### 素材
- 影片：hero-desktop.mp4（{size} MB），hero-mobile.mp4（{size} MB）
- 海報：hero-poster.jpg（{size} KB）
- [無 ffmpeg] 影片未壓縮 — 請參閱注意事項。

### 備援狀態
- 瀏覽器：{ego|chrome-mcp|search-fallback}
- Pinterest：{captured|retried-on-siblings|blocked}
- Veo：{path-A-executed|path-B-executed|path-C-fallback}
- ffmpeg：{present|absent}

### 為滿足設計方向所做的設計決策
- 佈局：{佈局原型}
- 動態：{動態詞彙}
- 獨特元素：{2+ 個反 AI 元素}

### 收斂 QA
- 迴圈執行了 {N} 輪。
- 再次檢查：{通過 / 未通過}
- `prefers-reduced-motion`：{通過 / 未通過}
- 暫停控制：{通過 / 未通過}
- 已知問題：{任何剩餘問題}

參考檔案（在對應步驟之前閱讀）

參考收集 — Pinterest 查詢、彈出處理、看板格式
影片整合 — 英雄標記模板、loop-video.js 播放器、CSS 備援
Veo 循環影片 — 提示配方、工具呼叫模板、接縫修復 ffmpeg
螢幕品質迴圈 — 收斂協定、LLM 評分、緩衝區溢位防護

常見問答

問：如果我沒有任何瀏覽器（ego / chrome-mcp）怎麼辦？ 答：技能會優雅降級到搜尋衍生的參考看板。頁面仍會建構，但參考是文字描述而非視覺捕捉。這種降級狀態會記錄在步驟 6 的報告中。

問：--auto 旗標做什麼？ 答：它完全跳過使用者問題（HITL），轉而根據簡報對目標受眾和轉換動作做出最佳推測。它還會跳過步驟 2 的設計方向 HITL 確認。用於管道/自動化情境。

問：使用 Veo 花多少錢？ 答：每次執行預設為 1 次 nanobanana_text2img 呼叫 + 1 次 veo_img2video 呼叫。以 veo-3.1-lite 模型為目標以控制成本。只有在使用者要求時，或當 lite 模型連續兩次無法通過接縫 QA 時，才會提升到更高的模型層級。

問：我可以使用自己的參考圖片嗎？ 答：可以，使用 --refs=<dir> 旗標。這會跳過 Pinterest 捕捉，但您的圖片仍會經過視覺分析，產生的參考看板。圖片應為 PNG 或 JPEG 格式。

問：可以無影片嗎？ 答：可以，使用 --no-video 旗標會產生全視口 CSS 動畫英雄，非常適合不需要影片行銷的簡單登陸頁面或品牌。

在你喜歡的 AI 中提問

說明文件