著陸頁產生器

從產品描述產生高轉換率的著陸頁。輸出完整的 Next.js/React 元件，包含多種區塊變體、經過驗證的文案框架、SEO 最佳化以及效能優先的模式。並非 lorem ipsum，而是能真正轉換的實際文案。

目標： LCP < 1s · CLS < 0.1 · FID < 100ms
輸出： TSX 元件 + Tailwind 樣式 + SEO meta + 文案變體

使用時機

您需要在 Next.js 或 React 中產生一個行銷著陸頁。
任務涉及以轉換為核心的頁面結構、區塊變體、Tailwind 樣式或 SEO 感知文案。
您希望從產品描述取得完整的著陸頁輸出，而非零散的 UI 片段。

核心功能

5 種 Hero 區塊變體（居中、分割、漸層、影片背景、極簡）
功能區塊（網格、交替、含圖示的卡片）
定價表（2–4 層級，含功能清單與切換）
常見問題手風琴（含 Schema 標記）
見證區塊（網格、輪播、單引言）
CTA 區塊（橫幅、全頁、內嵌）
頁尾（簡易、大型、極簡）
4 種設計風格與 Tailwind 類別組合

生成工作流程

每次請求著陸頁時請依序執行以下步驟：

收集輸入 — 使用下方的觸發格式收集產品名稱、標語、目標受眾、痛點、主要效益、定價層級、設計風格與文案框架。僅詢問遺漏的欄位。
分析品牌語調（建議） — 如果使用者已有現有品牌內容（網站文案、部落格文章、行銷素材），請透過 marketing-skill/content-production/scripts/brand_voice_analyzer.py 執行，以取得語調設定檔（正式程度、語氣、觀點）。根據設定檔來選擇設計風格與文案框架：
- 正式 + 專業 → enterprise 風格，AIDA 框架
- 隨興 + 友好 → bold-startup 風格，BAB 框架
- 專業 + 權威 → dark-saas 風格，PAS 框架
- 隨興 + 對話式 → clean-minimal 風格，BAB 框架
選擇設計風格 — 對應使用者的選擇（或從品牌語調分析推斷）到設計風格參考中的四個 Tailwind 類別組合之一。
套用文案框架 — 在產生元件之前，使用所選框架（PAS / AIDA / BAB）撰寫所有標題與內文文案。確保全文符合語調設定檔的正式程度與語氣。
依序產生區塊 — Hero → 功能介紹 → 定價 → 常見問題 → 見證 → CTA → 頁尾。跳過與產品不相關的區塊。
根據 SEO 清單驗證 — 在輸出最終程式碼前，逐一檢查 SEO 清單中的每個項目。即時修正任何遺漏。
輸出最終元件 — 提供完整、可直接複製貼上的 TSX 檔案，包含所有 Tailwind 類別、SEO meta 與結構化資料。

觸發此技能

Product: [名稱]
Tagline: [一句話的價值主張]
Target audience: [目標受眾]
Key pain point: [您解決的問題]
Key benefit: [主要成果]
Pricing tiers: [免費/專業/企業或描述]
Design style: dark-saas | clean-minimal | bold-startup | enterprise
Copy framework: PAS | AIDA | BAB

設計風格參考

風格	背景	強調色	卡片	CTA 按鈕
Dark SaaS	`bg-gray-950 text-white`	`violet-500/400`	`bg-gray-900 border border-gray-800`	`bg-violet-600 hover:bg-violet-500`
Clean Minimal	`bg-white text-gray-900`	`blue-600`	`bg-gray-50 border border-gray-200 rounded-2xl`	`bg-blue-600 hover:bg-blue-700`
Bold Startup	`bg-white text-gray-900`	`orange-500`	`shadow-xl rounded-3xl`	`bg-orange-500 hover:bg-orange-600 text-white`
Enterprise	`bg-slate-50 text-slate-900`	`slate-700`	`bg-white border border-slate-200 shadow-sm`	`bg-slate-900 hover:bg-slate-800 text-white`

Bold Startup 標題：在所有 <h1>/<h2> 元素上新增 font-black tracking-tight。

文案框架

PAS（問題 → 加劇 → 解決方案）

H1：他們所處的痛苦狀態
副標：如果不解決會發生什麼事
CTA：您提供的解決方案
範例 — H1：「您的團隊每天浪費 3 小時在人工報表上」/ 副標：「每花一小時在試算表上，就是少了一小時在成交。您的競爭對手已經自動化了。」/ CTA：「立即在 10 分鐘內自動化您的報表 →」

AIDA（注意力 → 興趣 → 渴望 → 行動）

H1：大膽吸引注意力的陳述 → 副標：有趣的事實或效益 → 功能：建立渴望的佐證點 → CTA：明確的行動

BAB（之前 → 之後 → 橋樑）

H1：「[之前狀態] → [之後狀態]」 → 副標：「以下是 [產品] 如何搭起橋樑」 → 功能：運作方式（橋樑）

