landing-page-guide

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Landing Page Guide

落地页指南

Overview

概述

This skill enables creation of professional, high-converting landing pages following the 11 essential elements framework from DESIGNNAS. It provides complete implementation patterns for Next.js 14+ and React with ShadCN UI integration, ensuring every landing page includes proper SEO optimization, accessibility standards, and conversion-focused design.

本技能遵循DESIGNNAS的11项核心要素框架，可帮助创建专业的高转化落地页。它提供了Next.js 14+和React结合ShadCN UI的完整实现方案，确保每个落地页都包含完善的SEO优化、无障碍标准和以转化为核心的设计。

When to Use This Skill

适用场景

Use this skill when users request:

Creation of landing pages, marketing pages, or product pages
Next.js or React-based promotional websites
Pages that need to convert visitors into customers
Professional marketing pages with SEO optimization
Landing pages following industry best practices

在用户提出以下需求时使用本技能：

创建落地页、营销页或产品页
基于Next.js或React的推广网站
需要将访客转化为客户的页面
经过SEO优化的专业营销页
遵循行业最佳实践的落地页

The 11 Essential Elements Framework

11项核心要素框架

Every effective landing page must include these 11 essential elements. These are based on DESIGNNAS's proven framework for high-converting landing pages:

URL with Keywords - SEO-optimized, descriptive URL structure
Company Logo - Brand identity placed prominently (top-left)
SEO-Optimized Title and Subtitle - Clear value proposition with keywords
Primary CTA - Main call-to-action button in hero section
Social Proof - Reviews, ratings, user statistics
Images or Videos - Visual demonstration of product/service
Core Benefits/Features - 3-6 key advantages with icons
Customer Testimonials - 4-6 authentic reviews with photos
FAQ Section - 5-10 common questions with accordion UI
Final CTA - Bottom call-to-action for second chance conversion
Contact Information/Legal Pages - Footer with complete information

Critical: All 11 elements must be included in every landing page. No exceptions.

For detailed explanations of each element, refer to

references/11-essential-elements.md

每个高效的落地页都必须包含以下11项核心要素，这些要素基于DESIGNNAS经过验证的高转化落地页框架：

含关键词的URL - 经过SEO优化的描述性URL结构
企业Logo - 品牌标识放置在显眼位置（左上角）
SEO优化的标题和副标题 - 包含关键词的清晰价值主张
主要CTA - 英雄区的主要行动召唤按钮
社交证明 - 评价、评分、用户数据
图片或视频 - 产品/服务的可视化展示
核心优势/功能 - 搭配图标列出3-6个关键优势
客户评价 - 4-6条带照片的真实评价
FAQ板块 - 5-10个常见问题，采用折叠面板UI
最终CTA - 页面底部的二次转化行动召唤
联系信息/法律页面 - 包含完整信息的页脚

重要提示： 所有11项要素必须包含在每个落地页中，无一例外。

如需了解每个要素的详细说明，请参考

references/11-essential-elements.md

。

Technology Stack Requirements

技术栈要求

When creating landing pages, always use:

创建落地页时，请始终使用以下技术：

Required Technologies

必备技术

Next.js 14+ with App Router
TypeScript for type safety
Tailwind CSS for styling
ShadCN UI for all UI components

Next.js 14+ 搭配App Router
TypeScript 确保类型安全
Tailwind CSS 用于样式设计
ShadCN UI 用于所有UI组件

ShadCN UI Components to Install

需安装的ShadCN UI组件

Before creating any landing page, ensure these components are installed:

bash

npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add accordion
npx shadcn-ui@latest add badge
npx shadcn-ui@latest add avatar
npx shadcn-ui@latest add separator
npx shadcn-ui@latest add input

在创建任何落地页之前，请确保已安装以下组件：

bash

npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add accordion
npx shadcn-ui@latest add badge
npx shadcn-ui@latest add avatar
npx shadcn-ui@latest add separator
npx shadcn-ui@latest add input

Why ShadCN UI?

为什么选择ShadCN UI？

Accessibility: WCAG-compliant components
Customizable: Fully customizable with Tailwind CSS
Type-safe: Written in TypeScript
Performance: Copy only what you need, minimal bundle size
Consistency: Built-in design system

无障碍性：符合WCAG标准的组件
可定制性：通过Tailwind CSS完全定制
类型安全：基于TypeScript编写
性能优异：仅复制所需内容，最小化包体积
一致性：内置设计系统

Project Structure

项目结构

Create landing pages with this structure:

landing-page/
├── app/
│   ├── layout.tsx          # Root layout with metadata
│   ├── page.tsx            # Main landing page
│   └── globals.css         # Global styles
├── components/
│   ├── Header.tsx          # Logo & Navigation (Element 2)
│   ├── Hero.tsx            # Title, CTA, Social Proof (Elements 3-5)
│   ├── MediaSection.tsx    # Images/Videos (Element 6)
│   ├── Benefits.tsx        # Core Benefits (Element 7)
│   ├── Testimonials.tsx    # Customer Reviews (Element 8)
│   ├── FAQ.tsx             # FAQ Accordion (Element 9)
│   ├── FinalCTA.tsx        # Bottom CTA (Element 10)
│   └── Footer.tsx          # Contact & Legal (Element 11)
├── public/
│   └── images/             # Optimized images
└── package.json

