落地页设计
落地页不是首页。首页服务于多个意图。落地页赢得一个意图：
一个offer → 一个受众 → 一个主要行动。
本技能分为两半。Part A 决定页面内容及其结构。Part B 是不可妥协的视觉系统。先完成A部分，再处理B部分。
适用范围
适用于所有Web UI工作：落地页、营销站点、组件、仪表盘、原型和设计评审。当此处的规则与框架默认值冲突时，以此文件为准。当用户的明确提示与规则冲突时，以用户为准。
配套技能。 如需改造现有站点而非新建，请使用 redesign-existing-projects（github.com/elayadesign/redesign-skill）。它诊断通用模式，并就此文件中的每个具体值进行引用。
PART A — 策略与结构
A1. 信息采集
在设计或编写之前收集这些信息。只询问缺失的部分，并一次性询问所有问题，而非逐个提问。
目的
- 什么是一个主要行动？（试用、演示、购买、候补名单、下载）
- offer是什么，用户到底能得到什么？
- 什么算作转化？（点击、注册、购买）
受众与背景
- ICP是谁？
- 他们试图解决什么问题？
- 三大反对理由，即他们目前为何不转化
- 流量来源：广告、搜索、社交媒体、邮件
- 访客到达时已经知道什么？
证明与素材
- 证明点：Logo、推荐语、数据、案例研究
- 截图、演示视频、产品GIF
- 保证、退款条款、取消条款
约束
- 品牌语气：随意还是专业
- 设计方向：极简编辑风、趣味3D、玻璃拟态UI
- 是否优先移动端？
如果用户无法回答，请做出合理假设，用一句话说明，然后继续。不要阻止构建。
A2. 页面结构
首屏（必需）
- 标题：结果加受众
- 副标题：说明方式并增加具体性
- 主要CTA：清晰动词加用户所得
- 一个证明信号：Logo条、统计数据或简短推荐语
- 主视觉：产品截图或视频，或有力的插图
中段（论证） 6. 问题到解决方案：一个章节 7. 好处：三到五个，以结果为导向 8. 运作方式：三步 9. 社会证明：推荐语或案例研究
底部（处理反对意见） 10. FAQ：六到十二个问题 11. 风险反转：试用、随时取消、保证 12. 最终CTA：与顶部完全相同
在中段论证的某个位置（通常在主视觉之后或好处之后），纳入B11中的强制性标语揭示章节。
A3. 布局选择
选择一种并说明原因。
| 类型 | 使用场景 |
|---|---|
| A. 经典主视觉加章节 | 产品可通过主视觉截图理解。最常见。 |
| B. 长文故事 | 需要教育和克服怀疑。 |
| C. 最小化转化页面 | 高意图流量（向已知用户发送邮件），或短期offer（如下载或候补名单）。 |
| D. 对比页面 | 搜索意图包含替代方案（“X vs Y”、“最佳”）。通常与SEO页面搭配。 |
A4. 转化规则
将消息与来源匹配。 如果流量来自广告，在主视觉中镜像广告标题，并保持相同的承诺和视觉风格。
让下一步清晰可见。 一个主要CTA。切勿在首屏放置竞争性的CTA。
先写好处。 功能是它能做什么。好处是这对用户意味着什么。
具体化。
- ❌ "节省时间并简化"
- ✅ "将每周报告时间从4小时缩短至15分钟"
降低风险。 至少选择一项：免费试用、免费计划、无信用卡要求、随时取消、退款保证。
将反对意见视为一个章节，而非脚注。 对于高摩擦的offer，将FAQ提前。将证明直接放在其所支持的主张旁边。
A5. 文案
标题公式
- "{结果} 无需 {痛点}"
- "面向 {受众} 的 {类别}"
- "在 {时间} 内交付 {结果}"
副标题。 一或两个句子。说明它是什么以及为谁而设。
CTA。 动词加用户所得。切勿使用“了解更多”或“提交”。使用“开始免费试用”、“预约演示”、“获取清单”。
好处要点。 好处加粗，然后是证明或细节。例如：更快的迭代 — 一键生成三种布局变体。
注意：B1中的文案规则仍然适用。句子中不能有连字符，不能出现孤词。
A6. 构建顺序
按章节工作，顺序如下：
- 主视觉
- 好处
- 运作方式
- 证明
- FAQ
- 最终CTA
永远不要在每次迭代中重建整个页面。按章节构建可保持控制并使差异可审阅。
A7. SEO与AEO
不要索引 仅用于广告的活动页面或高度时效性的offer。使用 noindex 或将其保留在非索引路径之后。
要索引 常青offer以及搜索意图与承诺匹配的页面。添加清晰的标题和元描述，从首页和功能页添加内部链接，并以纯问答形式呈现FAQ以支持AEO。如适用，添加FAQ Schema。
A8. 常见陷阱
- 首屏CTA过多
- 价值主张模糊：“简化”、“优化”
- 庞大的功能列表但没有结果
- 证明被埋在底部
- 破坏可读性的移动端布局
- 没有明确的下一步
PART B — 视觉系统
每个视觉值必须通过这些规则解析，而非临时创造。
B1. 排版
字体
使用： Geist, Manrope, Geist Mono, Poppins。
切勿使用： Inter, Roboto, Arial, Open Sans, Helvetica。
界面中任何地方都不要使用斜体字体。
每个站点使用一种字体。 除非提示明确要求，否则不要搭配两种字体。Geist Mono仅允许与主要字体一起用于代码、数据或数字UI（需要等宽字体时）。
切勿使用超粗字重（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. 间距
仅使用这些值。中间或之外没有其他值。
| Token | 值 |
|---|---|
| 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时应用此公式。低于此值，保持内形状为方形或不变。
示例：外部卡片使用 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。 编写真实的草稿文案。
- 无“张三”。 使用多样化、真实的名字。
- 无占位品牌，如“示例公司”、“新星”或“智能流”。构思符合上下文的、可信的名称。
- 无整数的虚假数字，如
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和社交分享标签- 每个有意义的图片的Alt文本
- 语义HTML：
<nav>、<main>、<article>、<aside>、<section> - 从每个页面返回的方式
B11. 标语揭示部分（强制性）
每个落地页包含一个大型排版部分，陈述核心好处或标语，与主视觉分离。它位于页面较下方，作为独立时刻出现，而非直接堆叠在主视觉下方。
文案
- 至少两行文本。
- 一个好处陈述或标语，使用A5的语气编写，而非通用的章节标题。
排版
- 字号
text-4xl到text-6xl，取决于行数，遵循B1的字号标度。 - 最大宽度与主视觉相同，以便在关键点换行（遵循B5）。
动效
- 文本以柔和、淡化的色调开始，约为主题基础文本颜色透明度的25%至35%。
- 当该部分滚动进入视口时，每个单词逐个从该淡化色调过渡到完整文本颜色，按阅读顺序。
- 单词在越过触发线时逐个激活，而非整个块同时翻转。过渡使用B7中的自定义缓动曲线，绝非线性淡入。
- 使用每个单词的
IntersectionObserver实现，或通过requestAnimationFrame限流的单个滚动监听器。切勿使用未限流...