landing-page-generator

落地页生成器

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

目标： LCP < 1s · CLS < 0.1 · INP < 200ms 输出： TSX 组件 + Tailwind 样式 + SEO 元信息 + 文案变体

适用场景

• 你需要用 Next.js 或 React 生成营销落地页。
• 任务涉及以转化为导向的页面结构、区块变体、Tailwind 样式或兼顾 SEO 的文案。
• 你希望根据产品描述生成完整落地页，而非零散的 UI 片段。

证据与实现限制

无法保证任何转化效果。框架示例使用虚构的数据和客户评价；仅发布有依据的数据、经授权的徽标／推荐语、实际提供的保证及已核实的定价。文中引用的品牌分析器／UI 系统／拆解路径并未随附；请使用可用且经过审查的工具，或手动分析。脚手架只是部分起点：它未实现所有主视觉变体、FAQ schema、计费切换、集成或经测量的性能审计。请核实导入项（Button/Image/Accordion/Check）、无障碍性、路由以及实际构建／渲染行为。仅凭检查源代码，切勿声称 Core Web Vitals 已通过。

核心功能

• 5 种主视觉区块变体（居中、分栏、渐变、视频背景、极简）
• 功能区块（网格、交替排列、带图标的卡片）
• 定价表（2–4 个档位，含功能列表和切换控件）
• 带 schema 标记的 FAQ 手风琴
• 用户推荐（网格、轮播、单条引言）
• CTA 区块（横幅、整页、行内）
• 页脚（简洁、超大、极简）
• 4 种设计风格及对应的 Tailwind 类名集

---

生成工作流

每次收到落地页请求，都按顺序执行以下步骤：

1. 收集输入 — 按照下方的触发格式，收集产品名称、标语、受众、痛点、主要优势、定价档位、设计风格和文案框架。只询问缺失的信息。
2. 分析品牌语气（推荐）— 如果用户已有品牌内容（网站文案、博客文章、营销材料），请用 marketing-skill/content-production/scripts/brand_voice_analyzer.py 分析，获取语气档案（正式程度、语气、视角）。根据档案选择设计风格和文案框架：
   • 正式 + 专业 → 企业风格、AIDA 框架
   • 随意 + 友好 → 大胆初创风格、BAB 框架
   • 专业 + 权威 → 暗色 SaaS 风格、PAS 框架
   • 随意 + 对话式 → 简洁极简风格、BAB 框架
3. 选择设计风格 — 将用户的选择（或从品牌语气分析推断的风格）映射到“设计风格参考”中的四组 Tailwind 类名之一。
4. 应用文案框架 — 生成组件前，使用选定的框架（PAS / AIDA / BAB）撰写所有标题和正文文案。全文保持与语气档案一致的正式程度和语气。
5. 按顺序生成区块 — 主视觉 → 功能 → 定价 → FAQ → 用户推荐 → CTA → 页脚。跳过与产品无关的区块。
6. 根据 SEO 检查清单进行验证 — 输出最终代码前，逐项检查 SEO 清单。发现遗漏时立即修正。
7. 输出最终组件 — 提供完整、可直接复制粘贴的 TSX 文件，包含所有 Tailwind 类名、SEO 元信息和结构化数据。

---

触发此技能

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 按钮
深色 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" />
          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).replace(/</g, "\\u003c") }} /> 注入 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 检查清单

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

**验证步骤：**输出最终代码前，确认以上检查清单中的每一项都已满足。直接修复遗漏项——不要跳过任何项目。

---

性能目标

指标	目标	技术
LCP	< 1s	预加载主视觉图片，在 Next/Image 上使用 priority
CLS	< 0.1	为所有图片设置明确的宽度和高度
INP	< 200ms	延迟加载非关键 JS，使用 loading="lazy"
TTFB	< 200ms	为落地页使用 ISR 或静态生成
包体积	< 100KB JS	使用 @next/bundle-analyzer 进行审查

---

常见问题

• 主视觉图片未预加载 — 为第一个 <Image> 添加 priority 属性
• 缺少移动端断点 — 始终采用移动端优先的设计，并使用 sm: 前缀
• CTA 文案太含糊 — “立即开始”胜过“了解更多”；“开始免费试用”胜过“注册”
• 定价页面缺少信任标识 — 在 CTA 附近添加退款保证和客户评价
• 移动端首屏没有 CTA — 确保按钮在 375px 视口中无需滚动即可看到

---

相关技能

• Brand Voice Analyzer（marketing-skill/content-production/scripts/brand_voice_analyzer.py）— 生成前运行，以建立语气风格档案并确保文案一致
• UI Design System（product-team/ui-design-system/）— 构建页面前，根据品牌颜色生成设计令牌
• Competitive Teardown（product-team/competitive-teardown/）— 竞争定位有助于制定落地页文案和差异化策略

限制

• 仅当任务明确符合上述范围时，才使用此技能。
• 请勿将输出视为针对特定环境进行验证、测试或专家审核的替代品。
• 如果缺少必要的输入、权限、安全边界或成功标准，请暂停并请求澄清。