前端登陸頁面

生成令人驚豔、零建置、單一檔案的 HTML 登陸頁面，附帶精心策劃的風格預設、流暢動畫、響應式設計與深色/淺色模式 — 全部在一個自包含的檔案中完成。

開始之前

請先閱讀風格預設參考檔案，了解可用的美學風格：

references/STYLE_PRESETS.md

兩種操作模式

模式 1：從零開始

使用者提供產品詳細資料 → 產生完整的登陸頁面。

收集以下輸入（若未提供則詢問）：

產品/品牌名稱（必填）
標語 / 主視覺標題（必填）
3-6 項主要功能或優勢（必填）
目標受眾（有幫助）
主要行動呼籲（例如「開始免費試用」、「加入等待清單」）— 預設值：「開始使用」
顏色偏好（可選 — 風格預設會處理）
風格預設（若未指定，則顯示預設選單）

模式 2：改善 / 轉換

使用者提供現有 HTML、描述、螢幕截圖或網址 → 透過更好的設計、動畫和響應式功能進行強化。

工作流程：

分析現有設計（結構、顏色、排版、佈局）
找出改善點（動畫、響應式、可及性、視覺層次）
詢問要套用哪個風格預設（或保留現有美學）
以單一檔案 HTML 重新生成，並包含所有改良

風格預設系統

務必在每次登陸頁面任務開始時提供預設選單，除非使用者已選擇或明確描述了特定美學風格。

以這樣的方式呈現預設：

為您的登陸頁面選擇一種視覺風格（請輸入數字或名稱）：

 1. ☁️ 乾淨 SaaS 極簡風     — 清爽白色、柔和陰影、系統原生感
 2. 🔮 玻璃擬態現代風       — 磨砂玻璃面板、漸層、半透明
 3. 🏗️ 大膽粗獷風           — 未加工混凝土紋理、等寬字體、強烈對比
 4. 🌆 賽博龐克霓虹風       — 深色背景、電光輝光、掃描線效果
 5. ✒️ 優雅襯線高級風       — 編輯器般的奢華感、襯線標題、金色點綴
 6. 🎨 活潑漸層風           — 彈跳動畫、網格漸層、所有元素圓角
 7. 🌙 深色模式優先風       — 深沉黑色、霓虹點綴、OLED 最佳化
 8. 📻 復古懷舊風           — 暖色調棕褐色、復古字體、懷舊紋理
 9. 🌿 有機自然風           — 大地色調、有機形狀、植物插圖
10. 🏢 企業專業風           — 海軍藍/石板色調色板、結構化網格、建立信賴感

或者描述您自訂的美學風格！

使用者選擇後，請閱讀 references/STYLE_PRESETS.md 以取得該預設的詳細 CSS 變數、字型堆疊、動畫樣式和設計符記。

輸出要求

單一檔案 HTML 架構

每個輸出必須是一個完整、自包含的 HTML 檔案。結構如下：

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- SEO 元標籤 -->
  <title>{產品名稱} — {標語}</title>
  <meta name="description" content="{簡潔的產品描述}">
  <meta property="og:title" content="{產品名稱}">
  <meta property="og:description" content="{描述}">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  
  <!-- Anime.js 動畫庫 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
  
  <!-- Google Fonts（依預設而定） -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family={預設字型}&display=swap" rel="stylesheet">
  
  <!-- Tailwind 設定 + 自訂主題 -->
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          // 預設特定的擴充
          fontFamily: { /* 來自預設 */ },
          colors: { /* 來自預設 */ },
        }
      }
    }
  </script>
  
  <style>
    /* 來自預設的 CSS 自訂屬性 */
    :root { /* 淺色主題變數 */ }
    .dark { /* 深色主題變數 */ }
    
    /* 滾動觸發動畫基礎類別 */
    .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
    .reveal.active { opacity: 1; transform: translateY(0); }
    
    /* 預設特定自訂樣式 */
  </style>
</head>
<body>
  <!-- 所有內容放置於此 -->
  
  <script>
    // 深色模式切換
    // 滾動揭示觀察器
    // Anime.js 入場動畫
    // 互動元件（常見問題手風琴、價格切換等）
  </script>
</body>
</html>

CDN 堆疊（不允許其他）

Tailwind CSS：https://cdn.tailwindcss.com（附行內設定）
Anime.js：https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js
Google Fonts：僅限預設特定的字型
圖示：僅限行內 SVG（Heroicons 風格）。絕對不要使用圖示字型 CDN。

每個輸出必備功能

響應式設計 — 行動優先。在 375px、768px、1280px 進行心智模型測試。
深色/淺色模式 — prefers-color-scheme 自動偵測 + 導覽列中的手動切換按鈕。
滾動動畫 — 基於 IntersectionObserver 的區塊揭示動畫。
平滑滾動 — scroll-smooth 套用於 html + 用於導覽錨點的 JS。
可及性 — 語意化 HTML5、互動元素上的 ARIA 標籤、focus-visible 樣式、跳至內容連結、足夠的色彩對比。
SEO 元標籤 — title、description、og:title、og:description、og:type、twitter:card。
效能 — 延遲載入圖片、高效 CSS、最小 JS。

區塊生成

根據使用者輸入，智慧地包含這些區塊。並非全部都是必填 — 請根據產品情境進行匹配：

務必包含：

