Back to Details

landing-page-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Landing Page Design

着陆页设计

A landing page is not a homepage. A homepage serves multiple intents. A landing page wins one intent:
one offer → one audience → one primary action.
This skill has two halves. Part A decides what the page says and how it is structured. Part B is the non negotiable visual system. Work through A before touching B.
着陆页并非首页。首页需满足多种用户意图，而着陆页只需聚焦一个核心意图：
一个产品/服务 → 一类受众 → 一个核心行动。
这套方法分为两部分。Part A 决定页面内容与结构，Part B 是不可妥协的视觉系统。需先完成Part A，再进行Part B的工作。

Scope

适用范围

Apply to all web UI work: landing pages, marketing sites, components, dashboards, prototypes, and design reviews. When a rule here conflicts with a framework default, this file wins. When the user's explicit prompt conflicts with a rule, the user wins.
Companion skill. For upgrading an existing site rather than building a new one, use 
redesign-existing-projects
(github.com/elayadesign/redesign-skill). It diagnoses generic patterns and defers to this file for every concrete value.
适用于所有Web UI工作：着陆页、营销网站、组件、仪表盘、原型及设计评审。当本规则与框架默认设置冲突时，以本文件为准；当用户明确需求与本规则冲突时，以用户需求为准。
配套方法：若需升级现有网站而非构建新网站，请使用
redesign-existing-projects
（github.com/elayadesign/redesign-skill）。该方法负责诊断通用模式，具体数值均遵循本文件规则。

PART A — Strategy and structure

PART A — 策略与结构

A1. Intake

A1. 需求采集

Gather these before designing or writing. Ask only for what is missing, and ask in one batch rather than one question at a time.
Purpose
  • What is the ONE primary action? (trial, demo, buy, waitlist, download)
  • What is the offer, exactly what do they get?
  • What counts as a conversion? (click, signup, purchase)
Audience and context
  • Who is the ICP?
  • What problem are they trying to solve?
  • Top three objections, meaning why they do not convert today
  • Traffic source: ads, search, social, email
  • What do visitors already know when they land?
Proof and assets
  • Proof points: logos, testimonials, numbers, case studies
  • Screenshots, demo video, product GIFs
  • Guarantees, refund terms, cancellation terms
Constraints
  • Brand voice: casual or professional
  • Design direction: minimal editorial, playful 3D, glass UI
  • Mobile priority?
If the user cannot answer, make a reasonable assumption, state it in one line, and continue. Do not stall the build.
设计或撰写文案前需收集以下信息。仅询问缺失的内容，且一次性批量提问。
核心目标
  • 核心行动是什么？（试用、演示、购买、加入等待列表、下载）
  • 具体提供什么产品/服务？用户能获得什么？
  • 什么行为算作转化？（点击、注册、购买）
受众与场景
  • 理想客户画像（ICP）是谁？
  • 他们试图解决什么问题？
  • 三大转化异议：即当前用户不愿转化的原因
  • 流量来源：广告、搜索、社交平台、邮件
  • 用户着陆时已了解哪些信息？
信任凭证与素材
  • 信任凭证：品牌Logo、客户证言、数据统计、案例研究
  • 截图、演示视频、产品GIF
  • 保障政策：退款条款、取消条款
约束条件
  • 品牌语气：休闲或专业
  • 设计方向：极简编辑风、趣味3D、玻璃态UI
  • 是否优先适配移动端？
若用户无法回答，需做出合理假设，用一句话说明后继续推进，不得停滞构建流程。

A2. Page structure

A2. 页面结构

Above the fold (required)
  1. Headline, outcome plus audience
  2. Subheadline, clarifies how and adds specificity
  3. Primary CTA, clear verb plus what they get
  4. One proof signal, logo strip, stat, or short testimonial
  5. Hero visual, product screenshot or video, or a strong illustration
