landing-page-design

落地页设计

落地页不是首页。首页服务于多种意图，而落地页只需实现一种意图：

一个优惠 → 一个受众 → 一个主要操作。

这项技能分为两部分。A 部分决定页面要说什么，以及如何组织结构。B 部分是不可妥协的视觉系统。先完成 A，再处理 B。

适用范围

适用于所有 Web UI 工作：落地页、营销网站、组件、仪表板、原型和设计评审。如果此处的规则与框架默认设置冲突，以本文件为准。如果用户的明确提示与规则冲突，以用户为准。

配套技能。 若要升级现有网站，而非构建新网站，请使用 redesign-existing-projects（github.com/elayadesign/redesign-skill）。它会诊断通用设计模式，并在所有具体取值上遵循本文件。

A 部分 — 策略与结构

A1. 信息收集

设计或编写之前，先收集以下信息。只询问缺失的信息，并一次性提出所有问题，不要一次问一个。

目的

• 唯一的主要操作是什么？（试用、演示、购买、候补名单、下载）
• 优惠具体是什么？用户会得到什么？
• 什么算转化？（点击、注册、购买）

受众与背景

• 理想客户画像（ICP）是谁？
• 他们想解决什么问题？
• 最主要的三个异议是什么？也就是他们今天不转化的原因
• 流量来源：广告、搜索、社交媒体、电子邮件
• 访客到达页面时已经了解什么？

证明材料与素材

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

限制条件

• 品牌语气：轻松还是专业
• 设计方向：极简编辑风、俏皮 3D、玻璃 UI
• 是否优先考虑移动端？

如果用户无法回答，做出合理假设，用一行说明，然后继续。不要因此耽搁构建。

A2. 页面结构

首屏（必需）

1. 标题：成果加受众
2. 副标题：说明实现方式并补充具体信息
3. 主要 CTA：明确的动词加上用户将获得的内容
4. 一个证明信号：徽标栏、数据或简短推荐语
5. 主视觉：产品截图、视频或有力的插图

页面中部（论证） 6. 从问题到解决方案，一个版块 7. 三到五项优势，以成果为导向 8. 工作原理，三个步骤 9. 社会证明，推荐语或案例研究

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

在页面中部的论证内容中，加入 B11 要求的标语揭示版块，通常放在主视觉之后或优势之后。

A3. 布局选择

选择一种并说明原因。

A4. 转化规则

让信息与来源匹配。 如果流量来自广告，在主视觉中复用广告标题，并保持承诺和视觉语气一致。

让下一步一目了然。 只设置一个主要 CTA。首屏绝不要放置相互竞争的 CTA。

先写优势。 特性描述产品能做什么，优势说明这对用户意味着什么。

具体明确。

• ❌“节省时间，简化流程”
• ✅“将每周报告的耗时从 4 小时缩短到 15 分钟”

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

将异议作为一个版块处理，而非脚注。 对高门槛优惠，将常见问题提前。把证明材料直接放在其支持的声明旁边。

A5. 文案

标题公式

• “无需承受{痛点}，即可实现{成果}”
• “面向{受众}的{类别}”
• “在{时间}内交付{成果}”

副标题。 用一到两句话说明它是什么，以及适合谁使用。

CTA。 使用动词加上用户能获得的内容。绝不要使用“了解更多”或“提交”。使用“开始免费试用”“预约演示”“获取清单”。

优势要点。 将优势加粗，然后给出证据或细节。例如：更快地迭代 — 一键生成三个布局版本。

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

A6. 构建顺序

按以下顺序逐个构建版块：

1. 首屏主视觉
2. 优势
3. 工作原理
4. 证明
5. 常见问题
6. 最终 CTA

不要每次迭代都重建整个页面。逐个处理版块，既能保持掌控，也能让差异易于审查。

A7. SEO 和 AEO

不要编入索引 仅用于广告活动的页面或时效性很强的优惠页面。使用 noindex，或将它们放在非索引路径下。

应编入索引 常青优惠页面，以及搜索意图与承诺相符的页面。添加清晰的标题和元描述、从首页和功能页面指向这些页面的内部链接，并以纯问题和回答的形式呈现常见问题，以便用于 AEO。适当时添加 FAQ schema。

A8. 常见问题

• 首屏可见区域中的 CTA 过多
• 价值主张模糊：“简化流程”“优化”
• 功能列表冗长，却没有说明成效
• 证明内容藏在页面底部
• 移动端布局影响可读性
• 没有明确的下一步

B 部分 — 视觉系统

所有视觉值都必须依据这些规则确定，而不是临时编造。

B1. 字体排版

字体

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

绝不使用： Inter、Roboto、Arial、Open Sans、Helvetica。

界面中的任何位置都不得使用斜体字体。

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

绝不使用超粗字重（900 / black）。字重最高为 semibold 或 bold。

文案规则

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

不要留下孤零零的词语。 最后一行不得只出现一个词。标题使用 text-wrap: balance，正文使用 text-wrap: pretty。

字号比例

始终使用 Tailwind 的默认字号比例确定字体大小。不要保留任意值，包括 text-[19px]、font-size: 22px 或 1.4rem。

如果现有字号与比例中的任何一级都不完全吻合，则向下取最接近的一级，同时考虑字号及其对应的行高。

在同一次审查中，不要将比例取整与其他位置单独设置的自定义行高结合使用。字距和行高只能在匹配级别已提供的值范围内调整，以免两套规则互相冲突。

按钮文字

• 主按钮：text-base（16px），semibold。
• 较小的页眉按钮：text-sm（14px），semibold。

B2. 间距

