Aston1690/landing-page-skill

Landing Page Director

透過明確的設計決策（而非自由形式的樣式設定）來建立登陸頁面。品質來自於流程順序：理解簡報、縮小視覺方向、鎖定系統、建立參考、忠實地轉譯，並檢查渲染結果。

此技能擁有登陸頁面工作流程的主導權。支援的圖片、翻譯、測試、品牌、文案或框架技能可以貢獻專業工作，但不得取代此工作流程或引入第二個競爭的藝術方向。

預設執行方式

使用此總監進行藝術指導以及完整的建置/審查循環。如果已安裝並設定好 design-harness，則將其用於隔離實作、儲存上下文、瀏覽器證據及限制範圍的修訂。否則直接執行並記錄這些階段；不要聲稱執行了可執行的 harness 檢查。使用者無需呼叫第二個技能。被指派單一階段的子任務必須返回其父任務，而不要啟動另一個編排循環。

相容性

使用內建的圖片生成功能建立視覺參考，並使用具備瀏覽器功能的檢查工具進行最終的視覺品質檢查。當 imagegen-frontend-web、image-to-code、brand-consistency 和 playwright-visual-testing 可用時，協調使用它們。對於完整的登陸頁面建置和重大重新設計，預設使用 GSAP 編舞，並為區域性互動反饋使用 CSS。尊重明確的靜態請求、保留限制和現有的必要動態系統。

核心合約

• 將已批准的文案、事實聲明、標誌、品牌資產、頁面順序和來源模板要求視為鎖定。
• 當客戶網站、內容來源、品牌指南、標誌、字型、提供的媒體、產品視覺效果和相關參考資料尚未提供時，主動詢問；切勿僅因第一則訊息中未附加任何資料，就假設不存在任何來源素材。
• 在提出藝術方向之前，閱讀並盤點所有提供的文件、URL、圖片、品牌檔案和儲存庫來源。
• 切勿編造統計數據、推薦、獎項、客戶、認證、地點、聯絡方式、產品畫面或證明。
• 當無法安全省略時，使用 [待確認] 標記遺失的資訊。
• 在實作之前建立一個連貫的視覺語言。
• 除非使用者請求視覺批准檢查點，否則自行處理常規的藝術方向和參考選擇決策。誠實記錄由代理選擇的參考資料；切勿稱之為使用者批准。將內容不確定性與鎖定要求的衝突升級，而不是一般的設計選擇。
• 偏好受控、易於閱讀的層次結構，而非炫技：高品質的結果不能依賴於巨大的字體、擁擠的主視覺區域、裝飾性標記或過大的品牌標誌。
• 將動態視為該視覺語言的一部分：賦予它一個目的、個性、時間系統和減少動態的對應方案。
• 只使用一個主要的品味方向。不要混合多種風格技能或情緒板。
• 當視覺品質是核心時，在編寫程式碼之前生成並嚴格審查視覺參考。
• 建立一個可運作的頁面，而不是一個只有靜態外觀、控制項無作用的模型。
• 在報告完成之前，以桌面和行動裝置寬度檢查真實渲染的頁面。

工作流程狀態機

依序遵循階段。僅當使用者已提供該階段所需的所有資訊時，才可跳過該階段。不要要求使用者重複已存在於簡報、檔案、對話、品牌工具包或參考 URL 中的資訊。

1. 閱讀並分類簡報

在向使用者詢問任何事項之前，先盤點對話和工作區中已有的所有內容。當來源素材集缺失或不完整時，請閱讀 guided-intake.md 並執行其來源素材預檢。

來源盤點涵蓋：

• 客戶名稱、當前網站或來源頁面 URL，以及任務是新建頁面、重新設計、複製還是擴充
• 已批准的內容文件、文案狀態、所需的頁面/區塊順序、聲明、法律文字及主要轉換目標
• 品牌指南、標誌、商標、顏色規格、字型檔案和授權、圖示系統及先前的宣傳材料
• 提供的照片、影片、插圖、圖表、產品截圖、UI 畫面、推薦、證明及合規材料
• 競爭對手或靈感參考資料，包括客戶喜歡和不喜歡的內容
• 現有的儲存庫、框架、元件系統、技術限制、分析/表單目標及部署期望

