登陸頁面

建立互動性強、動畫豐富的登陸頁面，這些頁面以單一的 HTML 檔直接在瀏覽器中執行。

這項技能幫助非設計師透過視覺探索（「展示，而非告知」）來推出專業的產品頁面，然後生成具有真實互動性的生產級登陸頁面，而非靜態的模型。

核心原則

零依賴 — 單一 HTML 檔，包含內嵌的 CSS/JS。不使用 npm、建置工具或框架。單一的 HTML 檔比任何 React 專案都長壽。
展示，而非告知 — 人們無法描述他們想要的東西，但他們看到時就會知道。生成視覺預覽，讓他們挑選。
反 AI 產出 — 不要使用白色背景上的紫色漸層。不要使用通用的 SaaS 模板。每個頁面都應該感覺是為該產品量身定做的。
預設互動 — 登陸頁面不是幻燈片。它們應該有滾動動畫、懸停狀態、數據計數器、粒子效果和微互動，讓訪客停留。
可立即上線 — 產出後即可使用。將 HTML 檔放到任何地方 — GitHub Pages、Vercel、Netlify，或直接在瀏覽器中開啟。

偵測模式

模式 A：新頁面 — 從頭開始建立。進入階段 1。
模式 B：README 轉換 — 將 GitHub README 或產品描述轉換為登陸頁面。提取內容，然後進入階段 1 的步驟 2（跳過內容問題，直接到樣式）。
模式 C：強化 — 改進現有的 HTML 登陸頁面。閱讀它，理解結構，在保留內容的同時進行強化。遵循視區和區塊密度規則。

階段 1：探索

了解產品並收集內容。在一個 AskUserQuestion 呼叫中詢問所有問題。

問題 1 — 產品類型（標題：「產品」）：你在建立什麼？選項：SaaS / 開發者工具 / 行動應用程式 / 開源專案 / 個人品牌 / 其他

問題 2 — 內容（標題：「內容」）：頁面應該包含什麼？選項：我會貼上我的內容 / 從我的 README 提取 / 只要描述給我聽 / 我有一份文件

問題 3 — 關鍵區塊（標題：「區塊」，多選：true）：你需要哪些區塊？選項：附 CTA 的 Hero 區 / 功能網格 / 運作方式 / 定價 / 推薦 / 常見問題 / 統計與指標 / 電子報註冊 / GitHub 星數徽章

問題 4 — 發布目標（標題：「發布」）：這個頁面會放在哪裡？選項：GitHub Pages / 獨立網站 / Product Hunt 發布 / 只是探索

如果使用者提供內容（README、描述、文件），則繼續進行：

步驟 1.1：內容分析

解析提供的內容並提取：

產品名稱和一行描述
主要功能（目標 3-6 個）
目標受眾訊號
任何提到的指標/數字
行動呼籲（訪客應該做什麼？）

透過 AskUserQuestion 確認（標題：「內容確認」）：「這是我提取的內容 — 看起來正確嗎？」選項：看起來不錯 / 讓我調整

階段 2：樣式探索

這是「展示，而非告知」的階段。大多數人無法用言語表達他們的設計偏好。

步驟 2.1：氛圍選擇

透過 AskUserQuestion 詢問（標題：「氛圍」，多選：true，最多 2 個）：訪客應該感受到什麼？選項：未來與科技 / 乾淨與簡約 / 大膽與活力 / 暗色與高級 / 趣味與創意 / 企業與信賴

步驟 2.2：生成樣式預覽

根據氛圍選擇，生成 3 個不同的單一區塊 HTML 預覽，顯示：

字體選擇（標題 + 正文字體配對）
色彩調色盤（背景、文字、強調色、CTA）
帶有產品名稱的 Hero 區版面配置
一個微互動或動畫
整體氛圍（背景處理、間距）

每個預覽應該是一個完整、可運作的 HTML 檔，僅顯示以三種完全不同的方式設計的 Hero 區。將預覽儲存到 .ship-page/previews/。

閱讀 references/STYLE_PRESETS.md 以獲取策展的預設定義。將預設作為基礎，然後為特定產品進行自訂。

透過 AskUserQuestion 確認（標題：「選擇你的風格」）：「哪個方向最吸引你？」選項：風格 A / 風格 B / 風格 C / 混合元素（請描述）

步驟 2.3：直接預設選擇（替代方式）

如果使用者已經知道他們想要什麼，或者說「只要做成暗色/簡約/科技風」：

閱讀 references/STYLE_PRESETS.md
匹配到最接近的預設
跳過預覽生成，直接進入階段 3

階段 3：生成登陸頁面

使用階段 1 的內容和階段 2 的樣式生成完整的登陸頁面。

結構規則

每個登陸頁面遵循此架構：

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 字體、CSS 變數、所有樣式內嵌 -->
  <!-- 除了 Google Fonts + Font Awesome CDN 之外，沒有外部依賴 -->
