landing-page-generator

落地页生成器

根据产品描述生成高转化率的落地页。输出完整的 Next.js/React 组件，包含多种区块变体、经过验证的文案框架、SEO 优化以及性能优先的实现模式。不使用 lorem ipsum，而是可以真正带来转化的文案。

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

---

核心能力

• 5 种首屏区块变体（居中、分栏、渐变、视频背景、极简）
• 功能区块（网格、交替布局、带图标的卡片）
• 定价表（2–4 个档位，含功能列表与切换开关）
• 带 schema 标记的 FAQ 手风琴
• 用户评价（网格、轮播、单条引语）
• CTA 区块（横幅、整页、内嵌）
• 页脚（简约、超级、极简）
• 4 种设计风格及其 Tailwind 类集合

---

生成流程

每次落地页请求都按以下步骤依次执行：

1. 收集输入 — 使用下方的触发格式收集产品名称、标语、目标受众、痛点、核心优势、定价档位、设计风格和文案框架。仅询问缺失的字段。
2. 分析品牌语调（建议）— 如果用户已有品牌内容（网站文案、博客文章、营销材料），请将其交给 marketing-skill/skills/content-production/scripts/brand_voice_analyzer.py 处理，以获得语调画像（正式程度、语气、人称视角）。利用该画像指导设计风格和文案框架的选择：
   • 正式 + 专业 → enterprise 风格，AIDA 框架
   • 随性 + 友好 → bold-startup 风格，BAB 框架
   • 专业 + 权威 → dark-saas 风格，PAS 框架
   • 随性 + 对话式 → clean-minimal 风格，BAB 框架
3. 选择设计风格 — 将用户的选择（或从品牌语调分析中推断出的结果）映射到设计风格参考中的四套 Tailwind 类集合之一。
4. 应用文案框架 — 在生成组件之前，使用所选框架（PAS / AIDA / BAB）撰写全部标题与正文文案。全程保持与语调画像一致的正式程度和语气。
5. 按顺序生成区块 — 首屏 → 功能 → 定价 → FAQ → 用户评价 → CTA → 页脚。跳过与产品无关的区块。
6. 对照 SEO 清单验证 — 在输出最终代码之前，逐项检查 SEO 清单中的每一条，并就地修正所有缺口。
7. 输出最终组件 — 交付完整、可直接复制粘贴使用的 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：“你的团队每天在手动报告上浪费 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" />
          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" : "" 切换布局方向。使用 <Image> 并显式指定 width/height 以及 rounded-2xl shadow-xl。外层包裹在 <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 价格渲染为“Custom”。每个功能行使用 <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 + 导航列 + 社交链接 + 法律信息。使用 border-t border-gray-800 分隔线。

---

SEO 检查清单

• <title> 标签：主要关键词 + 品牌（50–60 个字符）
• Meta 描述：收益 + CTA（150–160 个字符）
• OG 图片：1200×630px，包含产品名称和标语
• H1：每页一个，包含主要关键词
• 结构化数据：FAQPage、Product 或 Organization schema
• 设置 Canonical URL
• 所有 <Image> 组件都有图片 alt 文本
• 配置 robots.txt 和 sitemap.xml
• Core Web Vitals：LCP < 1s，CLS < 0.1
• 存在移动端 viewport meta 标签
• 内部链接指向定价和文档

验证步骤： 在输出最终代码之前，验证上述每个检查清单项均已满足。就地修复任何缺口 — 不要跳过任何项。

---

性能目标

指标	目标	技术
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 文案过于含糊 — “Get started”胜过“Learn more”；“Start free trial”胜过“Sign up”
• 定价页缺少信任信号 — 在 CTA 附近添加退款保证和推荐语
• 移动端首屏没有 CTA — 确保按钮在 375px viewport 下无需滚动即可见

---

相关技能

• 品牌语调分析器（marketing-skill/skills/content-production/scripts/brand_voice_analyzer.py）：在生成内容前运行，用于确定语调画像并确保文案风格一致
• UI 设计系统（product-team/ui-design-system/）：在搭建页面前，根据品牌主色生成设计令牌
• 竞品拆解（product-team/competitive-teardown/）：竞争定位可为落地页的信息传达和差异化提供参考