Aston1690/landing-page-skill

落地頁面建置器

建立完成的頁面，而不是提示、線框圖、情緒板或部分範例。交付具有真實瀏覽器 QA 支援的可用程式碼。高品質意味著品牌專屬的決策、出色的排版/構圖/圖像、轉換清晰度、響應式工藝、有目的的動畫、無障礙性、效能和事實正確性。

呼叫時，讀取上方 metadata.version 並在專案簡報中記錄 landing-page v<版本>。在完成報告中重複該確切版本，以便每個生成的落地頁面都能追溯至產生它的技能版本。

嚴格的輸出契約

交付：

• 在新的或明確核准的現有專案中，提供完整的響應式實作；
• 精確保留用戶提供的文案；僅在用戶明確要求時才撰寫、編輯或重組文案；
• 有效的品牌系統、資產清單/出處說明，以及整合說明；
• 當圖片生成或已核准資產可用時，使用實際圖像而非佔位符；
• 對於完整建置，預設提供有目的的 GSAP 動畫編排、捲動觸發的區塊移動和控制項微互動，但需遵守文件中的模式例外；
• SEO/OG 中繼資料、語意結構、無障礙狀態和最佳化的媒體資源；
• 瀏覽器測試過的用戶視口、斷點邊界、平板、窄螢幕手機和常見手機狀態；
• 預設部署至 Vercel，然後進行線上桌面/行動裝置驗證；僅在身份驗證或其他實際障礙阻止部署時才詢問。

永遠不要虛構聲明、指標、資格證明、推薦、客戶標誌、受監管的措辭、產品、螢幕截圖、聯絡方式或表單成功訊息。

必需的技能路由

在建置前載入：

1. frontend-design 用於品牌特定的藝術指導和視覺論點。
2. design-taste-frontend 用於反劣質實作和響應式預檢。
3. imagegen-frontend-web 僅在權威模式矩陣根據以下條件判定為需要時：視覺模糊性、以圖像為主導的方向、請求的概念，或核准的資產不足。
4. 此 landing-page 技能用於編排、建置、QA 和交付。
5. 當官方/提供的資產庫存無法支援已核准的視覺方向時，使用可用的生產級圖片生成能力或 media-use。
6. imagegen-frontend-mobile 僅用於在行動應用程式的行銷頁面上，明確標示為概念性應用程式螢幕媒體或已核准的產品螢幕概念。永遠不要用它來設計響應式行動網頁，或暗示生成的螢幕是已驗證的產品功能。

閱讀 references/frontend-skill-stack.md 了解技術堆疊衝突規則。

專案模式決定

閱讀 references/policy-matrix.md。它是 Imagegen、GSAP、保存、核准、整合安全、視口覆蓋範圍和品質關卡路由的唯一權威來源。從其六種模式中選擇一種，並記錄已決定的決策及其理由。此處以外沒有其他敘述可以覆蓋該矩陣。

當用戶說「從頭開始」或「不要觸碰先前的建置」時，建立一個唯一命名的專案，且永遠不要編輯先前的工作。

階段 1：起始引導

一次只問一個簡短的問題。切勿將多個欄位合併成一個段落或問卷。等待回答後再問下一個真正必要的問題。

使用此順序，跳過任何已提供或可安全推斷的項目：

1. 這是為哪個公司/產品和官方網站建立的？
2. 最終用戶核准的文案在哪裡？文案是必需的，且需精確保留。
3. 品牌指南、標誌和已核准的資產（如果有的話）在哪裡？
4. 這是新的獨立建置還是現有專案的編輯？
5. 僅當提供的網站/文案無法回答且會實質阻礙實作時，才詢問關於目標受眾、CTA 目的地、整合或合規性的問題。

不要問文案是否可以重寫。不要主動提供撰寫或變更文案。撰寫、編輯或重構僅在用戶明確要求時才啟用。不要詢問是否要部署；Vercel 部署是預設選項。

閱讀 references/intake-brand-assets.md 並遵循其來源層級、標誌復原、品牌指南回退、合規性、整合和出處規則。

階段 2：證據與品牌審計

引導完成後：

1. 閱讀專案說明、已核准的簡報/內容、先前的核准和提供的參考資料。
2. 在真實的瀏覽器中打開官方網站（如果有的話）；否則記錄新品牌/無網站的情況，並根據提供的上下文繼續進行。
3. 提取計算出的字體/顏色、標誌變體、間距、網格、圓角、按鈕、圖示、圖像、導覽、表單、頁尾、響應式行為和動畫。
4. 復原並視覺驗證官方的 SVG 或透明高解析度 PNG 標誌。如果現有標誌不可用，向用戶詢問。如果沒有標誌存在，確認純文字產品名稱處理方式是否可接受，並記錄標誌設計超出範圍。永遠不要重新繪製或生成客戶標誌。
5. 一起提取文件中的文字和圖像；保留圖像與文案的關係。
6. 建立已驗證的資產清單。
7. 如果不存在品牌指南，建立一個簡潔的、由代理程式撰寫的專案指南，並誠實地標記它。

