name: landing-page-design description: 创建高转化、视觉独特的着陆页。用于构建营销页面、产品发布、SaaS首页或任何单页转化导向的网站。指南部分逐节组成，采用反AI-slop原则。

着陆页设计

概览

构建既转化又吸引人的着陆页。这项技能结合了转化导向的结构和独特的视觉设计，创造出在AI饱和的世界中独树一帜的页面。目标：页面价值50-100美元，你会自豪地销售。

强制：氛围发现（首先做这个）

**在编写任何代码之前，你必须运行氛围发现过程。**这不是一个查找表 - 它是一个创造性的提示，每次都会产生一个独特的审美方向。

目标：没有两个着陆页看起来应该相同，即使是对于类似的产品。

氛围发现过程

向用户提出这些问题，然后综合一个独特的方向。不要只是将答案映射到预设。

第1步：收集上下文（问这些）

Q1：这个品牌会是一个什么样的现实世界地方或对象？

不是“什么行业” - 一个具体的实际事物。凌晨2点的东京便利店。祖母的厨房。一个野兽派停车场。一个珊瑚礁。747的驾驶舱。马拉喀什的跳蚤市场。1970年代的录音室。

Q2：有人应该在前3秒内感受到的一种情感是什么？

选择一个：平静。充满活力。好奇。信任。高兴。印象深刻。叛逆。怀旧。启发。娱乐。复杂。受欢迎。好奇。自信。

Q3：选择两个意外的影响来碰撞：

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

Q4：这个页面永远不应该被误认为是什么？

命名2-3个特定的事情要积极避免。“一个加密项目”，“一个健康应用”，“银行制作的东西”，“任何带有紫色渐变的东西”

第2步：发明审美（不要查找 - 创造）

根据答案，通过决定来创造一个独特的氛围：

颜色发明（不要使用记忆中的调色板 - 从Q1的地方/对象中衍生）

那个现实世界的地方/对象中存在什么颜色？
提取3-4种感觉真实参考的颜色
创造具体的十六进制代码新鲜 - 不要重用之前项目的代码
给你的调色板起一个有感情的名字（不是“蓝色和橙色”而是“午夜便利店”或“锈带早晨”）

排版发明（与声音碰撞匹配）

在那个地方的文字听起来会怎么样？
找到一个展示字体，体现Q3的碰撞
不要默认你通常的选择 - 用新的眼光浏览Google字体
考虑：重量，宽度，对比，怪癖

布局发明（从物理空间衍生）

那个地方的空间是如何组织的？
它是狭窄还是宽敞？网格状还是有机？垂直还是水平？
什么意外的布局选择会体现Q3的碰撞？

动作发明（与情感匹配）

情感如何移动？
平静 = 几乎不可察觉。充满活力 = 运动的。复杂 = 慢而深思熟虑。
这个页面的一个标志性动作是什么？

第3步：编写你的氛围规范

在编码之前，明确地写出来：

氛围名称：[发明一个2-3个词的名字]
参考：[Q1中的地方/对象]
情感：[从Q2]
碰撞：[从Q3]
反模式：[从Q4]

颜色：
- 主色：[十六进制] - [为什么这个颜色]
- 副色：[十六进制] - [为什么]
- 背景：[十六进制] - [为什么]
- 重点：[十六进制] - [为什么]
- 调色板名称：[有感情的名字]

排版：
- 展示：[特定字体名称] - [为什么它合适]
- 正文：[特定字体名称] - [为什么]
- 角色：[描述声音]

布局：
- 密度：[稀疏/平衡/密集]
- 形状：[尖锐/圆润/有机/混合]
- 标志性元素：[一个不寻常的布局选择]

动作：
- 水平：[静止/微妙/中等/动态/混乱]
- 标志性动画：[一个定义这个页面的具体动画]

WILDCARD：
- 一个意外的细节，它不“匹配”但使它难忘

第4步：新鲜感检查

在继续之前，验证：

[ ] 我没有重用我最近3个项目的十六进制代码
[ ] 我没有默认使用我的“舒适”字体（检查：我是否使用Inter？Nunito？Space Grotesk？如果是，找到其他东西）
[ ] Q3的碰撞实际上在我的选择中可见
[ ] 有人不能误认为这是我之前的着陆页
[ ] 我包括了一个让我自己都感到惊讶的野牌