仅限使用以下值。不得使用介于其间的值，也不得使用范围外的值。

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

B3. 圆角

仅使用 Tailwind 的圆角值。

嵌套圆角公式。 当一个形状位于另一个形状内，且两者之间的间距小于 32px 时：

inner radius = outer radius − gap

仅当结果大于 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. 动效

动效应有分量感，并逐渐减速至静止。绝不要使用浏览器默认曲线（ease、linear、ease-in-out）。

基础曲线： 布局和位置变化使用 ease-[cubic-bezier(0.22,1,0.36,1)] 和 duration-500。悬停时的颜色和透明度变化可使用 duration-300，但时长不得短于 200ms。

仅为 transform 和 opacity 添加动画。绝不要为 top、left、width 或 height 添加动画。

遵循 prefers-reduced-motion：将移动效果替换为单纯的透明度变化。

导航

静止状态。 紧凑的导航栏应悬浮在顶部边缘下方，而不是紧贴边缘；居中显示，尺寸适应内容。导航栏使用半透明表面并叠加背景模糊，使页面内容在其后方若隐若现。间距遵循 B2，圆角遵循 B3。

菜单切换。 打开和关闭图标应在两种状态之间变形，而不是瞬间切换。使用 B6 中的图标，或自行绘制线条；无论采用哪种方式，都应使用基础曲线为变化添加动画。

移动端菜单。 以全高面板形式打开，而不是小型下拉菜单。面板背景使用主题的基础表面，并设置较高的不透明度和强模糊效果。

链接入场。 打开的菜单中的链接按阅读顺序依次出现，每个链接在淡入的同时向上移动一小段距离（Spacing-300，24px）。每个项目之间间隔 60ms，整个动画序列最长不超过 400ms，避免较长的菜单显得迟缓。

滚动显现

区块进入视口时，应上移一小段距离（Spacing-400，32px），并在基础曲线下用 600 至 800ms 从完全透明淡入至完全不透明。每个区块仅显现一次；向上滚动时不要重新播放。

使用 IntersectionObserver 或 Framer Motion 的 whileInView 触发显现。绝不要将工作绑定到未经节流的 window.addEventListener('scroll')，因为它会在每一帧运行，拖慢移动端性能。

B8. 内容真实感

每段示例内容都应像是出自一款真实产品，并面向真实用户。

• 撰写文案。 不要使用占位拉丁文，也不要写“在此填写标题”。请用产品自身的语气撰写真实的句子。
• 人物。 为评价和团队成员提供完整、具体且符合产品受众与地区特点的姓名。不要让同一张脸代表两个人。
• 品牌和徽标。 虚构听起来符合产品所属行业的名称。物流工具的客户听起来应像物流公司，而不是泛泛的科技初创公司。
• 数字。 避免可疑的整齐数字。定价应像真实价格，指标应带小数或以非整数字结尾，列表中的日期应有所变化。
• 禁用的填充词。 不要写“revolutionize”“supercharge”“cutting edge”“effortless”“transform your workflow”“take it to the next level”“harness the power”或“world class”。改用直白的语言说明产品的功能。
• 标题和按钮使用句首字母大写格式。
• 系统消息。 确认消息应平和且具体（“已向 Dana 发送发票”）。错误消息应说明哪里失败以及接下来该怎么做（“上传失败。文件超过 20 MB。”）。不要使用俏皮的感叹词或感叹号。

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 节流的单个滚动监听器。根据 B7 的要求，绝不要使用未经节流的 window.addEventListener('scroll')。

输出格式

从头开始生成落地页时，请先按以下顺序返回内容，再编写代码：

1. 页面大纲 — 各个版块及其顺序
2. 主视觉文案 — 标题、副标题、CTA、背书文案
3. 优势 — 三到五条以成果为导向的要点
4. 工作原理 — 三个步骤
5. 常见问题 — 六到十二个问题及解答
6. SEO / AEO — 建议索引或不索引；若选择索引，则提供标题和元数据
7. 布局建议 — 选择 A、B、C 或 D，并说明原因

然后按照 A6，逐个版块构建。

快速检查清单

策略

• 一个产品、一类受众、一个主要行动
• 首屏上方没有相互竞争的 CTA
• 使用具体数字，而非含糊的动词
• 至少提供一种风险逆转措施
• 证明内容紧邻其所支撑的主张
• 有意选择布局类型

视觉

• 只使用一种获准字体，不使用斜体和超粗字重
• 文案中不使用连字符，不留下孤行词语
• 所有字号都符合 Tailwind 刻度
• 所有间距值都来自间距表
• 嵌套圆角遵循公式
• 不使用仅单侧带边框的卡片，不使用背景渐变
• 主视觉标题和副标题宽度不超过 680px，并设置有意义的换行
• 图标来自 Phosphor、Solar 或 Iconamoon
• 所有过渡效果都使用 B7 基础曲线，滚动显示使用 IntersectionObserver
• 包含标语展示版块，至少两行文字，并在滚动时逐词激活

内容与交付

• 使用真实的初稿文案、可信的名称和数字，不使用禁用的填充词
• 包含悬停、激活、焦点、加载、空状态和错误状态
• 没有失效链接，并标明当前导航项
• 包含 404 页面、法律链接、表单验证、网站图标、元标签和替代文本

致谢

此技能的部分内容改编自 Leon Lin（@LexnLin）采用 MIT 许可的 taste-skill。其中的重新设计审核结构、内容真实性检查，以及动效和导航理念，为此处对应的版块提供了参考；这些内容此后均已重写。

MIT License

Copyright (c) 2026 Leonxlnx

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.