Mid page (the argument) 6. Problem to solution, one section 7. Benefits, three to five, outcome driven 8. How it works, three steps 9. Social proof, testimonials or a case study
Bottom (objection handling) 10. FAQ, six to twelve questions 11. Risk reversal, trial, cancel anytime, guarantee 12. Final CTA, identical to the top
Include the mandatory tagline reveal section from B11 somewhere in the mid page argument, typically right after the hero or after benefits.
首屏区域（必填）
  1. 标题：突出成果与目标受众
  2. 副标题：说明实现方式并补充细节
  3. 核心CTA：明确动词+用户可获得的内容
  4. 信任信号：品牌Logo栏、数据统计或简短客户证言
  5. Hero视觉元素：产品截图、视频或醒目插画
页面中部（说服环节） 6. 问题到解决方案：单个区块 7. 核心价值：3-5条以成果为导向的要点 8. 运作流程：3个步骤 9. 社交证明：客户证言或案例研究
页面底部（异议处理） 10. 常见问题：6-12个问题及解答 11. 风险逆转：免费试用、随时取消、保障政策 12. 最终CTA：与首屏CTA一致
需在页面中部的说服环节中加入B11规定的标语展示区块，通常放在Hero区域之后或核心价值区块之后。

A3. Layout selection

A3. 布局选择

Pick one and say why.
TypeUse when
A. Classic hero plus sectionsThe product is understandable from a hero screenshot. Most common.
B. Long form storyYou need to educate and overcome skepticism.
C. Minimal conversion pageHigh intent traffic (email to known users), or a short offer like a download or waitlist.
D. Comparison pageSearch intent includes alternatives ("X vs Y", "best for"). Usually paired with SEO pages.
选择一种布局并说明理由。
布局类型适用场景
A. 经典Hero+分段式通过Hero截图即可清晰理解产品功能，是最常用的布局。
B. 长故事式需要教育用户并消除其疑虑时使用。
C. 极简转化页高意向流量（如邮件触达已知用户），或下载、加入等待列表等短流程场景。
D. 对比页搜索意图包含竞品对比（如"X vs Y"、"最佳选择"），通常搭配SEO页面使用。

A4. Conversion rules

A4. 转化规则

Match message to source. If traffic comes from ads, mirror the ad headline in the hero and keep the same promise and visual tone.
Make the next step obvious. One primary CTA. Never place competing CTAs above the fold.
Write benefit first. Features are what it does. Benefits are what that means for them.
Be specific.
  • ❌ "Save time and streamline"
  • ✅ "Cut your weekly reporting from 4 hours to 15 minutes"
Reduce risk. Pick at least one: free trial, free plan, no credit card, cancel anytime, money back guarantee.
Treat objections as a section, not a footnote. Move the FAQ earlier for high friction offers. Put proof directly beside the claim it supports.
信息与流量来源匹配：如果流量来自广告，Hero区域需呼应广告标题，保持一致的承诺与视觉风格。
下一步行动清晰明确：仅保留一个核心CTA，首屏区域不得放置竞争CTA。
先讲价值，再讲功能：功能是产品能做什么，价值是这对用户意味着什么。
表述具体
  • ❌ "节省时间，提升效率"
  • ✅ "将每周报告时间从4小时缩短至15分钟"
降低转化风险：至少选择一项措施：免费试用、免费方案、无需信用卡、随时取消、退款保障。
异议处理前置：将FAQ区块提前放置在高摩擦转化场景中。信任凭证需紧邻所支撑的主张。

A5. Copywriting

A5. 文案撰写

Headline formulas
  • "{Outcome} without {pain}"
  • "The {category} for {audience}"
  • "Ship {result} in {time}"
