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

根据产品描述生成高转化着陆页。输出完整的Next.js/React组件，包含多种板块变体、经过验证的文案框架、SEO优化以及性能优先的设计模式。生成的不是Lorem Ipsum占位文本，而是真正能带来转化的有效文案。

目标指标：LCP < 1s · CLS < 0.1 · FID < 100ms
输出内容：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种Hero板块变体（居中布局、分栏布局、渐变背景、视频背景、极简风格）
功能展示板块（网格布局、交替布局、带图标卡片）
定价表格（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框架
- 随性+友好 → 大胆创业风，BAB框架
- 专业+权威 → 深色SaaS风，PAS框架
- 随性+口语化 → 极简清新风，BAB框架
选择设计风格 — 将用户选择（或从品牌调性分析推断出的风格）对应到《设计风格参考》中的四种Tailwind类名集合。
应用文案框架 — 在生成组件前，使用选定的框架（PAS / AIDA / BAB）撰写所有标题和正文文案。全程匹配调性档案的正式程度和语气。
按顺序生成板块 — Hero → 功能 → 定价 → 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按钮
深色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
类名。

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)

代表性组件：Hero（居中渐变 — 深色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>
  )
}

以此作为所有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" />
          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.

遍历

features

数组（包含

{ title, description, image, badge }

）。通过

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

遍历

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

。

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
```
）或带头像、姓名、职位和引用文本的单条引用Hero块。
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字符）
元描述：核心收益 + CTA（150–160字符）
OG图片：1200×630px，包含产品名称和标语
H1标签：每页一个，包含核心关键词
结构化数据：添加FAQPage、Product或Organization类型的Schema
设置规范URL
所有
```
<Image>
```
组件添加图片替代文本
配置robots.txt和sitemap.xml
Core Web Vitals指标：LCP < 1s，CLS < 0.1
存在移动端视口元标签
内部链接到定价页和文档页

验证步骤：输出最终代码前，确认上述清单中的所有项目均已满足。即时修复任何遗漏问题，不得跳过。

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	< 1s	预加载Hero图片，在Next/Image组件上使用 `priority` 属性
CLS	< 0.1	为所有图片设置明确的宽高
FID/INP	< 100ms	延迟加载非关键JS，使用 `loading="lazy"`
TTFB	< 200ms	对着陆页使用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

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