landing-page-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Landing Page Design

着陆页设计

Overview

概述

Build landing pages that convert AND captivate. This skill combines conversion-focused structure with distinctive visual design to create pages that stand out in an AI-saturated world. The goal: pages worth $50-100 that you'd be proud to sell.

打造兼具转化力与吸引力的着陆页。这项技能将以转化为核心的结构设计与独特视觉设计相结合，让你的页面在AI内容泛滥的世界中脱颖而出。目标是打造出价值50-100美元、你愿意为之自豪的可售卖页面。

MANDATORY: Vibe Discovery (Do This First)

强制要求：氛围定位（务必先完成）

BEFORE writing any code, you MUST run the Vibe Discovery process. This isn't a lookup table - it's a creative prompt that generates a UNIQUE aesthetic direction every time.

The goal: No two landing pages should look alike, even for similar products.

**在编写任何代码之前，你必须完成氛围定位流程。**这不是一个查找表——而是一个创意提示，每次都会生成独特的美学方向。

目标：即使是同类产品，也不能有两个相同的着陆页。

The Vibe Discovery Process

氛围定位流程

Ask the user these questions, then SYNTHESIZE a unique direction. Don't just map answers to presets.

向用户询问以下问题，然后整合出独特的方向。不要只是将答案映射到预设模板。

Step 1: Gather Context (Ask These)

步骤1：收集背景信息（询问以下问题）

Q1: What's one real-world place or object this brand would be?

Not "what industry" - an actual specific thing. A Tokyo convenience store at 2am. A grandmother's kitchen. A brutalist parking garage. A coral reef. The cockpit of a 747. A flea market in Marrakech. A 1970s recording studio.

Q2: What's the ONE emotion someone should feel in the first 3 seconds?

Pick ONE: Calm. Energized. Curious. Trusted. Delighted. Impressed. Rebellious. Nostalgic. Inspired. Amused. Sophisticated. Welcomed. Intrigued. Confident.

Q3: Pick TWO unexpected influences to collide:

Examples: "medical packaging + skateboard graphics", "spreadsheets + street art", "luxury hotel + punk zine", "NASA mission control + kindergarten", "Japanese convenience store + Victorian library"

Q4: What should this page NEVER be mistaken for?

Name 2-3 specific things to actively avoid. "A crypto project", "A wellness app", "Something made by a bank", "Anything with purple gradients"

问题1：这个品牌如果对应现实世界中的一个地点或物品，会是什么？

不是“所属行业”——而是具体的事物。比如凌晨2点的东京便利店、祖母的厨房、粗野主义风格的停车场、珊瑚礁、747客机的驾驶舱、马拉喀什的跳蚤市场、1970年代的录音室。

问题2：用户在最初3秒内应该感受到哪种情绪？

选一种：平静、充满活力、好奇、信任、愉悦、惊艳、叛逆、怀旧、受鼓舞、有趣、精致、受欢迎、感兴趣、自信。

问题3：选择两种意想不到的风格进行碰撞融合：

示例：“医疗包装 + 滑板图形”、“电子表格 + 街头艺术”、“豪华酒店 + 朋克杂志”、“NASA任务控制中心 + 幼儿园”、“日本便利店 + 维多利亚时代图书馆”

问题4：这个页面绝对不能被误认为是什么？

列出2-3个需要主动避免的具体事物。比如“加密货币项目”、“健康类应用”、“银行出品的内容”、“任何带有紫色渐变的页面”