Subheadline. One or two sentences. Clarify what it is and who it is for.
CTA. Verb plus what they get. Never "Learn more" or "Submit". Use "Start free trial", "Book a demo", "Get the checklist".
Benefit bullets. Bold benefit, then the proof or detail. Example: Faster iteration — generate three layout variants in one click.
Note: the copy rules in B1 still apply. No hyphens inside sentences, no orphaned words.
标题公式
  • "{成果}，无需{痛点}"
  • "专为{受众}打造的{品类}"
  • "在{时间}内达成{成果}"
副标题：1-2句话，明确产品是什么、面向谁。
CTA：动词+用户可获得的内容。禁止使用"了解更多"或"提交"，推荐使用"开始免费试用"、"预约演示"、"获取清单"。
核心价值要点：加粗价值，后跟证明或细节。示例：更快迭代 — 一键生成3种布局变体。
注：B1中的文案规则同样适用，句子内不得使用连字符，不得出现孤词。

A6. Build order

A6. 构建顺序

Work section by section, in this order:
  1. Hero
  2. Benefits
  3. How it works
  4. Proof
  5. FAQ
  6. Final CTA
Never rebuild the whole page on each iteration. Section by section keeps control and keeps diffs reviewable.
按以下顺序逐区块构建：
  1. Hero区域
  2. 核心价值区块
  3. 运作流程区块
  4. 信任证明区块
  5. FAQ区块
  6. 最终CTA区块
不得每次迭代都重构整个页面。逐区块构建便于控制进度，且修改内容更易评审。

A7. SEO and AEO

A7. SEO与AEO优化

Do not index ad only campaign pages or highly time bound offers. Use 
noindex
or keep them behind a non indexed path.
Do index evergreen offers and pages where search intent matches the promise. Add a clear title and meta description, internal links from the homepage and feature pages, and the FAQ in plain question and answer form for AEO. Add FAQ schema if appropriate.
禁止索引：仅用于广告活动的页面或时效性极强的产品/服务页面。使用
noindex
标签，或将其放置在未被索引的路径下。
允许索引：常青产品/服务页面，且搜索意图与页面承诺匹配。添加清晰的标题与meta描述，从首页及功能页添加内部链接，FAQ采用清晰的问答形式以优化AEO。必要时添加FAQ schema。

A8. Pitfalls

A8. 常见误区

  • Too many CTAs above the fold
  • Vague value prop: "streamline", "optimize"
  • A large feature list with no outcomes
  • Proof buried at the bottom
  • Mobile layout that breaks readability
  • No clear next step
  • 首屏区域放置过多CTA
  • 价值主张模糊：如"提升效率"、"优化流程"
  • 仅罗列功能，未说明成果
  • 信任证明被放置在页面底部
  • 移动端布局破坏可读性
  • 无清晰的下一步行动

PART B — Visual system

PART B — 视觉系统

Every visual value must resolve through these rules instead of being invented ad hoc.
所有视觉属性必须遵循以下规则，不得随意设定。

B1. Typography

B1. 排版规范

Fonts

字体选择

Use: Geist, Manrope, Geist Mono, Poppins.
Never use: Inter, Roboto, Arial, Open Sans, Helvetica.
Never use italic fonts anywhere in the interface.
One typeface per site. Do not pair two fonts unless the prompt explicitly asks for it. Geist Mono is allowed alongside a primary font only for code, data, or numeric UI where a monospace is functionally required.
Never use ultra bold weights (900 / black). Cap at semibold or bold.
推荐使用：Geist、Manrope、Geist Mono、Poppins。
禁止使用：Inter、Roboto、Arial、Open Sans、Helvetica。
界面中禁止使用斜体字体。
单个网站仅使用一种字体。除非用户明确要求，否则不得搭配两种字体。仅在代码、数据或数字UI等必须使用等宽字体的场景下，可将Geist Mono与主字体搭配使用。
禁止使用超粗体（900/black），字体粗细上限为半粗体或粗体。

Copy rules

文案规则