代表性元件：Hero（居中漸層 — Dark SaaS）

此為所有 Hero 變體的結構模板。針對分割、影片背景和極簡變體，請置換佈局類別、漸層方向和圖片位置。

export function HeroCentered() {
  return (
    <section className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-950 px-4 text-center">
      <div className="absolute inset-0 bg-gradient-to-b from-violet-900/20 to-transparent" />
      <div className="pointer-events-none absolute -top-40 left-1/2 h-[600px] w-[600px] -translate-x-1/2 rounded-full bg-violet-600/20 blur-3xl" />
      <div className="relative z-10 max-w-4xl">
        <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-violet-500/30 bg-violet-500/10 px-4 py-1.5 text-sm text-violet-300">
          <span className="h-1.5 w-1.5 rounded-full bg-violet-400" />
          Now in public beta
        </div>
        <h1 className="mb-6 text-5xl font-bold tracking-tight text-white md:text-7xl">
          Ship faster.<br />
          <span className="bg-gradient-to-r from-violet-400 to-pink-400 bg-clip-text text-transparent">
            Break less.
          </span>
        </h1>
        <p className="mx-auto mb-10 max-w-2xl text-xl text-gray-400">
          The deployment platform that catches errors before your users do.
          Zero config. Instant rollbacks. Real-time monitoring.
        </p>
        <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
          <Button size="lg" className="bg-violet-600 text-white hover:bg-violet-500 px-8">
            Start free trial
          </Button>
          <Button size="lg" variant="outline" className="border-gray-700 text-gray-300">
            See how it works →
          </Button>
        </div>
        <p className="mt-4 text-sm text-gray-500">No credit card required · 14-day free trial</p>
      </div>
    </section>
  )
}

其他區塊模式

功能區塊（交替）

遍歷 features 陣列，其結構為 { title, description, image, badge }。使用 i % 2 === 1 ? "lg:flex-row-reverse" : "" 切換佈局方向。使用含明確 width/height 的 <Image> 以及 rounded-2xl shadow-xl。將內容包在 <section className="py-24"> 中，並使用 max-w-6xl 容器。

定價表

遍歷 plans 陣列，其結構為 { name, price, description, features[], cta, highlighted }。被標記為 highlighted 的方案使用 border-2 border-violet-500 bg-violet-950/50 ring-4 ring-violet-500/20；其他方案使用 border border-gray-800 bg-gray-900。若價格為 null 則顯示「Custom」。每個功能列使用 <Check> 圖示。佈局為 grid gap-8 lg:grid-cols-3。

常見問題（含 Schema 標記）

透過區塊內的 <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} /> 注入 FAQPage JSON-LD。將含 { q, a } 的常見問題對應到 shadcn <Accordion>，並設定 type="single" collapsible。容器為 max-w-3xl。

見證、CTA、頁尾

見證： 網格（grid-cols-1 md:grid-cols-3）或單引言 hero 區塊，包含頭像、姓名、職稱和引言文字。
CTA 橫幅： 全寬區塊，包含主標題、副標題和兩個按鈕（主要 + 次要）。緊接在下方加入信任信號（退款保證、標誌帶）。
頁尾： Logo + 導航欄 + 社交連結 + 法律資訊。使用 border-t border-gray-800 分隔線。

SEO 清單

驗證步驟： 在輸出最終程式碼前，確認已滿足上述清單中的每一項。即時修正任何遺漏，勿跳過任何項目。

效能目標

指標	目標	技術
LCP	< 1s	預載 Hero 圖片，在 Next/Image 上使用 `priority`
CLS	< 0.1	在所有圖片上設定明確的寬度/高度
FID/INP	< 100ms	延遲非關鍵 JS，使用 `loading="lazy"`
TTFB	< 200ms	對著陸頁使用 ISR 或靜態生成
Bundle	< 100KB JS	使用 `@next/bundle-analyzer` 進行審計

常見陷阱

Hero 圖片未預載 — 為第一個 <Image> 加入 priority prop
缺少行動斷點 — 始終使用 sm: 前綴進行行動優先設計
CTA 文案過於模糊 —「Get started」優於「Learn more」；「Start free trial」優於「Sign up」
定價頁面缺少信任信號 — 在 CTA 附近加入退款保證與見證
行動版折疊處上方無 CTA — 確保按鈕在 375px 寬度檢視埠中不需滾動即可看見

agency-black/Skills

Skills 是什麼？

在你喜歡的 AI 中提問

說明文件

著陸頁產生器

使用時機

核心功能

生成工作流程

觸發此技能

設計風格參考

文案框架

代表性元件：Hero（居中漸層 — Dark SaaS）

其他區塊模式

功能區塊（交替）

定價表

常見問題（含 Schema 標記）

見證、CTA、頁尾

SEO 清單

效能目標

常見陷阱

相關技能

相關技能

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me