如果沒有任何內容，則記錄該專案為全新專案，並在未假設已提供資產的情況下繼續進行。如果使用者表示存在網站、文件、資料夾或資產集但無法存取，則在做出依賴於該資訊的決定之前，請求提供 URL、附件、路徑或權限。

分類任務：

• 新建且視覺未定義： 執行引導式輸入和方向選擇。
• 新建且有明確的視覺簡報： 確認已編譯的簡報，然後進行參考。
• 參考主導或複製： 分析參考並保留要求的結構、內容和互動模型。
• 重新設計： 在提出方向之前審核當前頁面；保留可運作的功能和鎖定的文案。

在修改程式碼之前，檢查儲存庫及其指令檔案。除非使用者明確要求遷移，否則保留現有的框架、套件管理器、元件慣例和執行環境。

2. 必要時執行引導式輸入

當設計決策被委派時，從客戶背景中選擇未解決的視覺偏好並記錄您的推理，而不是進行訪談。僅在使用者想要協作式方向選擇或無法安全推斷出重要的要求時，才使用以下問題。

來源素材預檢發生在設計提問之前，且不計入設計問題的限制數量。不要詢問已存在於對話、工作區、當前網站或連接來源中的素材。

一次問一個決策。每個問題應包含兩個或三個互斥的選項，將推薦選項放在第一位，用一句話解釋其視覺或商業效果，並允許自由形式的替代方案。保持可見的進度指示，例如「方向 1/4」。

僅優先處理未解決的決策。一個典型的模糊簡報需要四個決策：

1. 視覺方向
2. 色彩氛圍
3. 字體個性
4. 主視覺/佈局結構

僅當簡報無法推斷出關於圖片、動態或轉換架構的問題時，才詢問這些問題。當動態在商業或敘事上很重要時，詢問體驗應該是內斂的、表現性的還是滾動主導的，並解釋效能取捨。除非使用者要求更深入的工作坊，否則將訪談控制在六個問題或更少。

在重要的方向選擇仍未解決時，不要開始編寫程式碼。

3. 提出三個命名的方向

對於未定義的品牌方向，提出三條真正不同的路線——而不是同一佈局的三種顏色變體。每個方向必須指定：

• 一個令人難忘的名稱
• 策略理念和目標受眾印象
• 字體配對或字體類別
• 具有代表性顏色角色的調色板氛圍
• 主視覺構成
• 主視覺密度、標題字體大小範圍、首屏內容預算，以及刻意延遲到摺疊以下的內容
• 圖片處理方式
• 導航和頁尾中的標誌處理方式，包括背景處理和最大視覺佔用面積
• 表面、邊框、圓角和陰影特性
• CTA 處理方式，以及主要轉換目標如何在沒有裝飾性雜亂的情況下在視覺上脫穎而出
• 動態特性
• 主要的取捨

當設計被委派時，簡短比較這些路線，選擇最強的一條並生成其主視覺參考。否則推薦一條路線，並為請求的協作檢查點提供替代方案。當一條選定的路線足以解決任務時，避免生成完整的三個方向。

4. 編譯並鎖定設計簡報

閱讀 design-brief-schema.md。使用該結構在專案內寫入 DESIGN-BRIEF.md。

閱讀 visual-calibration.md 以建立具體的視覺目標和修正循環。當簡報只說了「高級」、「現代」或「讓它更好」時，這點尤其重要。

將選擇翻譯成實作就緒的規則：命名字型、字重、字體比例、顏色權杖、網格、最大寬度、間距節奏、圓角、邊框、陰影、圖片規則、區塊節奏、交互、動態權杖、減少動態及斷點轉換。

同時鎖定那些常導致後期被拒絕的實際組合約束：

• 桌面和行動裝置上主視覺標題的最大寬度和大小
• 首屏優先級順序以及文字、媒體、證明和動作的密度預算
• 頁首高度加上最大標誌高度和寬度；當標記必須在沒有背景的情況下放置時，使用真正透明的資產
• 主要 CTA 透過尺寸、對比度、位置和支援上下文來突出顯眼
• 索引、分隔線、邊框、圖示和文字之間的最小間距
• 特定區塊的組合規則，以便證明、成功、流程和轉換區塊不會變成同一種卡片網格的不同變體
• 明確的已批准處理方式、不喜歡的處理方式以及被拒絕的樣式，這些不得在頁面後續部分再次出現