No hyphens in text. Do not use 
-
inside body copy, headings, or labels. Rewrite the phrase instead.
No orphaned words. A single word must never sit alone on the last line. Apply 
text-wrap: balance
for headings and 
text-wrap: pretty
for body copy.
文本中禁止使用连字符：正文、标题或标签内不得使用
-
，需改写表述方式。
禁止孤词：最后一行不得仅出现单个单词。标题使用
text-wrap: balance
，正文使用
text-wrap: pretty
。

Type scale

字号体系

Always resolve font sizes to Tailwind's default type scale. Never leave arbitrary values in place, including 
text-[19px]
, 
font-size: 22px
, or 
1.4rem
.
If an existing size does not land exactly on a step, snap it to the closest step below, taking both the size and its paired line height.
ClassSizeLine height
text-xs
12px (0.75rem)16px
text-sm
14px (0.875rem)20px
text-base
16px (1rem)24px
text-lg
18px (1.125rem)28px
text-xl
20px (1.25rem)28px
text-2xl
24px (1.5rem)32px
text-3xl
30px (1.875rem)36px
text-4xl
36px (2.25rem)40px
text-5xl
48px (3rem)1
text-6xl
60px (3.75rem)1
text-7xl
72px (4.5rem)1
text-8xl
96px (6rem)1
text-9xl
128px (8rem)1
Do not combine scale snapping with independently set custom line heights elsewhere in an audit. Tracking and line height may only be adjusted within the value the matched step already provides, so the two rules never fight each other.
所有字号必须匹配Tailwind默认字号体系，不得保留任意值，如
text-[19px]
、
font-size: 22px
或
1.4rem
。
若现有字号未完全匹配体系中的步骤，需向下匹配最接近的步骤，同时沿用该步骤对应的行高。
类名字号行高
text-xs
12px (0.75rem)16px
text-sm
14px (0.875rem)20px
text-base
16px (1rem)24px
text-lg
18px (1.125rem)28px
text-xl
20px (1.25rem)28px
text-2xl
24px (1.5rem)32px
text-3xl
30px (1.875rem)36px
text-4xl
36px (2.25rem)40px
text-5xl
48px (3rem)1
text-6xl
60px (3.75rem)1
text-7xl
72px (4.5rem)1
text-8xl
96px (6rem)1
text-9xl
128px (8rem)1
不得将字号匹配规则与独立设置的自定义行高混用。字间距与行高仅可在匹配步骤的数值范围内调整，避免规则冲突。

Button type

按钮字号

  • Main buttons: 
    text-base
    (16px), semibold.
  • Smaller header buttons: 
    text-sm
    (14px), semibold.
  • 主按钮：
    text-base
    （16px），半粗体。
  • 顶部导航小按钮：
    text-sm
    （14px），半粗体。

B2. Spacing

B2. 间距规范

Only these values. Nothing between them, nothing outside them.
TokenValue
Spacing-00
Spacing-252px
Spacing-504px
Spacing-758px
Spacing-10012px
Spacing-20016px
Spacing-30024px
Spacing-40032px
Spacing-50040px
Spacing-60048px
Spacing-70064px
Spacing-80080px
Spacing-90096px
Main buttons: 8px vertical padding, 12px horizontal padding.
仅使用以下间距值，不得使用其他数值。
令牌数值
Spacing-00
Spacing-252px
Spacing-504px
Spacing-758px
Spacing-10012px
Spacing-20016px
Spacing-30024px
Spacing-40032px
Spacing-50040px
Spacing-60048px
Spacing-70064px
Spacing-80080px
Spacing-90096px
主按钮：上下内边距8px，左右内边距12px。

B3. Corner radius

B3. 圆角规范

