关于
生成高转化的 Next.js/React 落地页，使用 Tailwind CSS。采用 PAS、AIDA 和 BAB 框架优化文案/组件（Hero、Features、Pricing）。聚焦 Core Web Vitals 和 SEO。
name: "landing-page-generator" description: "生成高转化率的 Next.js/React 落地页，使用 Tailwind CSS。采用 PAS、AIDA 和 BAB 框架优化文案/组件（Hero、Features、Pricing）。专注于 Core Web Vitals/SEO。" category: "front-end" risk: "safe" source: "community" date_added: "2026-03-18" author: "alirezarezvani" tags: ["nextjs", "react", "tailwind", "landing-page", "marketing", "seo", "cro"] tools: ["claude", "cursor", "gemini"]
落地页生成器
从产品描述生成高转化率落地页。输出完整的 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 区块变体（居中、分栏、渐变、视频背景、极简）
- Feature 区块（网格、交替、带图标卡片）
- 定价表（2-4 层级，含功能列表和切换）
- FAQ 手风琴，带 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 → Features → Pricing → FAQ → Testimonials → CTA → Footer。跳过与产品无关的区块。
- 对照 SEO 检查清单验证 — 在输出最终代码之前逐项检查 SEO 检查清单中的每一项。内联修复任何缺口。
- 输出最终组件 — 交付完整的、可直接复制粘贴的 TSX 文件，包含所有 Tailwind 类、SEO meta 和结构化数据。
触发本技能
Product: [name]
Tagline: [one sentence value prop]
Target audience: [who they are]
Key pain point: [what problem you solve]
Key benefit: [primary outcome]
Pricing tiers: [free/pro/enterprise or describe]
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： "Your team wastes 3 hours a day on manual reporting" / 副标题： "Every hour spent on spreadsheets is an hour not closing deals. Your competitors are already automated." / CTA： "Automate your reports in 10 minutes →"
AIDA（注意力 → 兴趣 → 欲望 → 行动）
- H1：大胆的吸引注意力声明 → 副标题：有趣的事实或利益 → Features：激发欲望的证据点 → CTA：清晰的行动
BAB（之前 → 之后 → 桥梁）
- H1：当前痛苦状态 → 副标题：理想未来状态 → CTA：连接两者的桥梁