導覽列 — 固定/黏性導覽列，含標誌、連結、深色模式切換、主要行動呼籲按鈕
主視覺區 — 大標題 + 副標題 + 行動呼籲按鈕 + 視覺元素（漸層、抽象形狀或圖片佔位符）
功能區 — 3-6 個功能卡片/網格，附行內 SVG 圖示
最終行動呼籲 — 全寬行動呼籲橫幅，含標題 + 按鈕
頁尾 — 連結、版權、社交圖示（行內 SVG）

動畫劇本

一致地使用這些動畫模式：

滾動揭示（IntersectionObserver）

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('active');
    }
  });
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });

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

交錯入場（Anime.js）

anime({
  targets: '.feature-card',
  opacity: [0, 1],
  translateY: [40, 0],
  delay: anime.stagger(100, { start: 300 }),
  easing: 'easeOutCubic',
  duration: 800
});

主視覺文字動畫

anime({
  targets: '.hero-title .word',
  opacity: [0, 1],
  translateY: [20, 0],
  delay: anime.stagger(80),
  easing: 'easeOutExpo',
  duration: 1200
});

懸停微互動

使用 CSS 過渡效果處理懸停 — Anime.js 僅用於複雜序列：

.card { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.15); }

計數器動畫

function animateCounter(el) {
  const target = parseInt(el.dataset.target);
  anime({
    targets: el,
    innerHTML: [0, target],
    round: 1,
    easing: 'easeInOutExpo',
    duration: 2000
  });
}

深色模式實作

// 檢查系統偏好與儲存偏好
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const saved = localStorage.getItem('theme');
if (saved === 'dark' || (!saved && prefersDark)) {
  document.documentElement.classList.add('dark');
}

// 切換函式（綁定至按鈕）
function toggleDark() {
  document.documentElement.classList.toggle('dark');
  localStorage.setItem('theme',
    document.documentElement.classList.contains('dark') ? 'dark' : 'light'
  );
}

導覽列中的切換按鈕：

<button onclick="toggleDark()" aria-label="切換深色模式" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
  <!-- 太陽圖示（深色模式時顯示） -->
  <svg class="hidden dark:block w-5 h-5" ...>...</svg>
  <!-- 月亮圖示（淺色模式時顯示） -->
  <svg class="block dark:hidden w-5 h-5" ...>...</svg>
</button>

排版與反通用規則

絕對不要使用這些字型：Inter、Roboto、Arial、Helvetica、Open Sans、system-ui 預設值。

每個預設都指定了其獨特的字型配對。務必從 Google Fonts CDN 載入。

絕對不要使用未經自訂的預設 Tailwind 顏色。 每個預設都透過 CSS 變數和 tailwind.config 的 extend 定義了自訂調色板。

絕對不要產出看起來像其他所有 AI 生成的登陸頁面的頁面。 每個預設都有特定的差異化特徵 — 請尊重它們。

行內 SVG 圖示

使用 Heroicons 風格的行內 SVG。以下是範例：

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="..." />
</svg>

直接在 HTML 中包含 6-8 個常用圖示。根據產品功能選擇與情境相關的圖示。

常見問題手風琴實作

document.querySelectorAll('.faq-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const content = btn.nextElementSibling;
    const icon = btn.querySelector('.faq-icon');
    const isOpen = content.style.maxHeight && content.style.maxHeight !== '0px';
    
    // 關閉其他所有項目
    document.querySelectorAll('.faq-content').forEach(c => { c.style.maxHeight = '0px'; });
    document.querySelectorAll('.faq-icon').forEach(i => { i.style.transform = 'rotate(0deg)'; });
    
    if (!isOpen) {
      content.style.maxHeight = content.scrollHeight + 'px';
      icon.style.transform = 'rotate(45deg)';
    }
  });
});

價格切換實作

const toggle = document.getElementById('pricing-toggle');
const monthlyPrices = document.querySelectorAll('.price-monthly');
const annualPrices = document.querySelectorAll('.price-annual');

toggle.addEventListener('change', () => {
  const isAnnual = toggle.checked;
  monthlyPrices.forEach(el => el.classList.toggle('hidden', isAnnual));
  annualPrices.forEach(el => el.classList.toggle('hidden', !isAnnual));
});

最終輸出說明

產生 HTML 後，務必附加這份指引：

✅ 您的登陸頁面已準備就緒！

使用方法：
1. 將上述所有程式碼複製到名為 `index.html` 的檔案中
2. 在任何瀏覽器中開啟 — 無需建置步驟，即可獨立執行

免費部署方式：
• Vercel：vercel.com → 新增專案 → 拖放您的 index.html
• Netlify：app.netlify.com → 拖放您的 index.html
• GitHub Pages：推送到倉庫 → 設定 → Pages → 從 main 分支部署

進一步自訂：
• 顏色：編輯 :root { } 和 .dark { } 中的 CSS 變數
• 內容：所有文字都直接位於 HTML 中 — 尋找並取代
• 字型：更換 Google Fonts 連結和 font-family 值
• 動畫：調整 Anime.js 呼叫和 CSS 過渡中的時間設定

品質檢查清單

在交付前，請在心裡驗證：

hemsurendranath/frontend-landings-claude-skill

frontend-landings-claude-skill 是什麼？

在你喜歡的 AI 中提問

說明文件