示例氛围发现

Q1 - 地方/对象： “日本高峰时段的火车站”

Q2 - 情感： “自信”

Q3 - 碰撞： “交通标志+高级时装”

Q4 - 永不误认为： “冥想应用，任何古怪的东西，创业兄弟技术”

生成的氛围规范：

氛围名称：新宿跑道
参考：日本高峰时段的火车站
情感：自信
碰撞：交通标志+高级时装
反模式：没有柔和渐变，没有好玩的插图，没有圆润友好的形状

颜色：
- 主色：#1a1a1a - 火车门的黑色
- 副色：#f5f5f0 - 平台混凝土，磨损光滑
- 背景：#fafaf8 - 荧光灯白色
- 重点：#e60012 - JR线路红色，引起注意
- 调色板名称："平台边缘"

排版：
- 展示：Darker Grotesque - 自信，稍微紧凑，欧洲边缘
- 正文：Noto Sans JP - 清洁公用事业，交通启发
- 角色：权威但不冷。清晰。方向性。

布局：
- 密度：丰富但有组织 - 像车站地图
- 形状：尖锐，有意识的圆润例外（像火车窗户）
- 标志性元素：强烈的水平带将部分划分，如火车时刻表

动作：
- 水平：微妙但精确
- 标志性动画：元素从侧面滑入，像到达的火车 - 水平，平滑，精确计时

WILDCARD：
- 一个元素使用类似织物的纹理覆盖 - 高级时装碰撞

灵感启动器（当卡在Q1时）

反汇聚规则

没有十六进制代码记忆 - 从参考中新鲜生成颜色，不要回忆"我通常的蓝色"
字体轮换必需 - 不能在连续项目中使用相同的展示字体
碰撞必须显示 - 如果有人看不到Q3的两种影响，就更加努力
野牌是必须的 - 每个氛围都需要一个不"合适"但使其独特的元素
命名它 - 未命名的氛围变得通用。命名的氛围有身份。

快速上下文问题（最小版本）

如果用户只是说"给我做一个着陆页"而没有上下文，问：

“有一个地方或对象能捕捉这个品牌的能量吗？”
“应该占主导地位的情感是什么？”
“这个看起来永远不应该像什么？”

然后从这三个答案中综合出一个氛围。

转化优化的50%规则

将你的时间的50%花在英雄部分。 它是社交媒体的封面图片，第一印象，钩子。其他一切都从正确获得英雄开始。

节组成（从上到下）

1. 英雄部分（主要关注）

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

标题：锋利，以利益为驱动的钩子（参考H1画廊以获得灵感）
副标题：支持上下文，最多1-2句话
CTA按钮：主要行动+可选的次要行动
社交证明：标志马拉松，推荐信或信任徽章
视觉元素：产品拍摄，插图或动画背景

英雄变体：

分割布局（文本左，视觉右）
居中，带浮动元素
全出血背景与叠加文本
不对称，带装饰元素

2. 功能/好处部分

展示产品能做什么。选项：

便当网格：卡片在不对称布局中（苹果推广）
交替行：图像+文本，翻转侧面
图标网格：简单图标与简短描述
互动卡片：悬停状态，微动画

3. 社交证明部分

通过以下方式建立信任：

标志旋转木马（马拉松动画）
带有照片的推荐卡
统计/指标与动画计数器
案例研究片段

4. 如何工作部分

逐步解释：

编号步骤（01, 02, 03模式增加复杂性）
粘性滚动与逐步揭示
时间线或流程图可视化

5. 定价部分（如果适用）

2-3级比较
突出显示"推荐"层
功能比较表
FAQ手风琴下方

6. CTA部分

最终转化推动：

重复价值主张
强烈的标题
单一专注行动
紧迫性元素（如果真实）

7. 页脚

导航链接
社交图标
法律链接
可选的新闻稿注册

反AI-Slop原则

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

使用替代品：

Iconify Solar：多种风格（轮廓，破碎，双色调）
Heroicons：当你需要苹果般的简单时
Phosphor：灵活的重量系统
自定义SVG：品牌差异化

字体：杀死Inter/Roboto