Only use Tailwind's radius values.
Nested radius formula. When a shape sits inside another shape and the gap between them is less than 32px:
inner radius = outer radius − gap
Apply this only when the result is greater than 2. Below that, leave the inner shape square or unchanged.
Example: an outer card at 
rounded-2xl
(16px) with 8px of internal padding gives an inner element an 8px radius (
rounded-lg
).
仅使用Tailwind自带的圆角值。
嵌套圆角公式：当一个形状嵌套在另一个形状内，且两者间距小于32px时：
inner radius = outer radius − gap
仅当计算结果大于2时应用该公式。若结果小于等于2，内层形状保持方形或原有样式。
示例：外层卡片使用
rounded-2xl
（16px），内部内边距为8px，则内层元素圆角为8px（
rounded-lg
）。

B4. Borders and backgrounds

B4. 边框与背景

  • Never apply a border to only one side of a card. Borders go all the way around or not at all.
  • Never use gradients in backgrounds. Backgrounds are flat.
  • 卡片不得仅添加单边边框：要么全边框，要么无边框。
  • 背景禁止使用渐变：需为纯色。

Dark mode background colors

深色模式背景色

Use only these:
#000000
· 
#181818
· 
#1F1F1F
· 
#272727
· 
#313131
· 
#131209
仅使用以下颜色：
#000000
· 
#181818
· 
#1F1F1F
· 
#272727
· 
#313131
· 
#131209

B5. Hero section

B5. Hero区域规范

Heading color

标题颜色

  • Dark theme: left to right gradient on the heading text, 
    #FFFFFF
    → 
    #9B9B9B
    .
  • Light theme: left to right gradient on the heading text, 
    #000000
    → 
    #666666
    .
This is the one place gradients are used, and only on text, never on the background.
  • 深色主题：标题文字使用从左到右的渐变色，
    #FFFFFF
    → 
    #9B9B9B
    。
  • 浅色主题：标题文字使用从左到右的渐变色，
    #000000
    → 
    #666666
    。
这是唯一允许使用渐变的场景，且仅用于文字，不得用于背景。

Layout

布局要求

  • Heading and subheading both get a max width of 680px.
  • Read the heading copy and insert line breaks at meaningful points.
  • Never break a line in a way that cuts a phrase awkwardly or makes the sentence harder to read. Break where the thought breaks.
  • 标题与副标题的最大宽度均为680px。
  • 阅读标题文案，在表意连贯的位置添加换行。
  • 不得在拆分短语或影响阅读的位置换行，需在语义停顿处换行。

B6. Icons

B6. 图标规范

Use: Phosphor, Solar, or Iconamoon.
Never use: Material Icons, Material Symbols.
推荐使用：Phosphor、Solar或Iconamoon。
禁止使用：Material Icons、Material Symbols。

B7. Motion choreography (fluid dynamics)

B7. 动效编排（流体动力学）

Never use default transitions. All motion simulates real world mass and spring physics through custom cubic beziers.
transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]
禁止使用默认过渡效果。所有动效需通过自定义三次贝塞尔曲线模拟现实世界的质量与弹簧物理特性。
transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]

Fluid island nav

流体悬浮导航

Closed state. The navbar is a floating glass pill detached from the top: 
mt-6
, 
mx-auto
, 
w-max
, 
rounded-full
.
Hamburger morph. On click, the hamburger lines fluidly rotate and translate into a perfect X using 
rotate-45
and 
-rotate-45
with absolute positioning. They must never simply disappear.
Modal expansion. The menu opens as a screen filling overlay with a heavy glass effect: 
backdrop-blur-3xl bg-black/80
or 
bg-white/80
.
Staggered mask reveal. Nav links inside the expanded state fade in and slide up from an invisible box, 
translate-y-12 opacity-0
resolving to 
translate-y-0 opacity-100
, staggered per item with 
delay-100
, 
delay-150
, 
delay-200
, and so on.
收起状态：导航栏为悬浮于顶部的玻璃胶囊样式，使用
mt-6
、
mx-auto
、
w-max
、
rounded-full
。
汉堡菜单变形：点击时，汉堡菜单线条需通过绝对定位与
rotate-45
、
-rotate-45
流畅旋转平移为完美的X形，不得直接消失。
弹窗展开：菜单以全屏覆盖层形式打开，带有强烈玻璃效果：
backdrop-blur-3xl bg-black/80
或 
bg-white/80
。
交错遮罩显示：展开状态下的导航链接从不可见区域淡入并向上滑动，从
translate-y-12 opacity-0
过渡到
translate-y-0 opacity-100
，每个链接依次延迟
delay-100
、
delay-150
、
delay-200
等时间触发。