對於受監管/高度信任的工作，保留提供的免責聲明、授權、獎項措辭、資格、同意和資格證明，除非編輯獲得明確授權。

階段 3：內容與轉換架構

在設計之前建立內容清單：

• 每個區塊的來源支援的標題/正文/CTA/宣稱；
• 區塊任務：吸引、解釋、證明、區別、回答或轉換；
• 證據來源或未解決的佔位符；
• 預期的視覺/媒體和資產狀態；
• 主要轉換路徑和 CTA 目的地。
• approval_status 和 verification_status 分別針對事實性宣稱、推薦、指標、資格證明和受監管的措辭進行追蹤。

預設內容政策是精確保留用戶提供的文案。僅在用戶明確要求編輯或撰寫時，才能選擇 authorized_editing 或 agent_draft_unapproved。由代理程式撰寫的草稿保持未核准狀態，且不能包含未經支持的宣稱。

僅使用能解答實際轉換問題的區塊。不要機械地包含英雄區 + 信任區 + 三張卡片 + 推薦區 + 常見問題區。每個區塊一個主要想法。在現有專案中保留已核准的資訊架構，除非獲得授權進行變更。

階段 4：設計簡報與 Imagegen

撰寫程式碼前的簡報：

• 目標受眾、轉換目標、事實來源、專案模式；
• 一個主題特定的視覺論點和敘事主線；
• 調色盤、排版角色、網格/間距、形狀/元件語法；
• 圖像等級、資產地圖、圖片生成計畫、標誌性元素；
• 桌面/平板/手機的首屏和複雜區塊行為；
• 具有每個序列目的地的動畫故事板；
• 明確的避免清單和驗收標準。

如果該方向可以原封不動地用於不相關的品牌，則拒絕該方向。

當政策矩陣判定開啟 Imagegen 時，閱讀 references/imagegen-production.md：

1. 使用 imagegen-frontend-web 並宣布選擇的參考數量。
2. 為每個選擇的區塊生成並檢查一個單獨的水平參考圖。
3. 在保持一個品牌世界的同時，變化構圖和密度。
4. 通過用戶檢查點（請求的/後果性的權衡）或代理程式接受關卡（自主、可逆、有來源支援）來鎖定方向。記錄使用了哪種核准模式。
5. 以真實的長寬比分開生成/解析生產資產，不要嵌入文字、標誌、宣稱或浮水印。UI 被排除在外，除非是政策路由、明確標示的概念性應用程式螢幕案例。
6. 檢查、裁切、最佳化、添加替代文字，並記錄出處。

根據敘事效用、可見重複性、品牌特異性和資產品質來評判圖像，而不是配額。一個經過深思熟慮的、以排版為主導或資產豐富的頁面可以跳過生成並附上記錄的理由；一個無意中充斥文字或庫存圖片的通用頁面則不合格。

階段 5：靜態實作與核准

選擇能滿足簡報的最簡單技術堆疊：

• 保留現有儲存庫的框架、樣式、路由、元件、分析和資產管道；
• 對於真正靜態的頁面，使用語意 HTML、外部 CSS 和外部 JS；
• 僅在現有架構、可重用元件、整合、狀態或複雜互動證實有必要時，才使用 React/Vite/Next；
• 在導入依賴項之前驗證它們。

在動畫之前完成靜態頁面。它必須已具備：

• 正確的文案、已驗證的標誌/資產、真實的 CTA 目的地；
• 一致的代碼記號和元件語法；
• 在用戶視口下受控制的排版和換行；
• 足夠的構圖多樣性，以避免可見重複，但沒有數值版面配額；
• 有意的圖像裁切和保留的尺寸；
• 可用的導覽、表單/連結、焦點和互動狀態；
• 有意的響應式重排，而不是偶然的堆疊；
• 沒有損壞的媒體、溢出、裁剪、虛假 UI、佔位符或來源殘留物。

在開始 GSAP 之前，對靜態構圖進行螢幕截圖 QA 並修復。

階段 6：GSAP 生產階段

對於每個完整建置和實質重新設計，閱讀 references/gsap-motion.md；在簡報中規劃動畫，並在靜態構圖 QA 之後實作它。

動畫在政策矩陣下對完整建置預設為開啟。交付英雄區動畫編排、針對現有互動控制項的內容特定區塊移動和反饋。根據品牌調整強度。有效的靜態/運行時/保存限制可能會改變這一點；沒有明確的動畫請求並非跳過的理由。將運行時觀察記錄在 QA/motion-review.md 中；僅憑螢幕截圖無法通過動畫驗收。

如果腳本失敗或載入緩慢，保持關鍵內容可見。不要使用原始的 window 捲動監聽器。驗證活躍分頁的動畫，因為背景分頁會限制計時器。

階段 7：瀏覽器 QA

在本地運行頁面並檢查真實的螢幕截圖和狀態：