Step 2: Invent The Aesthetic (Don't Look Up - Create)

步骤2：创造独特美学（不要查找，要原创）

Based on the answers, CREATE a unique vibe by deciding:

COLOR INVENTION (Don't use memorized palettes - derive from the place/object)

What colors exist in that real-world place/object from Q1?
Extract 3-4 colors that feel authentic to that reference
Invent specific hex codes fresh - don't reuse codes from previous projects
Name your palette something evocative (not "blue and orange" but "Midnight Bodega" or "Rust Belt Morning")

TYPOGRAPHY INVENTION (Match the voice to the collision)

What would text sound like in that place?
Find a display font that embodies the collision from Q3
Don't default to your usual choices - browse Google Fonts with fresh eyes
Consider: weight, width, contrast, quirks

LAYOUT INVENTION (Derive from the physical space)

How is space organized in that place from Q1?
Is it cramped or expansive? Grid-like or organic? Vertical or horizontal?
What unexpected layout choice would embody the collision from Q3?

MOTION INVENTION (Match the emotion)

How does the emotion from Q2 move?
Calm = barely perceptible. Energized = kinetic. Sophisticated = slow and deliberate.
What's ONE signature motion that defines this page?

基于答案，通过以下决策创造独特氛围：

色彩原创（不要使用记忆中的配色方案——从问题1的地点/物品中提取）

问题1中的现实地点/物品包含哪些颜色？
提取3-4种符合该参考素材的真实颜色
全新生成具体的十六进制代码——不要复用之前项目的代码
为你的配色方案起一个有氛围感的名字（不要叫“蓝橙配色”，而是叫“深夜便利店”或“锈带清晨”）

字体原创（与风格碰撞相匹配）

那个地点的文字会是什么风格？
选择一种能体现问题3中风格碰撞的标题字体
不要默认使用你“习惯”的字体——用新的眼光浏览Google Fonts
考虑：字重、字宽、对比度、独特细节

布局原创（从物理空间中汲取灵感）

问题1中的地点空间是如何组织的？
是紧凑还是开阔？规整网格还是有机布局？纵向还是横向？
哪种意想不到的布局选择能体现问题3中的风格碰撞？

动效原创（与情绪相匹配）

问题2中的情绪会以怎样的方式呈现动态？
平静 = 几乎难以察觉的动效。充满活力 = 动感十足。精致 = 缓慢且从容。
哪种标志性动效能定义这个页面？

Step 3: Write Your Vibe Spec

步骤3：撰写氛围规范

Before coding, write this out explicitly:

VIBE NAME: [Invent a 2-3 word name]
REFERENCE: [The place/object from Q1]
EMOTION: [From Q2]
COLLISION: [From Q3]
ANTI-PATTERNS: [From Q4]

COLORS:
- Primary: [hex] - [why this color]
- Secondary: [hex] - [why]
- Background: [hex] - [why]
- Accent: [hex] - [why]
- Palette name: [evocative name]

TYPOGRAPHY:
- Display: [specific font name] - [why it fits]
- Body: [specific font name] - [why]
- Character: [describe the voice]

LAYOUT:
- Density: [sparse/balanced/dense]
- Shapes: [sharp/rounded/organic/mixed]
- Signature element: [one unusual layout choice]

MOTION:
- Level: [still/subtle/moderate/dynamic/chaotic]
- Signature animation: [one specific animation that defines this]

WILDCARD:
- One unexpected detail that doesn't "match" but makes it memorable

编码前，明确写出以下内容：

VIBE NAME: [原创2-3字的名称]
REFERENCE: [问题1中的地点/物品]
EMOTION: [问题2中的情绪]
COLLISION: [问题3中的风格碰撞]
ANTI-PATTERNS: [问题4中的禁忌]

COLORS:
- Primary: [十六进制代码] - [选择该颜色的原因]
- Secondary: [十六进制代码] - [原因]
- Background: [十六进制代码] - [原因]
- Accent: [十六进制代码] - [原因]
- Palette name: [有氛围感的名称]

TYPOGRAPHY:
- Display: [具体字体名称] - [适配原因]
- Body: [具体字体名称] - [原因]
- Character: [描述整体风格]

LAYOUT:
- Density: [稀疏/平衡/紧凑]
- Shapes: [尖锐/圆润/有机/混合]
- Signature element: [一个独特的布局选择]

MOTION:
- Level: [静止/细微/中等/动态/混乱]
- Signature animation: [一个定义页面的具体动画]

WILDCARD:
- 一个看似“不匹配”但能让页面令人难忘的意外细节

Step 4: The Freshness Check

步骤4：新颖性检查

Example Vibe Discovery

氛围定位示例

Q1 - Place/Object: "A Japanese train station at rush hour"

Q2 - Emotion: "Confident"

Q3 - Collision: "Transit signage + haute couture"

Q4 - Never mistaken for: "A meditation app, anything whimsical, startup-bro tech"

Generated Vibe Spec:

VIBE NAME: Shinjuku Runway
REFERENCE: Japanese train station at rush hour
EMOTION: Confident
COLLISION: Transit signage + haute couture
ANTI-PATTERNS: No soft gradients, no playful illustrations, no rounded friendly shapes

COLORS:
- Primary: #1a1a1a - the black of train doors
- Secondary: #f5f5f0 - platform concrete, worn smooth
- Background: #fafaf8 - fluorescent-lit white
- Accent: #e60012 - JR line red, commanding attention
- Palette name: "Platform Edge"

TYPOGRAPHY:
- Display: Darker Grotesque - confident, slightly condensed, European edge
- Body: Noto Sans JP - clean utility, transit-inspired
- Character: Authoritative but not cold. Clear. Directional.

LAYOUT:
- Density: Rich but organized - like a station map
- Shapes: Sharp with intentional rounded exceptions (like train windows)
- Signature element: Strong horizontal bands that divide sections like train schedules

MOTION:
- Level: Subtle but precise
- Signature animation: Elements slide in from the side like arriving trains - horizontal, smooth, with exact timing

WILDCARD:
- One element uses a fabric-like texture overlay - the haute couture collision

问题1 - 地点/物品：“日本早高峰的火车站”

问题2 - 情绪：“自信”

问题3 - 风格碰撞：“交通标识 + 高级定制时装”

问题4 - 禁忌：“冥想类应用、任何 whimsical 风格、创业直男风科技产品”

生成的氛围规范：

VIBE NAME: Shinjuku Runway
REFERENCE: Japanese train station at rush hour
EMOTION: Confident
COLLISION: Transit signage + haute couture
ANTI-PATTERNS: No soft gradients, no playful illustrations, no rounded friendly shapes

COLORS:
- Primary: #1a1a1a - the black of train doors
- Secondary: #f5f5f0 - platform concrete, worn smooth
- Background: #fafaf8 - fluorescent-lit white
- Accent: #e60012 - JR line red, commanding attention
- Palette name: "Platform Edge"

TYPOGRAPHY:
- Display: Darker Grotesque - confident, slightly condensed, European edge
- Body: Noto Sans JP - clean utility, transit-inspired
- Character: Authoritative but not cold. Clear. Directional.

LAYOUT:
- Density: Rich but organized - like a station map
- Shapes: Sharp with intentional rounded exceptions (like train windows)
- Signature element: Strong horizontal bands that divide sections like train schedules

MOTION:
- Level: Subtle but precise
- Signature animation: Elements slide in from the side like arriving trains - horizontal, smooth, with exact timing

WILDCARD:
- One element uses a fabric-like texture overlay - the haute couture collision

Inspiration Starters (When Stuck on Q1)

灵感起点（当问题1卡壳时）

The Anti-Convergence Rules

反同质化规则

No hex code memory - Generate colors fresh from the reference, don't recall "my usual blue"
Font rotation required - Cannot use the same display font in consecutive projects
Collision must show - If someone can't see BOTH influences from Q3, push harder
Wildcard is mandatory - Every vibe needs one element that doesn't "fit" but makes it unique
Name it - An unnamed vibe becomes generic. A named vibe has identity.

不要复用颜色代码 - 从参考素材中全新生成颜色，不要使用“我常用的蓝色”
必须轮换字体 - 连续项目中不能使用相同的标题字体
风格碰撞必须可见 - 如果别人看不到问题3中的两种风格，就要更大胆地融合
必须加入wildcard细节 - 每个氛围都需要一个看似“不匹配”但让页面独特的元素
为氛围命名 - 未命名的氛围会变得通用，命名后的氛围才有辨识度

Quick Context Questions (Minimal Version)

极简背景信息询问（简化版）

If the user just says "make me a landing page" with no context, ask:

"What's one place or object that captures this brand's energy?"
"What emotion should dominate?"
"What should this NEVER look like?"

Then synthesize a vibe from those three answers.

如果用户只说“帮我做一个着陆页”且没有任何背景信息，询问以下问题：

“哪个地点或物品能体现这个品牌的活力？”
“应该主打哪种情绪？”
“这个页面绝对不能看起来像什么？”

然后基于这三个答案整合出氛围。

The 50% Rule

50%原则

Spend 50% of your time on the hero section. It's the cover image for social media, the first impression, the hook. Everything else flows from getting the hero right.

**将50%的时间投入到首屏（Hero）区域。**它是社交媒体的封面图，是第一印象，是吸引用户的钩子。后续所有内容都基于首屏的成功设计展开。

Section Composition (Top to Bottom)

页面结构（从上到下）

1. Hero Section (Primary Focus)

1. 首屏区域（核心重点）

The make-or-break element. Must contain:

Headline: Sharp, benefit-driven hook (reference H1 Gallery for inspiration)
Subheadline: Supporting context, 1-2 sentences max
CTA Button(s): Primary action + optional secondary
Social Proof: Logo marquee, testimonials, or trust badges
Visual Element: Product shot, illustration, or animated background

Hero Variations:

Split layout (text left, visual right)
Centered with floating elements
Full-bleed background with overlay text
Asymmetric with decorative elements

决定成败的关键元素。必须包含：

标题：简洁、以利益为导向的钩子（可参考H1灵感库获取创意）
副标题：补充说明，最多1-2句话
CTA按钮：主要行动按钮 + 可选次要按钮
社交证明：品牌轮播、客户证言或信任徽章
视觉元素：产品截图、插画或动画背景

首屏变体:

左右分栏布局（文字左，视觉右）
居中布局搭配浮动元素
全屏背景叠加文字
不对称布局搭配装饰元素

2. Features/Benefits Section

2. 功能/利益展示区

Show what the product does. Options:

Bento Grid: Cards in asymmetric layout (popularized by Apple)
Alternating Rows: Image + text, flipping sides
Icon Grid: Simple icons with short descriptions
Interactive Cards: Hover states, micro-animations

展示产品功能。可选布局：

便当盒网格（Bento Grid）：非对称布局的卡片（由Apple推广流行）
交替行布局：图片 + 文字，左右交替
图标网格：简洁图标搭配简短描述
交互式卡片：悬停状态、微动画

3. Social Proof Section

3. 社交证明区

Build trust through:

Logo carousel (marquee animation)
Testimonial cards with photos
Stats/metrics with animated counters
Case study snippets

通过以下内容建立信任：

品牌轮播（无限滚动动画）
带照片的客户证言卡片
带动画计数器的数据/指标
案例研究片段

4. How It Works Section

4. 产品流程区

Step-by-step explanation:

Numbered steps (01, 02, 03 pattern adds sophistication)
Sticky scrolling with progressive reveal
Timeline or flowchart visualization

分步说明：

编号步骤（01、02、03的格式更显精致）
粘性滚动配合渐进式展示
时间线或流程图可视化

5. Pricing Section (if applicable)

5. 定价区（如有需要）

2-3 tier comparison
Highlighted "recommended" tier
Feature comparison table
FAQ accordion below

2-3个套餐对比
突出显示“推荐”套餐
功能对比表格
下方搭配FAQ折叠面板

6. CTA Section

6. 最终CTA区

Final conversion push:

Repeat value proposition
Strong headline
Single focused action
Urgency elements (if authentic)

最后的转化推动：

重复核心价值主张
醒目标题
单一聚焦行动
紧迫感元素（如果真实合理）

7. Footer

7. 页脚

Navigation links
Social icons
Legal links
Optional newsletter signup

导航链接
社交图标
法律链接
可选的邮件订阅入口

Anti-AI-Slop Principles

反AI同质化原则

Icons: Avoid Lucide (Overused)

图标：避免使用Lucide（过度泛滥）

Use instead:

Iconify Solar: Multiple styles (outline, broken, duotone)
Heroicons: When you need Apple-like simplicity
Phosphor: Flexible weight system
Custom SVGs: For brand differentiation

推荐使用：

Iconify Solar：多种样式（轮廓线、断裂线、双色）
Heroicons：当你需要苹果风格的简洁图标时
Phosphor：灵活的粗细调节系统
自定义SVG：实现品牌差异化

Fonts: Kill Inter/Roboto

字体：摒弃Inter/Roboto

Distinctive alternatives:

Display: Newsreader, Playfair Display, Space Grotesk, Clash Display
Body: Outfit, Plus Jakarta Sans, Manrope, Satoshi
Mono: JetBrains Mono, IBM Plex Mono, Fira Code

独特替代方案：

标题字体：Newsreader、Playfair Display、Space Grotesk、Clash Display
正文字体：Outfit、Plus Jakarta Sans、Manrope、Satoshi
等宽字体：JetBrains Mono、IBM Plex Mono、Fira Code

Colors: No Purple Gradients

颜色：拒绝紫色渐变

Bold alternatives:

Deep navy + electric accent
Warm neutrals + single pop color
Monochromatic with tonal depth
Dark mode with neon accents
Earthy/organic palettes

大胆替代方案：

深藏青色 + 亮色调强调色
暖中性色 + 单一亮色点缀
同色系不同色调搭配
深色模式 + 霓虹强调色
大地色系/自然色系

Layouts: Break the Grid

布局：打破网格限制

Overlapping elements
Diagonal sections
Asymmetric spacing
Container-breaking hero elements
Negative space as design element

元素重叠
斜向分区
不对称间距
突破容器的首屏元素
将留白作为设计元素

Animation Vocabulary

动画术语

Entrance Animations

入场动画

```
fade-in
```
: Simple opacity transition
```
blur-in
```
: Starts blurred, sharpens
```
slide-in
```
: Direction-based entrance
```
scale-in
```
: Grows from small to full size
```
stagger
```
: Sequential reveal of child elements

```
fade-in
```
: 简单的透明度过渡
```
blur-in
```
: 从模糊到清晰
```
slide-in
```
: 基于方向的入场动画
```
scale-in
```
: 从小到大全尺寸放大
```
stagger
```
: 子元素依次显示

Continuous Animations

持续动画

```
marquee
```
: Infinite horizontal scroll (logos, testimonials)
```
beam
```
: Light traveling along a path/border
```
pulse
```
: Subtle scale/opacity breathing
```
float
```
: Gentle up/down movement
```
rotate
```
: Continuous spin (icons, decorations)

```
marquee
```
: 无限水平滚动（品牌、客户证言）
```
beam
```
: 光线沿路径/边框移动
```
pulse
```
: 细微的缩放/透明度呼吸效果
```
float
```
: 轻微的上下浮动
```
rotate
```
: 持续旋转（图标、装饰元素）

Interactive Animations

交互动画

```
hover-lift
```
: Subtle Y translation + shadow
```
hover-glow
```
: Border/shadow color change
```
hover-reveal
```
: Hidden element appears
```
click-ripple
```
: Material-style feedback

```
hover-lift
```
: 轻微的Y轴位移 + 阴影变化
```
hover-glow
```
: 边框/阴影颜色变化
```
hover-reveal
```
: 隐藏元素显示
```
click-ripple
```
: 类Material Design的反馈效果

Decorative Elements

装饰元素

Vertical grid lines (container-size based)
Noodles/curved connectors between elements
Gradient orbs/blobs in background
Grain/noise texture overlay
Geometric shapes (circles, rectangles with rounded corners)

垂直网格线（基于容器尺寸）
元素间的曲线连接线（noodles）
背景中的渐变圆形/ blob
颗粒/噪点纹理叠加
几何形状（圆形、圆角矩形）

Design Resources

设计资源

Hero Inspiration

首屏灵感

Superhero (superhero.design): Curated hero sections
Dribbble: Search "hero section", "landing page"
Awwwards: Award-winning designs

Superhero (superhero.design): 精选首屏设计案例
Dribbble: 搜索“hero section”、“landing page”
Awwwards: 获奖设计作品

Section Patterns

页面结构参考

Mobin: Real websites with section breakdowns
Bento Grids: Card layout inspiration
CTA Gallery: Call-to-action patterns

Mobin: 带结构拆解的真实网站案例
Bento Grids: 便当盒网格布局灵感
CTA Gallery: 行动按钮设计参考

Typography

字体资源

Google Fonts: Free, AI-accessible fonts
Fontshare: Free quality fonts
H1 Gallery: Headline inspiration

Google Fonts: 免费、AI可访问的字体
Fontshare: 高质量免费字体
H1 Gallery: 标题灵感库

Icons & Logos

图标与品牌标识

Iconify: Unified icon API (Solar, Heroicons, etc.)
Simple Icons: Brand logos (SVG)
Heroicons: Tailwind's icon set

Iconify: 统一图标API（包含Solar、Heroicons等）
Simple Icons: 品牌标识（SVG格式）
Heroicons: Tailwind官方图标集

Implementation Workflow

实现工作流

Phase 1: Research & Collect

阶段1：调研与收集

Gather 5-10 hero screenshots as wireframes
Identify section patterns needed
Choose icon set and font pairing
Define color palette

收集5-10个首屏截图作为线框参考
确定所需的页面结构模式
选择图标集和字体组合
定义配色方案

Phase 2: Hero Development

阶段2：首屏开发

Generate hero from best reference screenshot
Iterate: change colors, fonts, layouts
Add animations (beam, fade-in, etc.)
Add decorative elements (noodles, grids, numbers)
Refine until distinctive

基于最佳参考截图生成首屏
迭代：调整颜色、字体、布局
添加动画（beam、fade-in等）
添加装饰元素（曲线连接线、网格、数字标识）
优化至独特且有辨识度

Phase 3: Section Build-Out

阶段3：页面区块构建

Add sections one at a time (not all at once)
Reference specific components/screenshots per section
Maintain color/font consistency from hero
Add section-specific animations

逐个添加页面区块（不要一次性全部添加）
每个区块参考具体的组件/截图
保持与首屏一致的颜色/字体规范
添加区块专属动画

Phase 4: Polish

阶段4：细节打磨

Fix responsive breakpoints (mobile, tablet, desktop)
Replace placeholder images with real/quality assets
Optimize animations for performance
Test all interactive elements

修复响应式断点（移动端、平板、桌面端）
用真实/高质量资源替换占位图
优化动画性能
测试所有交互元素

Phase 5: Presentation

阶段5：成果展示

Create cover screenshot with infinity canvas layout
Show hero prominently
Include mobile and desktop views
Add subtle background (blurred gradient, pattern)

创建无限画布布局的封面截图
突出展示首屏
包含移动端和桌面端视图
添加细微背景（模糊渐变、图案）

Prompt Patterns

提示词模板

Hero Generation

首屏生成

Create a hero section for [PRODUCT TYPE].
Change text, names, and numbers to fit [BRAND].
Use Iconify Solar icons (duotone style).
Use [FONT] for headlines.
Add vertical container-size grid lines.
Add 01, 02, 03 step indicators for sophistication.
Use [COLOR] as primary, dark mode.

Create a hero section for [PRODUCT TYPE].
Change text, names, and numbers to fit [BRAND].
Use Iconify Solar icons (duotone style).
Use [FONT] for headlines.
Add vertical container-size grid lines.
Add 01, 02, 03 step indicators for sophistication.
Use [COLOR] as primary, dark mode.

Section Addition

区块添加

Adapt a new [SECTION TYPE] section.
Match the hero's color scheme and typography.
Use marquee animation for logos.
Add fade-in blur-in entrance animation.
Keep the hero exactly as is.

Adapt a new [SECTION TYPE] section.
Match the hero's color scheme and typography.
Use marquee animation for logos.
Add fade-in blur-in entrance animation.
Keep the hero exactly as is.

Animation Enhancement

动画增强

Add beam animation to the primary button border.
The beam should be 1px, continuously traveling around the pill shape.
Add a subtle hover-lift effect to feature cards.

Add beam animation to the primary button border.
The beam should be 1px, continuously traveling around the pill shape.
Add a subtle hover-lift effect to feature cards.

Negative Prompts (What NOT to change)

反向提示词（禁止修改内容）

Don't change the hero section.
Keep the navbar exactly as is.
Don't modify the existing animations.

Don't change the hero section.
Keep the navbar exactly as is.
Don't modify the existing animations.