着陆页设计

着陆页不是首页。首页服务于多种意图。着陆页只赢得一个意图：

一个报价 → 一个受众 → 一个主要行动。

此技能包含两大部分。A部分 决定页面说什么以及如何组织。B部分 是不可协商的视觉系统。在处理B部分之前，请先完成A部分。

适用范围

适用于所有Web UI工作：着陆页、营销网站、组件、仪表板、原型和设计审查。当此处的规则与框架默认值冲突时，以此文件为准。当用户的明确提示与规则冲突时，以用户为准。

配套技能。 若要升级现有网站而非构建新网站，请使用 redesign-existing-projects (github.com/elayadesign/redesign-skill)。它用于诊断常规模式，并在此文件中寻找每个具体值。

A部分 — 策略与结构

A1. 需求调研

在设计或撰写之前收集以下信息。仅询问缺失的部分，并一次性提出所有问题，而不是逐个提问。

目标

主要行动是什么？（试用、演示、购买、候补名单、下载）
报价是什么？他们具体能得到什么？
什么算作一次转化？（点击、注册、购买）

受众与背景

理想客户画像（ICP）是谁？
他们试图解决什么问题？
三大异议，即他们今天不转化的原因
流量来源：广告、搜索、社交、邮件
访问者到达时已经知道什么？

证据与资产

证据点：标志、推荐语、数据、案例研究
截图、演示视频、产品GIF
保证、退款条款、取消条款

约束条件

品牌语气：休闲还是专业
设计方向：极简编辑风、趣味3D、玻璃UI
是否优先移动端？

如果用户无法回答，请做出合理假设，用一句话说明，然后继续。不要拖延构建。

A2. 页面结构

首屏（必需）

标题，包含成果加受众
副标题，阐明方式并增加具体性
主要行动号召（CTA），清晰动词加他们得到什么
一个证明信号，如标志条、数据或简短推荐语
首屏视觉，产品截图或视频，或强有力的插图

中页（论证部分） 6. 问题到解决方案，一个部分 7. 好处，三到五个，以成果为导向 8. 运作方式，三个步骤 9. 社交证明，推荐语或案例研究

底部（异议处理） 10. 常见问题（FAQ），六到十二个问题 11. 风险逆转，试用、随时取消、保证 12. 最终CTA，与顶部相同

在A部分中页论证的某处包含B11中的强制性标语展示区段，通常紧接在首屏之后或好处之后。

A3. 布局选择

选择一个并说明原因。

类型	使用场景
A. 经典首屏加分节	产品可以从首屏截图理解。最常见。
B. 长文故事	需要教育用户并克服怀疑。
C. 简约转化页	高意图流量（如给已知用户的邮件），或简短报价如下载或候补名单。
D. 对比页	搜索意图包含替代品（"X vs Y"，"最佳选择"）。通常与SEO页面搭配。

A4. 转化规则

消息匹配来源。 如果流量来自广告，请在首屏中镜像广告标题，并保持相同的承诺和视觉基调。

让下一步显而易见。 一个主要CTA。切勿在首屏放置竞争性CTA。

先写好处。 功能是它做什么。好处是这对他们意味着什么。

具体化。

❌ "节省时间并简化流程"
✅ "将您的每周报告从4小时缩短到15分钟"

降低风险。 至少选择一项：免费试用、免费计划、无需信用卡、随时取消、退款保证。

将异议视为一个部分，而不是脚注。 对于高摩擦的报价，将FAQ提前。将证明直接放在它所支持的声明旁边。

A5. 文案撰写

标题公式

"{成果} 无需 {痛苦}"
"面向 {受众} 的 {类别}"
"在 {时间} 内交付 {结果}"

副标题。 一到两句话。阐明它是什么以及为谁而设。

行动号召（CTA）。 动词加他们得到什么。切勿使用"了解更多"或"提交"。使用"开始免费试用"、"预约演示"、"获取清单"。

