登陸頁面建置器

透過從客戶網站和文件中提取品牌與內容，產生高品質、可直接部署的登陸頁面，並生成具備驗證圖片和乾淨結構的響應式 HTML/CSS 頁面。

這個技能存在的理由是，登陸頁面需要品牌、內容、圖像和響應式設計的細心協調——而最常見的失敗模式是將來源文件視為純文字，忽略了承擔一半行銷訊息的圖片。

黃金法則

1. 圖片是內容，不是裝飾。 當一份行銷 PDF 在描述學生福祉的段落旁邊放了一張教室照片時，那張照片本身就是訊息。缺少這些圖片的登陸頁面，無論文案多好都是不完整的。每次都在第一次遍歷時提取並整合圖片。

2. 在選定的堆疊中保持樣式可維護性。 對於靜態頁面，將 CSS 放在 styles.css 中，而不是內嵌在 HTML 中。對於現有的框架專案，保留其既有的 CSS 模組、元件樣式、工具類別或權杖系統。除非有原因，否則不要遷移樣式架構。

3. 永遠不要憑空創造內容。 只使用來源文件提供的內容。不要捏造圖片說明、視覺方向、推薦引言、統計數據或客戶名稱。如果內容遺失，標記出來並詢問——不要用 AI 生成的佔位文案填補空白。

4. 有意識地使用前端堆疊。 在編碼之前，載入下面命名的可用輔助技能。它們是互補的角色，不是盲目拼貼在一起的說明。如果某個命名的技能不可用，請繼續使用可用的堆疊並記錄這個缺口；永遠不要假裝它已經執行過。

前端技能堆疊 (必要路由)

截圖提供的前端工具應以下列方式映射到這個登陸頁面工作流程。閱讀 references/frontend-skill-stack.md 以了解完整路由和衝突規則。

frontend-design — 建立特定主題的視覺論點、字體排印、調色板、佈局概念、簽名元素和動態意圖。用於新建置和有意義的視覺重塑。
design-taste-frontend — 應用反粗糙實作紀律、響應式佈局機制、可存取的互動狀態、元件選擇、效能檢查和最終設計預檢。
imagegen-frontend-web — 當生成的視覺參考能實質上減少模糊性時使用：未知的視覺方向、以圖像為主導的活動、自訂插畫/藝術指導，或使用者要求草稿。它生成參考；它不能取代真實的品牌資產或實作。
design-taste-frontend-v1 — 僅作為舊版備用。當現有專案明確依賴 v1 行為時使用它；不要同時載入 v1 和目前的 Design Taste。
imagegen-frontend-mobile — 不是網站登陸頁面建置的一部分。僅用於獨立的行動應用程式畫面交付物，永遠不要作為頁面的響應式網頁設計步驟。
Aidesigner Frontend — 如果這個確切的技能被安裝且可發現，請將其用作對已批准藝術方向的第二個選擇性評論。目前不假設它可用，且絕不能阻擋工作流程。

不要為了儀式而執行每個工具。最小化的新登陸頁面堆疊是 frontend-design + 目前的 design-taste-frontend + landing-page。當生成視覺參考是合理的時候，再加入 imagegen-frontend-web。響應式行動網頁仍是實作和 QA 的一部分；它不會被委派給行動應用程式圖片技能。

必需的實作前設計關卡

在實作之前，產出一份內部建置簡報，內容包含：

頁面的目標受眾、單一轉換目標和真實性內容來源；
一個連貫的、與實際主題相關的視覺論點，而不是通用的 SaaS 美學；
調色板和字體排印角色，並檢查其授權/可用性；
區段順序以及每個區段的作用；
資產地圖：保留、取得、生成或省略；
一個簽名視覺創意和一個節制的動態計劃；
針對首屏和複雜區段的桌面、平板和行動行為；
基於品牌和參考審計的明確避免清單。

如果使用者提供了參考，提取其原則，但不要複製其身分。如果來源是現有客戶網站或已批准的模板，則保留已批准的文案、品牌資產、元件語法和區段順序，除非使用者明確授權重新設計。

反粗糙規則 (強制執行)

這些模式使 AI 生成的頁面看起來廉價且普通。絕對不要使用它們：

禁止的文案模式

