产品官网 Hero：当品牌协议遇到落地页

背景：给一个 AI 心理健康产品做官网首屏。如果直接用 AI 生成「科技感落地页」，结果是紫渐变 + 白字 + 三张圆角卡片——和任何一家 AI 公司没有区别。huashu-design 用品牌资产协议 + 设计方向顾问，做了一版有品牌识别度的 Hero。

问题：为什么官网首屏最难做？

官网首屏（Hero Section）是品牌的第一印象。它必须在 3 秒内回答三个问题：

1. 你们是什么？（产品定位）
2. 关我什么事？（价值主张）
3. 我该怎么做？（CTA）

大部分 AI 生成的 Hero 能回答第 3 个（「立即试用」按钮），但回答不了 1 和 2——因为 AI 不知道品牌是什么。

第一步：品牌资产协议（3 分钟）

开工前，AI 按品牌资产协议执行：

AI: 关于这个品牌，你手上有以下哪些资料？
1. Logo（SVG/高清 PNG）
2. 产品图/界面截图
3. 色值清单
4. 字体清单
5. 品牌官网链接

我：只有品牌名和一些参考截图，你帮我搜。

AI 去官网提取了品牌色（温暖薰衣草 #7B68EE + 柔白 #FAF8FF），找了产品 Logo 和界面截图，生成了 brand-spec.md。整个过程 3 分钟。

这一步避免了什么？避免了 AI 猜色值——如果它猜，大概率是标准紫渐变。

第二步：设计方向顾问（2 分钟）

AI 推荐了 3 个 Hero 的方向：

选了人文温暖方向——毕竟是一个心理健康产品，不要让用户一进来就感到冷冰冰的科技感。

第三步：Hero 结构——三区布局

huashu-design 的 Hero 模板分为三个区域：

顶部导航（Navigation）

极简导航：Logo（左）+ 4 个链接 + CTA 按钮（右）。白底，干净。

[Logo]  产品 · 功能 · 关于 · 博客    [开始使用]

不要汉堡菜单了——对于官网首屏，桌面端访问量最大，导航需要一眼可读。

中部主视觉（Hero Content）

左文右图的标准布局，但关键在细节：

左侧：
- 大标题（28px，衬线）：「你的 AI 心理伙伴」
- 副标题（14px，300 weight）：「7×24 小时倾听，基于循证疗法的情感支持」
- CTA 按钮：暖薰衣草底色 + 白字
- 信任标记：「已有 50,000+ 用户」

右侧：
- 产品截图/界面 mockup（圆角，阴影）
- 不要用 CSS 画的产品剪影——这是品牌资产协议明确禁止的。要么放真实界面截图，要么放产品渲染图。

底部过渡

一个极淡的渐变到下一节，或者一个简单的波形分隔线。不要让 Hero 底部是硬切。

第四步：动效——克制地加

Hero 区加了三个极轻微动效：

1. 标题 fade-in：页面加载后 300ms 渐入
2. 按钮 pulse：CTA 按钮每 4 秒一次极淡呼吸
3. 图片 float：产品截图 6 秒一次上下浮动（4px 幅度）

动效原则：用户不需要察觉动效的存在，只感觉到页面「活」的。

如果用户注意到「哦这里有个动画」——那就是过度设计了。

品牌一致性检查清单

交付前，AI 跑了 5 维度的快速自检：

耗时复盘

核心心得

官网 Hero 最难的不是排版，而是 「让用户 3 秒内知道你是谁」。

品牌资产协议解决了「你是谁」——色值、字体、Logo 都是真实的，不是 AI 猜的。设计方向顾问解决了「怎么表达」——从受众和场景反推风格，而不是随机选模板。

下次你要做官网首屏的时候，先花 3 分钟跑一遍品牌资产协议。不做品牌的 Hero，和所有其他 AI 落地页没有区别。

截图清单

1. ✅ 产品官网 Hero（三区布局 + 品牌色 + 产品图）— 已插入上文