landing-page-generator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Landing Page Generator

着陆页生成器

Generate high-converting landing pages from a product description. Output complete Next.js/React components with multiple section variants, proven copy frameworks, SEO optimization, and performance-first patterns. Not lorem ipsum — actual copy that converts.

Target: LCP < 1s · CLS < 0.1 · FID < 100ms
Output: TSX components + Tailwind styles + SEO meta + copy variants

根据产品描述生成高转化着陆页。输出包含多区域变体、经过验证的文案框架、SEO优化和性能优先模式的完整Next.js/React组件。并非占位文本——而是真正能带来转化的文案。

目标指标： LCP < 1秒 · CLS < 0.1 · FID < 100毫秒
输出内容： TSX组件 + Tailwind样式 + SEO元数据 + 多版本文案

Core Capabilities

核心功能

5 hero section variants (centered, split, gradient, video-bg, minimal)
Feature sections (grid, alternating, cards with icons)
Pricing tables (2–4 tiers with feature lists and toggle)
FAQ accordion with schema markup
Testimonials (grid, carousel, single-quote)
CTA sections (banner, full-page, inline)
Footer (simple, mega, minimal)
4 design styles with Tailwind class sets

5种英雄区变体（居中布局、分栏布局、渐变背景、视频背景、极简风格）
功能展示区（网格布局、交替布局、带图标卡片）
定价表（2-4个套餐层级，含功能列表与切换按钮）
带Schema标记的FAQ折叠面板
客户评价（网格布局、轮播、单条引用）
CTA区域（横幅式、全屏式、嵌入式）
页脚（简洁版、巨型版、极简版）
4种搭配Tailwind类集的设计风格

Generation Workflow

生成流程

Follow these steps in order for every landing page request:

Gather inputs — collect product name, tagline, audience, pain point, key benefit, pricing tiers, design style, and copy framework using the trigger format below. Ask only for missing fields.
Analyze brand voice (recommended) — if the user has existing brand content (website copy, blog posts, marketing materials), run it through
```
marketing-skill/content-production/scripts/brand_voice_analyzer.py
```
to get a voice profile (formality, tone, perspective). Use the profile to inform design style and copy framework selection:
- formal + professional → enterprise style, AIDA framework
- casual + friendly → bold-startup style, BAB framework
- professional + authoritative → dark-saas style, PAS framework
- casual + conversational → clean-minimal style, BAB framework
Select design style — map the user's choice (or infer from brand voice analysis) to one of the four Tailwind class sets in the Design Style Reference.
Apply copy framework — write all headline and body copy using the chosen framework (PAS / AIDA / BAB) before generating components. Match the voice profile's formality and tone throughout.
Generate sections in order — Hero → Features → Pricing → FAQ → Testimonials → CTA → Footer. Skip sections not relevant to the product.
Validate against SEO checklist — run through every item in the SEO Checklist before outputting final code. Fix any gaps inline.
Output final components — deliver complete, copy-paste-ready TSX files with all Tailwind classes, SEO meta, and structured data included.

针对每一个着陆页请求，按以下顺序执行步骤：

收集输入信息 —— 使用下方触发格式收集产品名称、标语、目标受众、核心痛点、核心收益、定价层级、设计风格和文案框架。仅询问缺失的字段。
分析品牌语调（推荐）—— 如果用户已有品牌内容（网站文案、博客文章、营销物料），运行
```
marketing-skill/content-production/scripts/brand_voice_analyzer.py
```
获取语调档案（正式度、语气、视角）。根据该档案选择设计风格和文案框架：
- 正式+专业 → 企业级风格，AIDA框架
- 随性+友好 → 初创 Bold风格，BAB框架
- 专业+权威 → 深色SaaS风格，PAS框架
- 随性+口语化 → 极简清新风格，BAB框架
选择设计风格 —— 将用户选择（或从品牌语调分析中推断）映射到设计风格参考中的四种Tailwind类集之一。
应用文案框架 —— 在生成组件前，使用选定框架（PAS / AIDA / BAB）撰写所有标题和正文文案。全程匹配语调档案的正式度和语气。
按顺序生成区域 —— 英雄区 → 功能区 → 定价区 → FAQ → 客户评价 → CTA → 页脚。跳过与产品无关的区域。
对照SEO清单验证 —— 在输出最终代码前，逐一检查SEO清单中的所有项目。实时修复任何遗漏问题。
输出最终组件 —— 交付可直接复制粘贴的完整TSX文件，包含所有Tailwind类、SEO元数据和结构化数据。