好处要点。 加粗好处，然后是证明或细节。例如：更快的迭代 — 一键生成三种布局变体。

注意：B1中的文案规则仍然适用。句子内不要使用连字符，不要有孤词。

A6. 构建顺序

按此顺序逐个部分构建：

首屏
好处
运作方式
证明
FAQ
最终CTA

切勿在每次迭代中重建整个页面。逐个部分构建可保持控制并便于审查差异。

A7. SEO与AEO

不要索引 仅用于广告活动的页面或高度有时效性的报价。使用 noindex 或将它们保留在非索引路径后面。

要索引 长期有效的报价以及搜索意图与承诺匹配的页面。添加清晰的标题和元描述，从首页和功能页面添加内部链接，并以简洁的问答形式添加FAQ以支持AEO。如果合适，添加FAQ架构标记。

A8. 常见陷阱

首屏区域内CTA过多
模糊的价值主张："简化"、"优化"
大量功能列表但没有成果
证明被埋在底部
破坏可读性的移动端布局
没有明确的下一步

B部分 — 视觉系统

每个视觉值必须通过这些规则解析，而不是临时发明。

B1. 排版

字体

使用： Geist, Manrope, Geist Mono, Poppins。

切勿使用： Inter, Roboto, Arial, Open Sans, Helvetica。

切勿在界面中任何地方使用斜体字体。

每个网站一种字型。 除非提示明确要求，否则不要搭配两种字体。仅当代码、数据或数字UI在功能上需要等宽字体时，才允许将 Geist Mono 与主要字体一起使用。

切勿使用超粗字重（900 / 黑色）。上限为半粗或粗体。

文案规则

文本中无连字符。 不要在正文、标题或标签中使用 -。请改写短语。

无孤词。 单个单词绝不能单独留在最后一行。对标题应用 text-wrap: balance，对正文应用 text-wrap: pretty。

字号比例

始终将字号解析为 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

不要在审核中独立地将吸附比例与单独设置的自定义行高结合使用。字距和行高只能在匹配台阶已提供的值之内进行调整，这样两个规则永不冲突。

按钮类型

主要按钮：text-base (16px)，半粗。
较小的页眉按钮：text-sm (14px)，半粗。

B2. 间距

仅可使用这些值。中间没有其他值，范围外也没有其他值。

标记	值
Spacing-0	0
Spacing-25	2px
Spacing-50	4px
Spacing-75	8px
Spacing-100	12px
Spacing-200	16px
Spacing-300	24px
Spacing-400	32px
Spacing-500	40px
Spacing-600	48px
Spacing-700	64px
Spacing-800	80px
Spacing-900	96px

主要按钮： 垂直内边距8px，水平内边距12px。

B3. 圆角

仅使用 Tailwind 的圆角值。

嵌套圆角公式。 当一个形状位于另一个形状内部，并且它们之间的间隙小于32px时：

内部圆角 = 外部圆角 − 间隙

仅当结果大于2时应用此公式。低于2时，保持内部形状为直角或不变。

示例：外部卡片为 rounded-2xl (16px)，内部内边距为8px，则内部元素的圆角为8px (rounded-lg)。

B4. 边框与背景

切勿只给卡片的一侧应用边框。 边框要么环绕整个卡片，要么根本没有。
切勿在背景中使用渐变。 背景是纯色的。

深色模式背景颜色

仅使用以下颜色：

#000000 · #181818 · #1F1F1F · #272727 · #313131 · #131209

B5. 首屏区域

标题颜色

深色主题： 标题文本从左到右渐变，#FFFFFF → #9B9B9B。
浅色主题： 标题文本从左到右渐变，#000000 → #666666。

这是使用渐变的唯一位置，且仅用于文本，绝不用于背景。

布局

标题和副标题均获得最大宽度680px。
阅读标题文案，并在有意义的位置插入换行符。
切勿以生硬切断短语或使句子更难阅读的方式换行。在思路转折处换行。

B6. 图标

使用： Phosphor, Solar, 或 Iconamoon。

