laser1209/aerie-yunqi/frontend-skill

前端着陆页设计（frontend-skill）

要产出一个完整可用的着陆页 / 官网 / 应用界面 / 原型时用这套流程。它管的是"整页怎么搭"：叙事顺序、图文配比、首屏冲击力、主行动点；单个组件的样式细节交给 frontend-design。

铁律

1. 首屏 3 秒定生死：访客不会看滚动条以下的内容。首屏必须回答"这是什么、给谁、下一步点哪"，标题 6~12 字讲清价值，主按钮唯一且显眼。
2. 一页一个主行动点：同一页面不要并存"注册""下载""咨询""关注"四个 CTA，次要入口一律弱化。
3. 叙事按顺序推进：典型骨架是 痛点 → 方案 → 证据 → 行动。区块顺序不能乱，访客的信任是一层层建立的。
4. 图优先于长文：能用一个截图或示意图说清的，不要写三段话；真图优于示意图，示意图优于纯文字。
5. 移动端优先：先在 375px 宽度把布局跑通，再向上适配，不要桌面端做完再"顺便"适配手机。

步骤

1. 写文案骨架：先把每一屏的标题、副标题、按钮文字用纯文字列出来，确认逻辑通顺，再动手做视觉。
2. 定区块顺序：Hero / 信任背书 / 核心功能 / 使用场景 / 社会证明 / 价格 / FAQ / 尾屏 CTA，按需裁剪，不留空壳区块。
3. 搭响应式栅格：容器宽度、断点、间距三件套先定死，后续所有区块复用，禁止每块各写一套。
4. 做首屏：主标题 + 一句话副标题 + 唯一主按钮 + 一张主视觉（截图或插画），确保不滚动也能看懂。
5. 填社会证明：客户 logo、用户评价、关键数据至少放一项，避免整页"自说自话"。
6. 收尾屏：页面底部再放一次主行动点，重复核心承诺，别用"Copyright ©"敷衍收场。
7. 验收：在 375px 预览或真机走一遍，检查无横向滚动条、按钮可点、图片不拉伸变形。

输出形态

## 页面结构
| 区块 | 目的 | 核心文案 | 视觉元素 |
 
## 首屏
- 主标题：…  副标题：…  主按钮：…
- 主视觉：…
 
## 设计 token
- 主色 / 中性色 / 强调色、字体、栅格断点、间距
 
## 实现
（完整 HTML/CSS 或框架组件，响应式可用）

反面例子（不要这样）

• 首屏只放一个 logo 加一句口号，访客不知道能干什么。
• 一页上四个不同颜色的按钮抢注意力。
• 通篇 lorem ipsum，区块顺序混乱、没有叙事。
• 桌面端很漂亮，手机上一堆横向滚动条。
• 用十张风格不一的网图硬凑"丰富"，视觉散架。