著陸頁產生器
根據產品描述產生高效轉換的著陸頁。輸出完整的 Next.js/React 元件，包含多種區塊變體、經實證的文案框架、SEO 最佳化以及優先考慮效能的模式。並非 lorem ipsum，而是真正能轉換的文案。
目標： LCP < 1s · CLS < 0.1 · FID < 100ms
產出： TSX 元件 + Tailwind 樣式 + SEO meta + 文案變體
使用時機
- 你需要在 Next.js 或 React 中產生行銷著陸頁。
- 任務涉及以轉換為導向的頁面結構、區塊變體、Tailwind 樣式或 SEO 感知文案。
- 你想要從產品描述獲得完整的著陸頁輸出，而非零散的 UI 片段。
核心功能
- 5 種英雄區變體（置中、分割、漸層、影片背景、極簡）
- 功能區（網格、交替、含圖示的卡片）
- 定價表（2–4 層級，含功能列表與切換開關）
- FAQ 手風琴含結構化標記
- 推薦區（網格、輪播、單一引言）
- CTA 區（橫幅、全頁、內嵌）
- 頁尾（簡單、大型、極簡）
- 4 種設計風格含 Tailwind class 集合
產生工作流程
請按順序執行以下步驟處理每個著陸頁請求：
- 收集輸入 — 使用以下觸發格式收集產品名稱、標語、目標受眾、痛點、主要效益、定價層級、設計風格與文案框架。僅詢問缺失的欄位。
- 分析品牌語調（建議） — 如果使用者有現有的品牌內容（網站文案、部落格文章、行銷素材），透過
marketing-skill/content-production/scripts/brand_voice_analyzer.py執行以取得語調檔案（正式程度、語氣、視角）。使用此檔案來選擇設計風格與文案框架：- 正式 + 專業 → enterprise 風格、AIDA 框架
- 隨意 + 友善 → bold-startup 風格、BAB 框架
- 專業 + 權威 → dark-saas 風格、PAS 框架
- 隨意 + 健談 → clean-minimal 風格、BAB 框架
- 選擇設計風格 — 將使用者的選擇（或從品牌語調分析推斷）對應至設計風格參考中的四種 Tailwind class 集合之一。
- 套用文案框架 — 在產生元件之前，使用所選框架（PAS / AIDA / BAB）撰寫所有標題與正文文案。確保整體語氣與語調檔案的正式程度和語氣相符。
- 依序產生區塊 — Hero → Features → Pricing → FAQ → Testimonials → CTA → Footer。跳過與產品不相關的區塊。
- 驗證 SEO 檢查清單 — 在輸出最終程式碼前，檢查 SEO 檢查清單中的每一項。即時修補任何遺漏。
- 輸出最終元件 — 交付完整、可複製貼上的 TSX 檔案，包含所有 Tailwind class、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：他們所處的痛苦狀態
- Sub：如果不解決會如何
- CTA：你提供的方案
- 範例 — H1: 「你的團隊每天浪費 3 小時在人工報告上」 / Sub: 「每花在試算表的一小時，就是少成交客戶的一小時。你的競爭對手已經自動化了。」 / CTA: 「立即在 10 分鐘內自動化你的報告 →」
AIDA（注意 → 興趣 → 渴望 → 行動）
- H1：大膽吸引注意的陳述 → Sub：有趣的事實或效益 → Features：建立渴望的證明點 → CTA：明確的行動呼籲
BAB（之前 → 之後 → 橋樑）
- H1：「[之前狀態] → [之後狀態]」 → Sub：「以下是 [產品] 如何搭建橋樑」 → Features：運作方式（橋樑）
代表性元件：英雄區（置中漸層 — Dark SaaS）
以此作為所有英雄區變體的結構範本。針對分割、影片背景和極簡變體，調整佈局 class、漸層方向與圖片位置。
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" />
現在公開測試中
</div>
<h1 className="mb-6 text-5xl font-bold tracking-tight text-white md:text-7xl">
更快出貨。<br />
<span className="bg-gradient-to-r from-violet-400 to-pink-400 bg-clip-text text-transparent">
更少故障。
</span>
</h1>
<p className="mx-auto mb-10 max-w-2xl text-xl text-gray-400">
在使用者發現錯誤之前，就能攔截錯誤的部署平台。
零配置。即時回滾。即時監控。
</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">
開始免費試用
</Button>
<Button size="lg" variant="outline" className="border-gray-700 text-gray-300">
查看運作方式 →
</Button>
</div>
<p className="mt-4 text-sm text-gray-500">無需信用卡 · 14 天免費試用</p>
</div>
</section>
)
}
其他區塊模式
功能區（交替）
遍歷包含 { title, description, image, badge } 的 features 陣列。使用 i % 2 === 1 ? "lg:flex-row-reverse" : "" 切換佈局方向。使用帶有明確 width / height 和 rounded-2xl shadow-xl 的 <Image>。包在 <section className="py-24"> 中，並使用 max-w-6xl 容器。
定價表
遍歷包含 { name, price, description, features[], cta, highlighted } 的 plans 陣列。突出的方案使用 border-2 border-violet-500 bg-violet-950/50 ring-4 ring-violet-500/20，其他方案使用 border border-gray-800 bg-gray-900。將 null 價格顯示為「自訂」。每個功能行使用 <Check> 圖示。佈局：grid gap-8 lg:grid-cols-3。
FAQ 含結構化標記
在區塊內透過 <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）或單引言英雄區塊，包含頭像、姓名、角色和引言文字。 - CTA 橫幅： 全寬區塊，包含標題、副標題與兩個按鈕（主要 + 鬼魂）。在正下方添加信任信號（滿意保證、標誌條）。
- 頁尾： 標誌 + 導覽欄 + 社交連結 + 法律資訊。使用
border-t border-gray-800分隔線。
SEO 檢查清單
-
<title>標籤：主要關鍵字 + 品牌（50–60 字元） - Meta description：效益 + CTA（150–160 字元）
- OG 圖片：1200×630px，含產品名稱與標語
- H1：每頁一個，包含主要關鍵字
- 結構化資料：FAQPage、Product 或 Organization schema
- 設定 Canonical URL
- 所有
<Image>元件的圖片替代文字 - 設定 robots.txt 和 sitemap.xml
- 核心網頁指標：LCP < 1s, CLS < 0.1
- 存在行動裝置 viewport meta 標籤
- 內部連結到定價與文件
驗證步驟： 在輸出最終程式碼之前，確認以上檢查清單的每一項都已滿足。即時修補任何遺漏 — 不要跳過任何項目。
效能目標
| 指標 | 目標 | 技術 |
|---|---|---|
| LCP | < 1s | 預載英雄區圖片，在 Next/Image 上使用 priority |
| CLS | < 0.1 | 在所有圖片上設定明確的 width/height |
| FID/INP | < 100ms | 延遲非關鍵 JS，使用 loading="lazy" |
| TTFB | < 200ms | 為著陸頁使用 ISR 或靜態生成 |
| Bundle | < 100KB JS | 使用 @next/bundle-analyzer 進行審計 |
常見陷阱
- 英雄區圖片未預載 — 在第一個
<Image>上添加priorityprops - 缺少行動裝置斷點 — 始終使用
sm:前綴以行動優先設計 - CTA 文案太模糊 — 「開始使用」勝過「了解更多」；「開始免費試用」勝過「註冊」
- 定價頁面缺少信任信號 — 在 CTA 附近添加滿意保證和推薦
- 行動裝置上無首屏 CTA — 確保按鈕在 375px 視口中無需滾動即可見
相關技能
- 品牌語調分析器（
marketing-skill/content-production/scripts/brand_voice_analyzer.py） — 在生成前執行以建立語調檔案，確保文案一致性 - UI 設計系統（
product-team/ui-design-system/） — 在建立頁面之前從品牌顏色生成設計令牌 - 競爭者分析（
product-team/competitive-teardown/） — 競爭定位有助於著陸頁訊息傳遞與差異化
限制
- 僅在任務明確符合上述範圍時使用此技能。
- 請勿將輸出視為環境特定驗證、測試或專家審查的替代品。
- 如果缺少必要的輸入、權限、安全邊界或成功標準，請停止並要求釐清。