• 用戶的實際視口、每個版面斷點邊界、一個平板、一個窄螢幕手機和一個常見手機；375px/390px 是預設值，而非通用要求；
• 首屏、多個頁面中間區塊、最終 CTA/頁尾；
• 活躍和靜止的動畫狀態以及減少動畫模式；
• 選單、錨點、表單、摺疊面板、標籤頁、輪播和鍵盤使用；
• 在排版重要的地方檢查計算出的字體系列/粗細；
• 圖像載入/自然尺寸、裁切、替代文字；
• 水平溢出、裁剪、主控台/網路錯誤、CLS 風險；
• 表單/CTA 目的地和成功/錯誤行為。使用沙盒/測試端點和合成資料。未經明確核准，永遠不要提交真實的潛在客戶、CRM 記錄、付款、電子郵件或分析事件。

在交接前修復缺陷。建置通過不等於設計 QA。

階段 8：高品質關卡

閱讀 references/premium-quality-gate.md 並根據證據評分：

1. 品牌特異性
2. 轉換和敘事
3. 排版
4. 構圖和間距
5. 圖像和藝術指導
6. 元件工藝
7. 響應式設計
8. 動畫
9. 無障礙性和完整性
10. 效能和生產就緒度

使用二進位關鍵檢查加上有證據支持的 0/5/8/10 錨點。沒有任何適用的類別得分低於 8/10；目標是整體 9 分以上。僅在有書面理由時才允許使用 N/A，包括在一個刻意設計的靜態頁面上的動畫。為每個分數引用螢幕截圖、DOM、審計或測試證據。任何關鍵拒絕標準都會導致頁面失敗，無論平均分數如何。修復最薄弱的適用類別，重新運行證據，並重新評分。

如果用戶稱該作品為基礎、一般或糟糕，則使當前的藝術方向失效。停止微調，找出系統性原因，重置論點/參考/首屏，重建，並重新進行 QA。

階段 9：SEO、效能與部署

在交付之前：

• 一個 H1、邏輯的標題結構、標題、描述、標準鏈結、OG 中繼資料和網站圖示；
• 響應式最佳化的圖像、適當時的英雄區優先載入/預載入、折疊線以下的懶加載媒體；
• 最多兩個合理的字體系列和僅需要的字重；
• 語意元素、標籤、替代文字、對比度、焦點、鍵盤和減少動畫支援；
• 沒有虛假整合、未經驗證的宣稱、主控台錯誤、損壞的鏈接或未解決的機密；
• 帶有文案/資產/標誌/圖片生成/整合出處的來源說明。

預設情況下，使用專案現有的 Vercel 配置或一個隔離的新專案名稱，將每個完成的落地頁面部署至 Vercel。如果身份驗證、所有權、機密或其他實際障礙阻止部署，僅就該障礙進行詢問。在真實的瀏覽器中，於桌面和行動裝置上驗證確切的線上別名；檢查標題/內容標記、資產、導覽、表單、溢出、主控台、動畫和別名所有權。僅 CLI 成功或 HTTP 200 並非證明。

反劣質拒絕清單

拒絕：

• 通用的紫色/藍色 AI 漸層、斑點、無意義的玻璃卡片、浮動的 3D 填充物；
• 不相關的庫存握手照、虛假的儀表板、發明的圖表/KPI、虛假的社交證明；
• 沒有品牌理由的巨大或壓縮的標題、細小的正文文字、尷尬的換行；
• 相同的三列卡片行、重複的版面系列、過多的藥丸形狀/圓角/陰影；
• 諸如「革新」、「釋放」、「下一代」、「無縫地」或模糊的 CTA 標籤等文案；
• 在生產圖像中出現的文字/標誌/UI；
• 僅是桌面版垂直堆疊的行動版；
• 用來掩蓋薄弱靜態設計的動畫；
• 唯一目的只是填充空間的裝飾元素。

偏好經過驗證的品牌資產、主題特定的圖像、受控制的排版、多樣但連貫的構圖、一個令人難忘的標誌性元素、有目的留白、清晰的證據和一個決定性的轉換路徑。

參考地圖

需求	閱讀
權威的專案模式路由	references/policy-matrix.md
引導、網站/品牌/標誌/內容/資產/整合	references/intake-brand-assets.md
前端技術堆疊路由/衝突	references/frontend-skill-stack.md
圖片生成生產工作流程	references/imagegen-production.md
GSAP 動畫生產工作流程	references/gsap-motion.md
高品質關卡評分	references/premium-quality-gate.md

環境變數

此技能需要以下環境變數才能完全運作。請確保它們在您的環境中已設定。

• ANTHROPIC_API_KEY: 用於存取 Anthropic API。
• GITHUB_TOKEN (可選): 如果從 GitHub 儲存庫提取資產，可能需要。
• VERCEL_TOKEN (可選): 如果使用 Vercel API 進行部署，可能需要。

安裝與設定

1. 確保您的 AI 代理程式環境已設定上述必要的環境變數。
2. 將此技能新增至您的代理程式配置或允許的技能清單中。
3. 確保必要的參考檔案（如 references/policy-matrix.md）存在於您的專案或技能目錄中。請參閱技能文件以了解如何取得或建立這些檔案。
4. 要開始使用，請向代理程式提出類似「為我的新產品建立一個登陸頁面」或「根據此簡報重新設計我們的首頁」的請求。