Scroll interpolation

滚动过渡

Elements never appear statically on load. As they enter the viewport they execute a gentle, heavy fade up:
translate-y-16 blur-md opacity-0  →  translate-y-0 blur-0 opacity-100
over 800ms or longer.
For JavaScript driven reveals use 
IntersectionObserver
or Framer Motion's 
whileInView
. Never use 
window.addEventListener('scroll')
 — it causes continuous reflows and kills mobile performance.
元素加载时不得直接静态显示。当元素进入视口时，需执行柔和的向上淡入动效：
translate-y-16 blur-md opacity-0  →  translate-y-0 blur-0 opacity-100
时长800ms或更久。
JavaScript驱动的显示效果需使用
IntersectionObserver
或Framer Motion的
whileInView
。禁止使用
window.addEventListener('scroll')
——这会导致持续重排，严重影响移动端性能。

B8. Content realism

B8. 内容真实性

Never ship filler. These are the tells that a page was generated rather than made.
  • No Lorem Ipsum. Write real draft copy.
  • No "John Doe". Use diverse, realistic names.
  • No placeholder brands like "Acme Corp", "Nexus", or "SmartFlow". Invent contextual, believable names.
  • No round fake numbers like 
    99.99%
    , 
    50%
    , 
    $100.00
    . Use organic data: 
    47.2%
    , 
    $99.00
    , 
    +1 (312) 847-1928
    .
  • No AI cliches. Never "Elevate", "Seamless", "Unleash", "Next Gen", "Game changer", "Delve", "Tapestry", or "In the world of".
  • Sentence case headers, not Title Case On Everything.
  • Active voice. "We could not save your changes", not "Mistakes were made".
  • No exclamation marks in success messages, and no "Oops!" in errors. Be direct: "Connection failed. Please try again."
  • Unique avatars per person, and varied blog post dates.
禁止使用占位内容。以下特征会暴露页面是生成而非人工制作的：
  • 禁止使用Lorem Ipsum占位文本：需撰写真实草稿文案。
  • 禁止使用"John Doe"这类通用姓名：需使用多样且真实的姓名。
  • 禁止使用"Acme Corp"、"Nexus"或"SmartFlow"这类占位品牌名：需创造符合场景且可信的品牌名。
  • 禁止使用
    99.99%
    、
    50%
    、
    $100.00
    这类规整的虚假数据    ：需使用真实自然的数据：
    47.2%
    、
    $99.00
    、
    +1 (312) 847-1928
    。
  • 禁止使用AI陈词滥调：如"Elevate"、"Seamless"、"Unleash"、"Next Gen"、"Game changer"、"Delve"、"Tapestry"或"In the world of"。
  • 标题采用句首大写：而非每个单词首字母大写。
  • 使用主动语态：如"我们无法保存你的更改"，而非"出现了错误"。
  • 成功提示不得使用感叹号，错误提示不得使用"Oops!"：需直接表述："连接失败，请重试。"
  • 每个人物使用独特头像：博客文章日期需多样化。

B9. States

B9. 交互状态

Every interactive element ships with its full state set:
  • Hover — background shift, slight scale, or translate
  • Active — 
    scale(0.98)
    or 
    translateY(1px)
    for physical feedback
  • Focus — a visible focus ring. Accessibility requirement, not optional.
  • Loading — skeleton loaders shaped like the real layout, not circular spinners
  • Empty — a composed "getting started" view, never a blank panel
  • Error — inline and specific. Never 
    window.alert()
    .