Triggering This Skill

触发该技能

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

Product: [产品名称]
Tagline: [一句话价值主张]
Target audience: [目标受众]
Key pain point: [解决的核心痛点]
Key benefit: [核心收益]
Pricing tiers: [免费/专业/企业版或描述]
Design style: dark-saas | clean-minimal | bold-startup | enterprise
Copy framework: PAS | AIDA | BAB

Design Style Reference

设计风格参考

Style	Background	Accent	Cards	CTA Button
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 headings: add
font-black tracking-tight
to all
<h1>
/
<h2>
elements.

风格	背景	强调色	卡片	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
类。

Copy Frameworks

文案框架

PAS (Problem → Agitate → Solution)

H1: Painful state they're in
Sub: What happens if they don't fix it
CTA: What you offer
Example — H1: "Your team wastes 3 hours a day on manual reporting" / Sub: "Every hour spent on spreadsheets is an hour not closing deals. Your competitors are already automated." / CTA: "Automate your reports in 10 minutes →"

AIDA (Attention → Interest → Desire → Action)

H1: Bold attention-grabbing statement → Sub: Interesting fact or benefit → Features: Desire-building proof points → CTA: Clear action

BAB (Before → After → Bridge)

H1: "[Before state] → [After state]" → Sub: "Here's how [product] bridges the gap" → Features: How it works (the bridge)

PAS（问题 → 激化 → 解决方案）

H1：用户当前的痛苦状态
副标题：不解决问题的后果
CTA：你的产品提供的方案
示例——H1: "你的团队每天浪费3小时在手动报告上" / 副标题: "花在电子表格上的每一小时，都是没能完成交易的一小时。你的竞争对手已经实现自动化了。" / CTA: "10分钟内完成报告自动化 →"

AIDA（吸引注意 → 激发兴趣 → 唤起欲望 → 促进行动）

H1：醒目的吸睛语句 → 副标题：有趣的事实或收益 → 功能：构建欲望的证明点 → CTA：明确的行动指令

BAB（之前 → 之后 → 桥梁）

H1："[之前状态] → [之后状态]" → 副标题："这就是[产品]如何搭建桥梁的方式" → 功能：产品运作原理（即桥梁）

Representative Component: Hero (Centered Gradient — Dark SaaS)

代表性组件：英雄区（居中渐变——Dark SaaS风格）

Use this as the structural template for all hero variants. Swap layout classes, gradient direction, and image placement for split, video-bg, and minimal variants.

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" />
          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>
  )
}

以此作为所有英雄区变体的结构模板。针对分栏、视频背景和极简变体，替换布局类、渐变方向和图片位置。

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" />
          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>
  )
}

Other Section Patterns

其他区域模式

Feature Section (Alternating)

功能展示区（交替布局）

Map over a

features

array with

{ title, description, image, badge }

. Toggle layout direction with

i % 2 === 1 ? "lg:flex-row-reverse" : ""

. Use

<Image>

with explicit

width

height

and

rounded-2xl shadow-xl

. Wrap in

<section className="py-24">

with

max-w-6xl

container.

遍历包含

{ title, description, image, badge }

的

features

数组。通过

i % 2 === 1 ? "lg:flex-row-reverse" : ""

切换布局方向。使用带明确

width

height

和

rounded-2xl shadow-xl

的

<Image>

组件。包裹在带有

max-w-6xl

容器的

<section className="py-24">

中。

Pricing Table

定价表

Map over a

plans

array with

{ name, price, description, features[], cta, highlighted }

. Highlighted plan gets

border-2 border-violet-500 bg-violet-950/50 ring-4 ring-violet-500/20

; others get

border border-gray-800 bg-gray-900

. Render

null

price as "Custom". Use

<Check>

icon per feature row. Layout:

grid gap-8 lg:grid-cols-3

遍历包含