</head>
<body>
  <nav><!-- 固定導航欄，包含產品名稱 + CTA --></nav>
  
  <section class="hero"><!-- 首屏：標題、副標題、CTA --></section>
  <section class="features"><!-- 功能網格或展示 --></section>
  <section class="social-proof"><!-- 統計、推薦、標誌 --></section>
  <!-- ... 根據需要加入其他區塊 ... -->
  <section class="cta-final"><!-- 最終行動呼籲 --></section>
  <footer><!-- 連結、版權 --></footer>

  <script>
    // 滾動動畫、計數器、互動 — 全部內嵌
  </script>
</body>
</html>

強制性技術需求

視區適應 — 每個區塊應感覺「完整」但永不溢出。Hero 區使用 min-height: 100vh，其他區塊使用比例高度。
響應式 — 必須在手機上運作。所有字型大小使用 clamp()，間距使用視區相對單位。
滾動動畫 — 使用 IntersectionObserver 實現滾動觸發顯示。元素應在使用者滾動時動畫進入。
效能 — CSS 動畫優於 JS。對動畫元素使用 will-change。對滾動事件處理器進行去抖。
無障礙 — 使用語意化 HTML，足夠的對比度，所有動畫使用 prefers-reduced-motion 媒體查詢。

區塊密度限制

每個區塊（防止過度擁擠）：

Hero：1 個標題（最多 8 個字），1 個副標題（最多 20 個字），1-2 個 CTA，可選背景效果
功能：最多 6 張卡片。每張卡片：圖示 + 標題（3-4 個字）+ 描述（最多 15 個字）
統計/指標：最多 4 個計數器
推薦：最多 3 則引用
定價：最多 3 層
常見問題：最多 6 項（使用手風琴/摺疊）

某個區塊的內容太多？將其分成兩個區塊，並在它們之間加入視覺間隔。

CSS 架構

:root {
  /* 字體 — 始終使用 clamp() */
  --font-display: 'YOUR_CHOICE', sans-serif;
  --font-body: 'YOUR_CHOICE', sans-serif;
  --heading-size: clamp(2rem, 5vw, 4.5rem);
  --body-size: clamp(0.875rem, 1.5vw, 1.125rem);
  
  /* 顏色 — 定義完整調色盤 */
  --bg-primary: #...;
  --bg-secondary: #...;
  --text-primary: #...;
  --text-secondary: #...;
  --accent: #...;
  --accent-hover: #...;
  --cta-gradient: linear-gradient(...);
  
  /* 間距 */
  --section-padding: clamp(3rem, 8vw, 8rem);
  --content-width: min(90vw, 1200px);
  
  /* 動畫 */
  --transition-fast: 0.3s ease;
  --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 滾動觸發顯示基礎類別 */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 減少動畫偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

JavaScript 必備

始終包含以下模式：

// 使用 IntersectionObserver 進行滾動觸發顯示
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

// 動畫計數器（用於統計區塊）
function animateCounter(el, target, duration = 2000) { ... }

// 導航連結的平滑滾動
document.querySelectorAll('a[href^="#"]').forEach(anchor => { ... });

閱讀 references/SECTION_LIBRARY.md 以取得每種區塊類型的完整區塊模板，包含 HTML、CSS 和 JS 模式。

反 AI 產出檢查清單

在生成之前，確認：

字體不是 Inter、Roboto、Arial 或系統預設
色彩配置不是白色背景上的紫色漸層
Hero 區沒有使用「革新」或「超能加速」等詞彙
CTA 按鈕有懸停動畫，而不僅僅是顏色變化
背景具有紋理/深度 — 不是純色平面
至少有一個出乎意料的設計選擇（不對稱版面、大膽的字體、創意區塊分隔線）

交付

使用描述性名稱儲存 HTML 檔：{product-name}-landing.html
在瀏覽器中開啟：open {product-name}-landing.html
呈現給使用者並徵求反饋

階段 4：迭代

在初始生成後，透過 AskUserQuestion 詢問（標題：「反饋」）：「看起來如何？」選項：可以上線了！ / 調整顏色-字體 / 更改版面 / 新增-移除區塊 / 用新風格重新開始

對於修改，請遵循以下規則：

新增內容：先檢查區塊密度限制。如果超過，則分割區塊。
更改樣式：更新 CSS 變數，不要改寫結構。
新增區塊：閱讀 references/SECTION_LIBRARY.md 以取得區塊模板，按邏輯順序插入。
移除區塊：徹底刪除，檢查沒有因為 JS 參照而中斷。

參考資料（漸進式揭露）

此技能使用漸進式揭露 — 僅在需要時載入參考檔案：

檔案	何時閱讀	內容
`references/STYLE_PRESETS.md`	階段 2（樣式探索）	5 個策展的樣式預設，包含完整的 CSS 變數、字體配對和背景處理
`references/SECTION_LIBRARY.md`	階段 3（生成）	每種區塊類型（Hero、功能、定價等）的完整 HTML/CSS/JS 模板

Ship Page — 一句話→可互動落地頁（單 HTML）