独特的替代品：

展示：Newsreader，Playfair Display，Space Grotesk，Clash Display
正文：Outfit，Plus Jakarta Sans，Manrope，Satoshi
单：JetBrains Mono，IBM Plex Mono，Fira Code

颜色：没有紫色渐变

大胆的替代品：

深海军蓝+电色彩
温暖的中性色+单一流行色
单色，有色调深度
暗模式与霓虹灯口音
地球/有机调色板

布局：打破网格

重叠元素
对角线部分
不对称间距
容器破坏英雄元素
负空间作为设计元素

动画词汇

入口动画

fade-in：简单的不透明度过渡
blur-in：开始模糊，变清晰
slide-in：基于方向的入口
scale-in：从小到大增长到全尺寸
stagger：子元素的顺序揭示

连续动画

marquee：无限水平滚动（标志，推荐）
beam：光沿路径/边框行进
pulse：微妙的规模/不透明度呼吸
float：温和的上下移动
rotate：连续旋转（图标，装饰）

交互式动画

hover-lift：微妙的Y翻译+阴影
hover-glow：边框/阴影颜色变化
hover-reveal：隐藏元素出现
click-ripple：材料风格反馈

装饰元素

垂直网格线（基于容器大小）
面条/曲线连接器在元素之间
背景中的渐变球/泡泡
颗粒/噪声纹理覆盖
几何形状（圆形，带圆角的矩形）

设计资源

英雄灵感

Superhero（superhero.design）：策划的英雄部分
Dribbble：搜索"英雄部分"，“着陆页”
Awwwards：获奖设计

节模式

Mobin：真实网站与节分解
Bento Grids：卡片布局灵感
CTA Gallery：呼吁行动模式

排版

Google Fonts：免费，AI可访问字体
Fontshare：免费高质量字体
H1 Gallery：标题灵感

图标和标志

Iconify：统一图标API（Solar，Heroicons等）
Simple Icons：品牌标志（SVG）
Heroicons：Tailwind的图标集

实施工作流程

第1阶段：研究与收集

收集5-10个英雄屏幕截图作为线框图
确定所需的节模式
选择图标集和字体配对
定义调色板

第2阶段：英雄开发

从最佳参考屏幕截图生成英雄
迭代：更改颜色，字体，布局
添加动画（光束，淡入等）
添加装饰元素（面条，网格，数字）
直到独特为止

第3阶段：节构建

一次添加一个节（而不是全部）
每个节参考特定组件/屏幕截图
保持英雄的颜色/字体一致性
添加节特定动画

第4阶段：抛光

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

第5阶段：展示

使用无限画布布局创建封面截图
突出显示英雄
包括移动和桌面视图
添加微妙背景（模糊渐变，图案）

提示模式

英雄生成

为[产品类型]创建一个英雄部分。
更改文本，名称和数字以适应[品牌]。
使用Iconify Solar图标（双色调样式）。
使用[字体]用于标题。
添加垂直容器大小网格线。
添加01, 02, 03步骤指示器以增加复杂性。
使用[颜色]作为主色，暗模式。

节添加

适应一个新的[节类型]部分。
与英雄的颜色方案和排版相匹配。
使用标志的马拉松动画。
添加淡入模糊入场动画。
保持英雄不变。

动画增强

向主按钮边框添加光束动画。
光束应该是1px，不断围绕药片形状行进。
向功能卡添加微妙的悬停提升效果。

否定提示（不要改变）

不要改变英雄部分。
保持导航栏不变。
不要修改现有动画。

质量清单

视觉区别

[ ] 没有通用的紫色渐变
[ ] 非默认图标集（不是Lucide）
[ ] 独特的字体配对
[ ] 至少有一个"难忘"的元素
[ ] 通过CSS变量一致的颜色系统

技术质量

[ ] 移动响应（无水平滚动）
[ ] 所有图像加载（无破损占位符）
[ ] 动画性能（无卡顿）
[ ] 可访问的颜色对比度
[ ] 快速初始加载

转化优化

[ ] 明确的价值主张在折叠上方
[ ] 单一主要CTA可见
[ ] 社交证明存在
[ ] 逻辑信息层次结构
[ ] 主要行动无摩擦