No dead links. A button pointing at 
#
is either linked or visually disabled. The current page must be indicated in the navigation.
每个交互元素需包含完整的状态集合：
  • 悬停：背景变化、轻微缩放或位移
  • 激活：
    scale(0.98)
    或
    translateY(1px)
    ，提供物理反馈
  • 聚焦：显示可见的聚焦环，这是无障碍要求，不可省略
  • 加载：使用与真实布局一致的骨架屏，而非圆形加载动画
  • 空状态：展示完整的"入门引导"视图，不得使用空白面板
  • 错误：内联且具体的提示，禁止使用
    window.alert()
禁止无效链接。指向
#
的按钮需要么添加有效链接，要么设置为视觉禁用状态。导航中需标记当前页面。

B10. Ship requirements

B10. 上线要求

Things that get forgotten and make a page feel unfinished:
  • Privacy policy and terms links in the footer
  • A custom, branded 404
  • Client side form validation for email format and required fields
  • A skip to content link for keyboard users
  • Cookie consent where the jurisdiction requires it
  • A branded favicon
  • <title>
    , meta description, 
    og:image
    , and social sharing tags
  • Alt text on every meaningful image
  • Semantic HTML: 
    <nav>
    , 
    <main>
    , 
    <article>
    , 
    <aside>
    , 
    <section>
  • A way back from every page
这些容易被遗忘的细节会让页面显得不完整：
  • 页脚添加隐私政策与条款链接
  • 自定义品牌化404页面
  • 客户端表单验证：邮箱格式与必填字段
  • 为键盘用户添加"跳转到内容"链接
  • 在有法律要求的地区添加Cookie同意提示
  • 品牌化favicon
  • <title>
    、meta描述、
    og:image
    及社交分享标签
  • 每张有意义的图片添加Alt文本
  • 语义化HTML：使用
    <nav>
    、
    <main>
    、
    <article>
    、
    <aside>
    、
    <section>
    标签
  • 每个页面都有返回路径

B11. Tagline reveal section (mandatory)

B11. 标语展示区块（必填）

Every landing page includes one large type section stating the core benefit or tagline, separate from the hero. It sits further down the page as its own moment, not stacked directly under the hero.
Copy
  • Minimum two lines of text.
  • A benefit statement or tagline, written in the voice of A5, not a generic section heading.
Typography
  • Size 
    text-4xl
    to 
    text-6xl
    depending on line count, following the B1 type scale.
  • Max width capped like the hero, so lines break at meaningful points per B5.
Animation
  • Text starts in a subtle, muted tone, roughly 25 to 35% opacity of the theme's base text color.
  • As the section scrolls into view, each word transitions individually from that muted tone to the full text color, in reading order.
  • Words activate one at a time as they cross a trigger line, not the entire block flipping at once. The transition uses the custom easing curve from B7, never a linear fade.
  • Implement with 
    IntersectionObserver
    per word, or a single scroll listener throttled through 
    requestAnimationFrame
    . Never an unthrottled 
    window.addEventListener('scroll')
    , per B7.
每个着陆页需包含一个独立于Hero区域的大字号标语展示区块，用于呈现核心价值或标语。该区块需位于页面下方，作为独立的视觉节点，不得直接堆叠在Hero区域下方。
文案要求
  • 至少两行文本。
  • 核心价值语句或标语，需遵循A5的文案风格，不得使用通用区块标题。
排版要求
  • 根据行数，使用
    text-4xl
    至
    text-6xl
    的字号，需符合B1的字号体系。
  • 最大宽度与Hero区域一致，需按照B5的要求在表意连贯的位置换行。