请按照以下结构创建落地页：

landing-page/
├── app/
│   ├── layout.tsx          # 包含元数据的根布局
│   ├── page.tsx            # 主落地页
│   └── globals.css         # 全局样式
├── components/
│   ├── Header.tsx          # Logo与导航（要素2）
│   ├── Hero.tsx            # 标题、CTA、社交证明（要素3-5）
│   ├── MediaSection.tsx    # 图片/视频（要素6）
│   ├── Benefits.tsx        # 核心优势（要素7）
│   ├── Testimonials.tsx    # 客户评价（要素8）
│   ├── FAQ.tsx             # FAQ折叠面板（要素9）
│   ├── FinalCTA.tsx        # 底部CTA（要素10）
│   └── Footer.tsx          # 联系信息与法律链接（要素11）
├── public/
│   └── images/             # 优化后的图片
└── package.json

Implementation Workflow

实施流程

Step 1: Setup Metadata (SEO)

步骤1：设置元数据（SEO）

Always start with proper SEO metadata in

layout.tsx

page.tsx

typescript

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'SEO Optimized Title with Keywords | Brand Name',
  description: 'Compelling description with main keywords',
  keywords: ['keyword1', 'keyword2', 'keyword3'],
  openGraph: {
    title: 'OG Title',
    description: 'OG Description',
    images: ['/og-image.jpg'],
  },
}

请始终从

layout.tsx

或

page.tsx

中配置完善的SEO元数据开始：

typescript

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'SEO Optimized Title with Keywords | Brand Name',
  description: 'Compelling description with main keywords',
  keywords: ['keyword1', 'keyword2', 'keyword3'],
  openGraph: {
    title: 'OG Title',
    description: 'OG Description',
    images: ['/og-image.jpg'],
  },
}

Step 2: Create Component Structure

步骤2：创建组件结构

Build components in this order to ensure proper flow:

Header with logo (Element 2)
Hero section with title, subtitle, primary CTA, and social proof (Elements 3-5)
MediaSection with product images/videos (Element 6)
Benefits section with 3-6 feature cards (Element 7)
Testimonials with customer reviews (Element 8)
FAQ with accordion (Element 9)
FinalCTA at bottom (Element 10)
Footer with contact and legal links (Element 11)

请按照以下顺序构建组件，确保流程合理：

Header 包含Logo（要素2）
Hero 板块包含标题、副标题、主要CTA和社交证明（要素3-5）
MediaSection 包含产品图片/视频（要素6）
Benefits 板块包含3-6个功能卡片（要素7）
Testimonials 包含客户评价（要素8）
FAQ 包含折叠面板（要素9）
FinalCTA 位于页面底部（要素10）
Footer 包含联系信息和法律链接（要素11）

Step 3: Use ShadCN UI Components

步骤3：使用ShadCN UI组件

Map each section to appropriate ShadCN components:

Hero CTA: Use
```
Button
```
component with size="lg"
Benefits: Use
```
Card
```
,
```
CardHeader
```
,
```
CardTitle
```
,
```
CardContent
```
Testimonials: Use
```
Card
```
,
```
Avatar
```
,
```
Badge
```

FAQ: Use

Accordion

AccordionItem

AccordionTrigger

AccordionContent

Final CTA: Use
```
Button
```
and
```
Card
```
Footer: Use
```
Separator
```
,
```
Input
```
for newsletter

将每个板块映射到合适的ShadCN组件：

Hero CTA：使用
```
Button
```
组件，设置size="lg"
Benefits：使用
```
Card
```
,
```
CardHeader
```
,
```
CardTitle
```
,
```
CardContent
```
Testimonials：使用
```
Card
```
,
```
Avatar
```
,
```
Badge
```

FAQ：使用

Accordion

AccordionItem

AccordionTrigger

AccordionContent

Final CTA：使用
```
Button
```
和
```
Card
```
Footer：使用
```
Separator
```
,
```
Input
```
用于邮件订阅

Step 4: Implement Responsive Design

步骤4：实现响应式设计

Ensure mobile-first responsive design:

Use Tailwind responsive prefixes:
```
sm:
```
,
```
md:
```
,
```
lg:
```
,
```
xl:
```
Test all breakpoints: 640px (sm), 768px (md), 1024px (lg), 1280px (xl)
Minimum touch target size: 44x44px for buttons
Base font size: minimum 16px on mobile

确保采用移动优先的响应式设计：

使用Tailwind响应式前缀：
```
sm:
```
,
```
md:
```
,
```
lg:
```
,
```
xl:
```
测试所有断点：640px（sm）、768px（md）、1024px（lg）、1280px（xl）
按钮的最小触摸目标尺寸：44x44px
移动端基础字体大小：最小16px

Step 5: Optimize Performance

步骤5：优化性能

Use Next.js
```
Image
```
component for all images
Add
```
priority
```
prop to above-the-fold images
Implement lazy loading for below-the-fold content
Use dynamic imports for heavy components if needed

