落地页生成器是做什么的？

根据产品描述生成高转化率的落地页。输出包含多个区块变体的完整 Next.js/React 组件、经过验证的文案框架、SEO 优化和性能优先的代码模式。并非占位符文本，而是真正能产生转化的文案。

目标： LCP < 1s · CLS < 0.1 · FID < 100ms
输出： TSX 组件 + Tailwind 样式 + SEO 元数据 + 文案变体

使用时机

需要在 Next.js 或 React 中生成营销落地页。
任务涉及以转化为核心的页面结构、区块变体、Tailwind 样式或 SEO 感知文案。
希望从产品描述生成完整的落地页，而不是孤立的 UI 片段。

核心能力

5 种 Hero 区块变体（居中、分割、渐变、视频背景、极简）
功能区块（网格、交替、带图标的卡片）
定价表（2–4 个层级，包含功能列表和切换开关）
常见问题手风琴（FAQ accordion）及 Schema 标记
评价（网格、轮播、单引述）
CTA 区块（横幅、全页、内联）
页脚（简单、复杂、极简）
4 种设计风格及其 Tailwind 样式集

生成工作流

对每个落地页请求，请按以下步骤操作：

收集输入 —— 使用下面的触发格式收集产品名称、标语、受众、痛点、关键优势、定价层级、设计风格和文案框架。只询问缺失的字段。
分析品牌声音（推荐） —— 如果用户有现有的品牌内容（网站文案、博客文章、营销材料），通过 marketing-skill/content-production/scripts/brand_voice_analyzer.py 运行，获取声音档案（正式程度、语气、视角）。使用该档案来指导设计风格和文案框架的选择：
- 正式 + 专业 → 企业风格，AIDA 框架
- 随意 + 友好 → 大胆初创风格，BAB 框架
- 专业 + 权威 → 暗色 SaaS风格，PAS 框架
- 随意 + 对话式 → 简洁极简风格，BAB 框架
选择设计风格 —— 将用户的选择（或从品牌声音分析推断出的风格）映射到设计风格参考中的四种 Tailwind 样式集之一。
应用文案框架 —— 在生成组件之前，使用所选框架（PAS / AIDA / BAB）编写所有标题和正文文案。全程匹配声音档案的正式程度和语气。
按顺序生成区块 —— Hero → 功能 → 定价 → FAQ → 评价 → CTA → 页脚。跳过与产品无关的区块。
对照 SEO 清单验证 —— 在输出最终代码前，逐一检查 SEO 清单中的每一项。即时修复任何漏洞。
输出最终组件 —— 交付包含所有 Tailwind 类、SEO 元数据和结构化数据的完整、可复制粘贴的 TSX 文件。

触发此技能

产品: [名称]
标语: [一句价值主张]
目标受众: [他们是谁]
关键痛点: [你解决了什么问题]
核心优势: [主要成果]
定价层级: [免费/专业/企业 或描述]
设计风格: dark-saas | clean-minimal | bold-startup | enterprise
文案框架: PAS | AIDA | BAB

设计风格参考

风格	背景	强调色	卡片	CTA 按钮
暗色 SaaS	`bg-gray-950 text-white`	`violet-500/400`	`bg-gray-900 border border-gray-800`	`bg-violet-600 hover:bg-violet-500`
简洁极简	`bg-white text-gray-900`	`blue-600`	`bg-gray-50 border border-gray-200 rounded-2xl`	`bg-blue-600 hover:bg-blue-700`
大胆初创	`bg-white text-gray-900`	`orange-500`	`shadow-xl rounded-3xl`	`bg-orange-500 hover:bg-orange-600 text-white`
企业	`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`

大胆初创 标题：为所有 <h1>/<h2> 元素添加 font-black tracking-tight。

文案框架

PAS（问题 → 加剧 → 解决方案）

H1：他们所处的痛苦状态
副标题：不解决会发生什么
CTA：你提供的方案
示例 —— H1： “你的团队每天花 3 小时进行手动报告” / 副标题： “花在电子表格上的每一小时，都是未能成交的一小时。你的竞争对手已经自动化了。” / CTA： “10 分钟自动化你的报告 →”

AIDA（注意 → 兴趣 → 欲望 → 行动）

H1：大胆吸引注意力的陈述 → 副标题：有趣的事实或优势 → 功能：建立欲望的证明点 → CTA：明确的行动号召

BAB（以前 → 以后 → 桥梁）

H1：“[以前的状态] → [以后的状态]” → 副标题：“以下是如何[产品]填补差距” → 功能：工作原理（桥梁）

代表组件：Hero（居中渐变 — 暗色 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" />
          现在公开测试
        </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>
  )
}

其他区块模式

功能区块（交替）

遍历 features 数组（包含 { title, description, image, badge }）。使用 i % 2 === 1 ? "lg:flex-row-reverse" : "" 切换布局方向。使用带有明确 width/height 和 rounded-2xl shadow-xl 的 <Image> 组件。包裹在 <section className="py-24"> 中，容器使用 max-w-6xl。

定价表

遍历 plans 数组（包含 { name, price, description, features[], cta, highlighted }）。高亮计划使用 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。

带 Schema 标记的 FAQ

在区块内通过 <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} /> 注入 FAQPage JSON-LD。将 { q, a } 格式的 FAQ 数据映射到 shadcn 的 <Accordion>，使用 type="single" collapsible。容器类：max-w-3xl。

评价、CTA、页脚

评价： 网格布局（grid-cols-1 md:grid-cols-3）或带头像、姓名、角色和引用文本的单引述 hero 块。
CTA 横幅： 全宽区块，包含标题、副标题和两个按钮（主按钮 + 幽灵按钮）。紧接下方添加信任信号（退款保证、Logo 条）。
页脚： Logo + 导航列 + 社交链接 + 法律信息。使用 border-t border-gray-800 分隔线。

SEO 清单

验证步骤： 在输出最终代码前，确保清单中的每一项都已满足。即时修复漏洞 —— 不可跳过任何项目。

性能目标

指标	目标	技术
LCP	< 1s	预加载 Hero 图片，在 Next/Image 上使用 `priority`
CLS	< 0.1	为所有图片设置明确的 `width`/`height`
FID/INP	< 100ms	延迟非关键 JS，使用 `loading="lazy"`
TTFB	< 200ms	落地页使用 ISR 或静态生成
Bundle	< 100KB JS	使用 `@next/bundle-analyzer` 进行审计

常见陷阱

Hero 图片未预加载 —— 为第一个 <Image> 添加 priority 属性
缺少移动端断点 —— 始终使用 sm: 前缀进行移动优先设计
CTA 文案过于模糊 —— “立即开始”优于“了解更多”；“开始免费试用”优于“注册”
定价页面缺少信任信号 —— 在 CTA 附近添加退款保证和评价
移动端首屏无 CTA 按钮 —— 确保在 375px 视口下无需滚动即可看到按钮

落地页生成器