區分三種資訊：

• 已鎖定： 已批准的文案、品牌事實、提供的資產、選定的方向。
• 衍生： 設計權杖、響應式行為、組合規則。
• 未解決： 仍在等待確認的資訊。

當此技能的捆綁腳本可存取時，執行 node scripts/validate_design_brief.mjs <project>/DESIGN-BRIEF.md。在繼續之前，修正缺失或佔位符區塊。

5. 建立以圖片為主的區塊參考

載入 imagegen-frontend-web，然後使用內建的圖片生成功能。

規劃頁面的敘事。首先生成並嚴格審查主視覺參考，在將其擴展到其他區塊之前修正薄弱的構圖。為每個計劃中的區塊生成一個單獨的、大的、橫向的參考圖片。一個有七個區塊的頁面將收到七張區塊圖片。生成新的細節參考，而不是從全頁合成圖中裁剪小片段。

在每個參考中保持以下項目不變：

• 調色板和顏色角色
• 字體配對和排版個性
• 網格邏輯和間距節奏
• 邊框、圓角、圖示和表面語言
• 圖片處理和藝術指導

刻意變化區塊的構圖。預設避免重複使用左文右圖、卡片網格、便當容器和過大的置中標題。

將專案相關的參考保存在 design-references/ 目錄下，並使用有序的名稱，例如 01-hero.png、02-proof.png 和 03-product.png。將已批准的參考視為視覺事實來源。

在實際的視口裁切下審查參考，而不僅僅是孤立的板子。在實作之前，確認：

• 主視覺有一個主導訊息、一個主導動作，並且沒有與證明、圖片、標籤或裝飾性裝置形成競爭性簇。
• 顯示字體在正常觀看大小下感覺自信，而不是過大到超出畫布。
• 頁首的標誌在光學上從屬於導航，並且不會引入意外的白色矩形或不匹配的背景。
• 最終的轉換區塊是一個經過設計的時刻，具有足夠的對比度和視覺重量，而不僅僅是置中的文字和一個按鈕。
• 編號行、時間軸步驟和帶規則的列表在其線條的兩側都有呼吸空間。
• 沒有使用裝飾性符號作為構圖或含義的替代品。

方向選擇和參考審查是不同的檢查點。一個命名的路線並不代表其執行效果良好。如果使用者拒絕某個參考，則進行修改；不要從被拒絕的構圖開始編寫程式碼。

靜態圖像無法完全指定時間。對於每個會移動的區塊，在設計簡報中添加簡潔的動態註釋：觸發方式、順序、空間變化、持續時間、緩動、重複、行動裝置適配及減少動態的結果。不要僅僅因為參考包含深度或分層圖像就發明動畫。

如果使用者請求了視覺批准，則顯示參考並在該檢查點等待。否則在嚴格審查後選擇參考並自主繼續。在此工作流程中，由代理接受的參考可以作為實作的事實來源，但不得將其描述為使用者批准的。

6. 將參考轉譯為程式碼

載入 image-to-code，並分析每個已批准的參考，以了解其排版、間距、顏色、構圖、圖片、元件、響應式意圖和交互提示。

在組合區塊之前，為以下項目實作語意權杖：

• 背景、前景、灰階文字、強調色、邊框和表面顏色
• 顯示和正文的字體系列
• 字體比例和行高關係
• 間距節奏和內容寬度
• 圓角、邊框和陰影層級
• 動態持續時間和緩動

將頁首和主視覺作為第一個視覺片段來實作，並在轉譯其餘區塊之前以 1440 和 390 像素檢查它們。此時修正標誌比例和背景、主視覺密度、標題換行、CTA 重量和摺疊構圖，以免薄弱的首屏影響整個頁面。

在可用時使用 logo 的內建透明圖像資產。CSS 混合、白色容器、裁剪或濾鏡不能替代移除不想要的內嵌背景。根據其可見標記調整 logo 大小，而不僅僅是原始點陣圖尺寸。

在帶有規則或編號的元件中，在數字與分隔線或內容邊緣之間保留明確的間距。檢查渲染結果中的光學間距；數學上相等的填充在細規則附近仍然可能看起來很擁擠。

建立語意化、可存取的…

[因原文截斷，此處省略]