{ 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

时显示“Custom”。每行功能使用

<Check>

图标。布局：

grid gap-8 lg:grid-cols-3

。

FAQ with Schema Markup

带Schema标记的FAQ

Inject

FAQPage

JSON-LD via

<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} />

inside the section. Map FAQs with

{ q, a }

into shadcn

<Accordion>

with

type="single" collapsible

. Container:

max-w-3xl

在区域内通过

<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} />

注入

FAQPage

JSON-LD。将包含

{ q, a }

的FAQ列表映射到shadcn的

<Accordion>

组件，设置

type="single" collapsible

。容器：

max-w-3xl

。

Testimonials, CTA, Footer

客户评价、CTA、页脚

Testimonials: Grid (
```
grid-cols-1 md:grid-cols-3
```
) or single-quote hero block with avatar, name, role, and quote text.
CTA Banner: Full-width section with headline, subhead, and two buttons (primary + ghost). Add trust signals (money-back guarantee, logo strip) immediately below.
Footer: Logo + nav columns + social links + legal. Use
```
border-t border-gray-800
```
separator.

客户评价： 网格布局（
```
grid-cols-1 md:grid-cols-3
```
）或包含头像、姓名、职位和引用文本的单条引用英雄模块。
CTA横幅： 全宽区域，包含标题、副标题和两个按钮（主按钮 + 幽灵按钮）。下方立即添加信任标识（退款保证、品牌logo栏）。
页脚： Logo + 导航列 + 社交链接 + 法律声明。使用
```
border-t border-gray-800
```
分隔线。

SEO Checklist

SEO清单

```
<title>
```
tag: primary keyword + brand (50–60 chars)
Meta description: benefit + CTA (150–160 chars)
OG image: 1200×630px with product name and tagline
H1: one per page, includes primary keyword
Structured data: FAQPage, Product, or Organization schema
Canonical URL set
Image alt text on all
```
<Image>
```
components
robots.txt and sitemap.xml configured
Core Web Vitals: LCP < 1s, CLS < 0.1
Mobile viewport meta tag present
Internal linking to pricing and docs

Validation step: Before outputting final code, verify every checklist item above is satisfied. Fix any gaps inline — do not skip items.

```
<title>
```
标签：主关键词 + 品牌（50-60字符）
Meta描述：收益 + CTA（150-160字符）
OG图片：1200×630像素，包含产品名称和标语
H1：每页一个，包含主关键词
结构化数据：FAQPage、Product或Organization Schema
设置规范URL
所有
```
<Image>
```
组件添加图片替代文本
配置robots.txt和sitemap.xml
Core Web Vitals指标：LCP < 1秒，CLS < 0.1
存在移动端视口Meta标签
内部链接到定价页和文档页

验证步骤： 输出最终代码前，确认上述清单中的每一项都已满足。实时修复任何遗漏——请勿跳过任何项目。

Performance Targets

性能目标

Metric	Target	Technique
LCP	< 1s	Preload hero image, use `priority` on Next/Image
CLS	< 0.1	Set explicit width/height on all images
FID/INP	< 100ms	Defer non-critical JS, use `loading="lazy"`
TTFB	< 200ms	Use ISR or static generation for landing pages
Bundle	< 100KB JS	Audit with `@next/bundle-analyzer`

指标	目标值	实现技巧
LCP	< 1秒	预加载英雄图片，在Next/Image上使用 `priority` 属性
CLS	< 0.1	为所有图片设置明确的宽高
FID/INP	< 100毫秒	延迟加载非关键JS，使用 `loading="lazy"`
TTFB	< 200毫秒	对着陆页使用ISR或静态生成
打包体积	< 100KB JS	使用 `@next/bundle-analyzer` 进行审计

Common Pitfalls

常见陷阱

Hero image not preloaded — add
```
priority
```
prop to first
```
<Image>
```
Missing mobile breakpoints — always design mobile-first with
```
sm:
```
prefixes
CTA copy too vague — "Get started" beats "Learn more"; "Start free trial" beats "Sign up"
Pricing page missing trust signals — add money-back guarantee and testimonials near CTA
No above-the-fold CTA on mobile — ensure button is visible without scrolling on 375px viewport

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