TSS-Blue-AI-Lab/ai-lab-agent-skills

著陸頁

在幾分鐘內建立美觀且響應式的著陸頁。

使用時機

• 推出新產品或功能
• 建立行銷或宣傳頁面
• 建置作品集或個人網站
• 製作註冊或等待清單頁面
• 快速原型化產品概念

運作方式

1. 頁面區塊

每個有效的著陸頁都遵循以下結構：

┌─────────────────────────────┐
│  導航列 (標誌 + 連結)        │
├─────────────────────────────┤
│  英雄區塊 (標題 + 行動呼籲)  │
├─────────────────────────────┤
│  社會證明 / 合作夥伴標誌     │
├─────────────────────────────┤
│  功能特色 (3-4 張卡片)      │
├─────────────────────────────┤
│  運作方式 (3 個步驟)        │
├─────────────────────────────┤
│  客戶評價                   │
├─────────────────────────────┤
│  定價方案 (可選)            │
├─────────────────────────────┤
│  行動呼籲 (重複主要動作)    │
├─────────────────────────────┤
│  頁尾                       │
└─────────────────────────────┘

2. 英雄區塊

英雄區塊決定頁面成敗。保持簡單：

function Hero() {
  return (
    <section className="py-20 px-6 text-center">
      {/* 徽章 */}
      <div className="inline-flex items-center rounded-full bg-blue-50 px-3 py-1 text-sm text-blue-700 mb-6">
        現正公開測試中
      </div>

      {/* 標題 — 一個明確的價值主張 */}
      <h1 className="text-5xl font-bold tracking-tight text-gray-900 max-w-3xl mx-auto">
        透過 AI 將產品交付 <span className="text-blue-600">速度提升 10 倍</span>
      </h1>

      {/* 副標題 — 支援主標題 */}
      <p className="mt-6 text-xl text-gray-600 max-w-2xl mx-auto">
        告別樣板程式碼。讓 AI 處理重複性工作，
        讓你專注在真正重要的事情上。
      </p>

      {/* 行動呼籲 — 一個主要動作 */}
      <div className="mt-10 flex gap-4 justify-center">
        <a href="#" className="px-8 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700">
          免費開始使用
        </a>
        <a href="#" className="px-8 py-3 border border-gray-300 rounded-lg font-medium hover:bg-gray-50">
          查看示範
        </a>
      </div>
    </section>
  )
}

3. 功能卡片

const features = [
  { icon: '⚡', title: '閃電般快速', description: '幾秒內部署，無需數小時' },
  { icon: '🔒', title: '預設安全', description: '內建企業級安全防護' },
  { icon: '📊', title: '分析儀表板', description: '即時洞察你的數據' },
]

function Features() {
  return (
    <section className="py-20 px-6 bg-gray-50">
      <h2 className="text-3xl font-bold text-center mb-12">你需要的一切</h2>
      <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
        {features.map(f => (
          <div key={f.title} className="bg-white p-6 rounded-xl shadow-sm">
            <div className="text-3xl mb-4">{f.icon}</div>
            <h3 className="text-lg font-semibold mb-2">{f.title}</h3>
            <p className="text-gray-600">{f.description}</p>
          </div>
        ))}
      </div>
    </section>
  )
}

4. 設計原則

• 每個區塊一個行動呼籲 — 不要讓選擇過多造成混亂
• 留白是你的好朋友 — 使用充裕的內邊距 (py-20, gap-8)
• 文字設定最大寬度 — 不要讓文字橫跨全寬 (max-w-3xl)
• 視覺層次 — 越大越重要，謹慎使用 font-bold
• 行動優先 — 先為行動裝置設計，再用 md: 和 lg: 斷點增強
• 快速載入 — 使用 next/image，減少 JavaScript，避免大型函式庫

5. 快速設定

# 最快路徑：Next.js + Tailwind
npx create-next-app@latest landing --typescript --tailwind --app
cd landing
npm run dev

品質檢查清單

• 在行動裝置上顯示良好 (檢查寬度 375px)
• 英雄區塊標題清晰簡潔 (少於 10 個字)
• 摺疊上方有一個明確的行動呼籲
• 頁面載入時間小於 2 秒
• 所有連結和按鈕都能正常運作
• 已設定網站圖示和 meta 標籤

範例

> 為 AI 寫作工具建立一個著陸頁
> 建立一個附帶電子郵件註冊的行動應用程式等待清單頁面
> 建立一個展示專案的作品集著陸頁