切勿使用： Material Icons, Material Symbols。

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

切勿使用默认过渡。所有动效通过自定义立方贝塞尔曲线模拟真实世界的质量和弹簧物理。

transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]

流体岛屿导航

关闭状态。 导航栏是一个浮动玻璃药丸，与顶部脱离：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，依此类推。

滚动插值

元素在加载时不应静态出现。当它们进入视口时，执行温和、沉重的淡入上滑效果：

translate-y-16 blur-md opacity-0  →  translate-y-0 blur-0 opacity-100

持续800ms或更长时间。

对于由 JavaScript 驱动的揭示，使用 IntersectionObserver 或 Framer Motion 的 whileInView。切勿使用 window.addEventListener('scroll') — 它会导致持续重绘并严重影响移动端性能。

B8. 内容真实性

切勿发布填充内容。以下是页面由生成而非制作的迹象。

无 Lorem Ipsum。 撰写真实的草稿文案。
无“张三”。 使用多样化的真实姓名。
无占位品牌 如“某某公司”、“Nexus”或“SmartFlow”。需创造符合语境、可信的名称。
无整数假数据 如 99.99%、50%、$100.00。使用有机数据：47.2%、$99.00、+1 (312) 847-1928。
无AI陈词滥调。 切勿使用“提升”、“无缝”、“释放”、“下一代”、“游戏改变者”、“深入”、“织锦”或“在...的世界里”。
标题使用句首大写，而非全部单词首字母大写。
主动语态。 “我们无法保存您的更改”，而不是“错误已发生”。
成功消息中不要使用感叹号，错误中不要使用“哎呀！”。直接说明：“连接失败。请重试。”
每个用户使用独特的头像，博客文章日期应各不相同。

B9. 状态

每个交互元素都附带其完整的状态集：

悬停 — 背景偏移、轻微缩放或平移
激活 — scale(0.98) 或 translateY(1px) 以提供物理反馈
聚焦 — 可见的聚焦环。无障碍要求，非可选。
加载中 — 形如实际布局的骨架加载器，而非圆形旋转器
空状态 — 组合的“入门”视图，而非空白面板
错误 — 内联且具体。切勿使用 window.alert()。

无死链接。指向 # 的按钮要么已链接，要么在视觉上禁用。必须在导航中指示当前页面。

B10. 发布要求

容易被遗忘且使页面感觉未完成的事项：

页脚中的隐私政策和条款链接
自定义的品牌404页面
客户端表单验证（邮箱格式和必填字段）
键盘用户的“跳转到内容”链接
在管辖区域要求时的Cookie同意
品牌化的网站图标（favicon）
<title>、元描述、og:image 和社交分享标签
每个有意义的图片的替代文本
语义化HTML：<nav>、<main>、<article>、<aside>、<section>
每个页面都有返回方式

B11. 标语展示区（强制）

每个着陆页都包含一个大的文字区域，陈述核心好处或标语，与首屏分开。它位于页面下方更远的位置，作为独立的时刻，而不是直接堆叠在首屏下方。

文案

至少两行文本。
一个好处陈述或标语，以A5的语气撰写，而不是通用的部分标题。

排版

大小在 text-4xl 到 text-6xl 之间，取决于行数，遵循B1中的字号比例。
最大宽度与首屏相似，以便在B5规定处进行有意义的换行。

动效

文本以微妙的柔和色调开始，大约为主题基础文本颜色的25%到35%不透明度。
随着该部分滚动进入视口，每个单词从该柔和色调逐一转换为完整的文本颜色，按阅读顺序进行。
单词在穿过触发线时逐个激活，而不是整个区块同时翻转。过渡使用B7中的自定义缓动曲线，绝不用线性淡入。
使用基于单词的 IntersectionObserver 实现，或通过 requestAnimationFrame 节流的单个滚动监听器。绝不使用未经节流的 window.addEventListener('scroll')。

在你喜欢的 AI 中提问

文档