「革新」、「轉變您的」、「釋放潛能」、「運用」、「賦能」
「尖端」、「次世代」、「最先進」、「業界最佳」
「無縫地」、「毫不費力地」、「加速」
「在當今快節奏的世界中」、「在一個時代」
以「想像...」或「試想一下...」開頭的段落
無上下文的通用 CTA，例如「了解更多」或「開始使用」——請使用具體的 CTA：「立即獲取報價」、「預約演示」、「查看價格」

禁止的視覺模式

漸層網格模糊或極光背景 (AI 生成頁面的 #1 標誌)
紫色到藍色的漸層作為主要設計語言
與產品無關的浮動 3D 物件
作為英雄區背景的通用抽象幾何圖案
過度圓角的卡片 (border-radius > 1.5rem) 並帶有厚重的陰影
僅更換圖示的重複相同卡片佈局 (3 次以上)
與業務不符的庫存照片英雄圖片（例如通用的握手照片）

禁止的程式碼模式

HTML 元素中的內嵌樣式
在 CSS 中使用 !important (實用工具覆蓋除外)
對字型大小使用硬編碼的像素值——請使用 clamp() 或 rem
圖片上缺少 alt 屬性
在存在語義元素 (<section>、<article>、<nav>、<header>、<footer>) 時使用 <div>

工作流程概述

建置分為七個階段。從提供的來源解決明顯的事實，而不是要求使用者重複。只在缺少的決定會實質上改變結果時提問。

上下文與研究 — 閱讀專案/客戶指示、會議決策、簡報、批准狀態、現有品牌、參考資料、文案和設計語法
內容提取 — 從提供的來源提取所有已批准的本文和圖像
資產驗證 — 建立一個有出處記錄的可用媒體清單
前端方向與藍圖 — 應用前端設計和設計品味；鎖定轉換流程、權杖、響應式行為、資產和驗收檢查；僅在合理時生成網頁參考
建置 — 使用最簡單的能滿足簡報的堆疊，並實作完整的生產程式碼
瀏覽器 QA — 建置/測試，檢查桌面/平板/行動截圖，修復缺陷，然後重複
部署與即時驗證 — 僅在要求時部署，然後檢查真實 URL 並回報驗證過的別名

階段 1：上下文與研究

在編寫程式碼之前，閱讀最近的專案/客戶指示、批准的簡報、會議決策和來源連結。然後了解客戶的現有品牌並收集您需要的所有資產。

品牌提取

擷取客戶的網站並提取：

顏色：檢查 CSS 自訂屬性、關鍵元素（標題、按鈕、背景、強調）的計算樣式。記錄為十六進制值。
字體：檢查 Google Fonts 連結、font-family 宣告和 @font-face 規則。不要假設——許多網站使用的字體看起來像常見字體，但其實不是。
標誌：找到標誌圖像 URL（通常在頁首或頁尾）。取得可用的最高解析度版本。
設計語言：注意間距模式、border-radius 使用方式、陰影樣式、區段背景處理。

資產收集

這點至關重要。爬取網站的圖像目錄以建立完整的目錄：

擷取首頁和關鍵頁面，提取所有 <img> src 屬性和 CSS background-image URL
尋找圖像路徑中的模式（例如 WordPress 網站的 /wp-content/uploads/YYYY/MM/）
對於每個圖像，記錄：
- 完整 URL
- 描述性名稱（圖片顯示了什麼？）
- 尺寸（從檔案名稱或透過擷取標頭取得）
- 類別（照片、插畫、圖示、標誌、貼紙）

保存此目錄——您會在整個建置過程中參考它。

目錄條目範例：

URL: https://example.com/wp-content/uploads/2023/08/image-13-1024x768.jpeg
描述：學生一起在教室工作
尺寸：1024x768
類別：照片
用途：問題區、圖庫

階段 2：內容提取

當使用者提供 PDF、Word 文件或其他內容文件時：

本文內容

提取所有標題、內文、統計數據、引言和 CTA
保留文件的區段結構——它通常對應到頁面區段
注意任何應逐字保留的特定措辭（標語、已背書的主張、推薦引言）

圖片內容（不要跳過這一步）

識別文件中的每個圖像
對於每個圖像，判斷它顯示了什麼以及屬於哪個區段
將文件圖像與客戶網站上的實際託管 URL 進行匹配（來自您的階段 1 目錄）
如果文件中的圖像與任何目錄中的 URL 都不匹配，將其標記為「需要來源」並詢問使用者

為什麼這很重要：行銷文件策略性地使用圖片。一份 PDF 在腦科學內容旁邊顯示角色插畫，是在告訴您這些插畫屬於登陸頁面的腦科學區段。忽略它們會產生一個文字過多、錯失重點的頁面。

階段 3：圖片目錄與驗證

在建置任何東西之前，驗證您計劃使用的每個圖像 URL。

驗證程序

對於每個圖像 URL：

擷取 URL 並檢查 HTTP 狀態碼
200 回應且包含正確的 content-type 表示沒問題
404 或其他錯誤表示 URL 錯誤

修復損壞的 URL

當圖像 URL 回傳 404 時：

回到即時網站，並透過部分檔案名稱搜尋該圖像
擷取原始包含該圖像的頁面原始碼
尋找正確的路徑——檔案名稱通常會有細微差異（例如 GYM_Kid-at-Desk-300x295.png 與 GYM_Kid_AtDesk-222x300.png）
永遠不要猜測檔案名稱。始終與實際伺服器進行驗證。

最終目錄

產出一個已驗證的清單，將每個內容區段映射到其圖像：

英雄區：logo.png (已驗證)，character-teaching.png (已驗證)，sticker-owl.png (已驗證)
問題區：classroom-photo.jpeg (已驗證)
腦科學：character-1.png (已驗證)，character-2.png (已驗證)，character-3.png (已驗證)，character-4.png (已驗證)
轉變區：school-kits.jpg (已驗證)，home-products.jpeg (已驗證)
圖庫：classroom.jpeg, confidence.png, founders.jpeg (全部已驗證)

階段 4：前端方向與藍圖

載入所需的前端技能堆疊，並完成此檔案頂部的實作前設計關卡。決定生成的網頁參考圖像是否有用。在實作之前，鎖定轉換流程、區段作用、視覺權杖、媒體計劃、動態意圖、響應式行為和驗收檢查。

如果方向可以不加修改地用於不相關的客戶，則自我拒絕該方向。一個連貫的藝術方向勝過平均幾個技能的美學。

階段 5：建置

選擇實作堆疊

不要將每個登陸頁面強制塞入一種技術。根據實際專案選擇：

現有儲存庫或模板： 除非明確要求遷移，否則保留其框架、執行環境、元件、路由和資產管線。
靜態活動頁面： 當不需要元件架構或應用程式行為時，優先使用語義 HTML、外部 CSS 和極簡 JavaScript。
元件主導或互動式頁面： 當可重複使用的元件、整合、狀態或複雜動態證明其合理性時，React/Vite、Next.js 或儲存庫的現有堆疊是有效的。
在匯入依賴項之前先進行驗證。優先使用現有的專案函式庫，而不是添加流行的套件。

下面的舊預設值僅適用於真正新建的靜態頁面。

靜態頁面檔案結構

保持簡單——一個包含兩個檔案的單一目錄：

project-name/
├── index.html
└── styles.css

對於簡單的靜態頁面，避免不必要的建置工具和框架依賴項。這是預設值，不是禁止使用專案真實堆疊的規定。

設計系統設定 (styles.css)

從提取的品牌系統開始設定樣式表：

:root {
  /* 品牌顏色 — 從客戶網站提取 */
  --primary: #0f4661;
  --primary-dark: #0a3347;
  --accent: #f37b78;
  --accent-hover: #e06560;
  /* ... 所有品牌顏色作為自訂屬性 */

  /* 中性色階 — 務必定義這些 */
  --gray-50: #f8f9fa;
  --gray-100: #f0f2f5;
  --gray-200: #e2e5ea;
  --gray-300: #c8cdd5;
  --gray-400: #9ca3b0;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* 實用工具權杖 */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.16);
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* 轉場 */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
  font-family: 'ExtractedFont', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--gray-700);
  background: var(--white, #ffffff);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

字體排印規則 (極重要)

糟糕的字體排印是 AI 頁面看起來業餘的首要原因。嚴格遵守以下規則：

/* 最小尺寸 — 絕對不能低於這些 */
body { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); } /* 16-18px */
h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); }       /* 36-64px */

Aston1690/claude-skill-landing-page

claude-skill-landing-page 是什麼？

在你喜歡的 AI 中提問

說明文件