落地页生成器

landing-page-generator
分类商业
作者Alireza Rezvani
许可MIT
评分4.50/5
使用3.6K

落地页生成器 (Landing Page Generator)

根据产品描述生成高转化率的落地页。输出包含多个区域变体、经过验证的文案框架、SEO 优化和性能优先模式的完整 Next.js/React 组件。拒绝使用 Lorem Ipsum 填充文本 —— 提供真正能带来转化的实际文案。

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

---

核心能力

  • 5 种 Hero 区域变体（居中、分栏、渐变、视频背景、极简）
  • 特性展示区域（网格、交替布局、带图标的卡片）
  • 价格表（2-4 个档位，含功能列表和切换开关）
  • 带 Schema 标记的 FAQ 折叠面板
  • 用户证言（网格、轮播、单条引用）
  • CTA 区域（横幅、全页、内联）
  • 页脚（简单、巨型、极简）
  • 4 种基于 Tailwind 类集的视觉设计风格

---

生成工作流

对于每个落地页请求，请按顺序执行以下步骤：

1. 收集输入 —— 使用下方的触发格式收集产品名称、标语、目标受众、痛点、核心利益、价格档位、设计风格和文案框架。仅询问缺失的字段。
2. 分析品牌语调（推荐） —— 如果用户提供了现有的品牌内容（网站文案、博客文章、营销材料），请运行 marketing-skill/skills/content-production/scripts/brand_voice_analyzer.py 以获取语调概况（正式程度、语气、视角）。根据该概况决定设计风格和文案框架：
- 正式 + 专业 $\rightarrow$ enterprise 风格，AIDA 框架
- 随意 + 友好 $\rightarrow$ bold-startup 风格，BAB 框架
- 专业 + 权威 $\rightarrow$ dark-saas 风格，PAS 框架
- 随意 + 对话感 $\rightarrow$ clean-minimal 风格，BAB 框架
3. 选择设计风格 —— 将用户的选择（或根据语调分析推断的结果）映射到“设计风格参考”中的四组 Tailwind 类集之一。
4. 应用文案框架 —— 在生成组件之前，使用选定的框架（PAS / AIDA / BAB）编写所有标题和正文。全程保持与语调概况一致的正式程度和语气。
5. 按顺序生成区域 —— Hero $\rightarrow$ 特性 $\rightarrow$ 价格 $\rightarrow$ FAQ $\rightarrow$ 证言 $\rightarrow$ CTA $\rightarrow$ 页脚。跳过与产品无关的区域。
6. 对照 SEO 检查清单验证 —— 在输出最终代码前，逐项检查 SEO 检查清单，并直接在代码中修复缺失项。
7. 输出最终组件 —— 提供完整的、可直接复制粘贴的 TSX 文件，包含所有 Tailwind 类、SEO 元数据和结构化数据。

---

触发此技能

code
Product: [产品名称]
Tagline: [一句话价值主张]
Target audience: [目标受众]
Key pain point: [解决的痛点]
Key benefit: [核心收益]
Pricing tiers: [免费/专业/企业版 或 具体描述]
Design style: dark-saas | c
精简极简 | 大胆创业 | 企业级 文案框架：PAS | AIDA | BAB
code
---

设计风格参考


| 风格 | 背景 | 强调色 | 卡片 | 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：它是如何工作的（即桥梁）


---


代表性组件：Hero (居中渐变 — Dark SaaS)


将此作为所有 Hero 变体的结构模板。针对分栏、视频背景和极简变体，请更换布局类、渐变方向和图片位置。
tsx
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" />
现已开启公开 Beta 测试
</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
code
text-gray-500">无需信用卡 · 14 天免费试用</p>
      </div>
    </section>
  )
}

---

其他区块模式

功能特性区块（交替布局）

遍历包含 { title, description, image, badge } 的 features 数组。使用 i % 2 === 1 ? "lg:flex-row-reverse" : "" 切换布局方向。<Image> 组件需指定 width/height 并添加 rounded-2xl shadow-xl。外层包裹 <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。

带有 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、页脚

  • 客户证言 (Testimonials)： 采用网格布局 (grid-cols-1 md:grid-cols-3) 或带有头像、姓名、职位和引用文本的单条 Hero 块。
  • CTA 横幅： 全宽区块，包含主标题、副标题和两个按钮（主按钮 + 幽灵按钮）。紧随其后添加信任信号（如退款保证、Logo 墙）。
  • 页脚 (Footer)： 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
  • [ ] 核心 Web 指标：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 或静态生成 (SSG) |
| Bundle | < 100KB JS | 使用 @next/bundle-analyzer 进行审计 |

---

常见坑点

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

---

相关技能

  • 品牌语调分析器 (marketing-skill/skills/content-production/scripts/brand_voice_analyzer.py) —— 在生成前运行，以建立语调概况并确保文案一致性
  • UI 设计系统 (product-team/ui-design-system/) —— 在构建页面前，根据品牌色生成设计 Token
  • 竞品拆解 (product-team/competitive-teardown/) —— 竞品定位信息
微软落地页的消息传递与差异化策略