所有图片使用Next.js
```
Image
```
组件
首屏图片添加
```
priority
```
属性
首屏以下内容实现懒加载
如有需要，对重型组件使用动态导入

Step 6: Ensure Accessibility

步骤6：确保无障碍性

Use semantic HTML5 elements (
```
<header>
```
,
```
<main>
```
,
```
<section>
```
,
```
<footer>
```
)
Add ARIA labels where needed
Ensure keyboard navigation works
Provide alt text for all images
Maintain sufficient color contrast (WCAG AA minimum)

使用语义化HTML5元素（
```
<header>
```
,
```
<main>
```
,
```
<section>
```
,
```
<footer>
```
）
必要时添加ARIA标签
确保键盘导航可用
所有图片添加替代文本
保持足够的颜色对比度（至少符合WCAG AA标准）

Component Examples

组件示例

For complete, production-ready component implementations using ShadCN UI, refer to

references/component-examples.md

This reference file includes:

Hero section with Button, Badge, and Image optimization
Benefits section with Card components
Testimonials with Avatar and Card
FAQ with Accordion
Final CTA with Card and Button
Footer with Separator and links

Load this reference when implementing components to follow best practices.

如需使用ShadCN UI的完整生产级组件实现示例，请参考

references/component-examples.md

。

该参考文件包含：

搭配Button、Badge和图片优化的Hero板块
使用Card组件的Benefits板块
搭配Avatar和Card的Testimonials
使用Accordion的FAQ
搭配Card和Button的Final CTA
包含Separator和链接的Footer

在实现组件时，请加载此参考文件以遵循最佳实践。

Validation Checklist

验证清单

Best Practices

最佳实践

Content Guidelines

内容指南

Write clear, benefit-focused copy
Use action-oriented language in CTAs
Keep sections scannable with proper headings
Include specific numbers and statistics
Use authentic testimonials with real names

撰写清晰、以优势为核心的文案
CTA使用行动导向的语言
使用适当的标题让板块易于扫描
包含具体的数字和数据
使用带真实姓名的真实评价

Design Guidelines

设计指南

Maintain visual hierarchy throughout
Use consistent color palette
Ensure adequate whitespace
Choose readable fonts (16px+ base size)
Design for mobile-first

全程保持视觉层级
使用一致的调色板
确保足够的留白
选择易读的字体（基础大小16px+）
采用移动优先的设计

SEO Optimization

SEO优化

Include keywords naturally in content
Use proper heading tag structure (H1 → H2 → H3)
Add alt text to all images
Optimize page load speed
Create descriptive meta tags

在内容中自然融入关键词
使用正确的标题标签结构（H1 → H2 → H3）
所有图片添加替代文本
优化页面加载速度
创建描述性元标签

Conversion Optimization

转化优化

Place CTAs strategically (hero + bottom minimum)
Reduce friction in user journey
Highlight trust signals prominently
Use contrasting colors for CTAs
Test different CTA copy variations

战略性放置CTA（至少在英雄区和页面底部各一个）
减少用户旅程中的摩擦
突出展示信任信号
CTA使用对比色
测试不同的CTA文案变体

Common Patterns

常见模式

SaaS Product Landing Page

SaaS产品落地页

Focus on: Free trial CTA, feature comparisons, pricing clarity, security badges

重点：免费试用CTA、功能对比、价格透明、安全标识

E-commerce Product Landing Page

电商产品落地页

Focus on: Product images, pricing, shipping info, return policy, urgency

重点：产品图片、价格、配送信息、退货政策、紧迫感

Service/Agency Landing Page

服务/代理落地页

Focus on: Portfolio/case studies, process explanation, team credentials, contact form

重点：作品集/案例研究、流程说明、团队资质、联系表单

Event/Webinar Landing Page

活动/Webinar落地页

Focus on: Date/time prominence, speaker profiles, agenda, registration form, countdown timer

重点：日期/时间突出、演讲者简介、议程、注册表单、倒计时器

Resources

资源

references/

This skill includes detailed reference documentation:

```
11-essential-elements.md
```
- In-depth explanation of each of the 11 essential elements with principles, implementation tips, and examples
```
component-examples.md
```
- Complete, production-ready component code using ShadCN UI for all major sections

Load these references as needed when implementing specific sections or when you need detailed guidance on any element.

本技能包含详细的参考文档：

```
11-essential-elements.md
```
- 对11项核心要素的深入解释，包含原则、实施技巧和示例
```
component-examples.md
```
- 使用ShadCN UI的所有主要板块的完整生产级组件代码

在实现特定板块或需要任何要素的详细指导时，请加载这些参考文件。

Notes

注意事项

This framework is based on DESIGNNAS's "11 Essential Landing Page Elements"
Adapt to brand guidelines and target audience as needed
Use A/B testing to continuously improve conversion rates
All implementations should prioritize user experience and conversion optimization

本框架基于DESIGNNAS的"11项落地页核心要素"
可根据品牌指南和目标受众进行调整
使用A/B测试持续优化转化率
所有实现应优先考虑用户体验和转化优化