动效要求
  • 文本初始为柔和的低饱和度色调，透明度约为主题基础文本颜色的25%-35%。
  • 当区块滚动进入视口时，每个单词需按照阅读顺序依次从低饱和度色调过渡到完整文本颜色。
  • 单词需在越过触发线时逐个激活，不得整个区块一次性切换。过渡效果需使用B7中的自定义缓动曲线，禁止使用线性淡入。
  • 实现方式：为每个单词使用
    IntersectionObserver
    ，或通过
    requestAnimationFrame
    节流的单个滚动监听。禁止使用未节流的
    window.addEventListener('scroll')
    ，需遵循B7的要求。

Output format

输出格式

When generating a landing page from scratch, return these in order before writing code:
  1. Page outline — sections and their order
  2. Hero copy — headline, subheadline, CTA, proof line
  3. Benefits — three to five outcome driven bullets
  4. How it works — three steps
  5. FAQ — six to twelve questions and answers
  6. SEO / AEO — index or noindex recommendation, plus title and meta if indexed
  7. Layout recommendation — A, B, C, or D, and why
Then build section by section per A6.
从零构建着陆页时，编写代码前需按以下顺序输出内容：
  1. 页面大纲 — 区块及排列顺序
  2. Hero文案 — 标题、副标题、CTA、信任语句
  3. 核心价值 — 3-5条以成果为导向的要点
  4. 运作流程 — 3个步骤
  5. 常见问题 — 6-12个问题及解答
  6. SEO/AEO优化 — 是否索引的建议，若允许索引则提供标题与meta描述
  7. 布局推荐 — 选择A/B/C/D中的一种，并说明理由
然后按照A6的顺序逐区块构建。

Quick checklist

快速检查清单

Strategy
  • One offer, one audience, one primary action
  • No competing CTAs above the fold
  • Specific numbers instead of vague verbs
  • At least one risk reversal
  • Proof sits next to the claim it supports
  • Layout type chosen deliberately
Visual
  • Single approved typeface, no italics, no ultra bold
  • No hyphens in copy, no orphaned words
  • Every font size lands on a Tailwind scale step
  • Every spacing value comes from the spacing table
  • Nested radii follow the formula
  • No single sided card borders, no background gradients
  • Hero heading and subheading capped at 680px with meaningful line breaks
  • Icons from Phosphor, Solar, or Iconamoon
  • Every transition uses a custom cubic bezier, scroll reveals use IntersectionObserver
  • Tagline reveal section present, minimum two lines, words activate one at a time on scroll
Content and ship
  • No Lorem Ipsum, no placeholder brands, no AI cliches, no round fake numbers
  • Hover, active, focus, loading, empty, and error states all present
  • No dead links, current nav item indicated
  • 404, legal links, form validation, favicon, meta tags, alt text
策略层面
  • 一个产品/服务、一类受众、一个核心行动
  • 首屏区域无竞争CTA
  • 使用具体数据而非模糊动词
  • 至少包含一项风险逆转措施
  • 信任信号紧邻所支撑的主张
  • 布局类型经过审慎选择
视觉层面
  • 使用单一认可字体，无斜体，无超粗体
  • 文案无连字符，无孤词
  • 所有字号均符合Tailwind字号体系
  • 所有间距值均来自间距规范表
  • 嵌套圆角遵循公式
  • 无单边卡片边框，无背景渐变
  • Hero标题与副标题最大宽度680px，且在表意连贯处换行
  • 使用Phosphor、Solar或Iconamoon图标
  • 所有过渡效果使用自定义三次贝塞尔曲线，滚动显示使用IntersectionObserver
  • 包含标语展示区块，至少两行文本，滚动时单词逐个激活
内容与上线层面
  • 无Lorem Ipsum占位文本、无占位品牌名、无AI陈词滥调、无规整虚假数据
  • 包含悬停、激活、聚焦、加载、空状态、错误状态
  • 无无效链接，导航标记当前页面
  • 包含404页面、法律链接、表单验证、favicon、meta标签、Alt文本