awwwards-hero-section

用途

本技能仅用于 Hero 区块（首屏）。它不管理整页、导航系统、页脚或功能区块。当用户要求 Hero、落地页头部、首屏区块，或提供 Hero 设计参考截图时触发。

整个流程分为四个阶段，每个阶段都有 ✓ 质量门，未通过则阻止进入下一阶段：

在编写任何代码之前，从用户的参考图（或根据其简报推断）中提取设计信号。不要将自己的审美投射到参考上，只读取实际存在的内容。

需要提取的信号包括：模式（浅色/深色背景）、焦点元素、排版风格、文字与图像关系、布局重心、颜色数量、导航风格、微细节。

提取后需输出一段 Hero Extraction 摘要，用 2-3 行说明提取到的内容。

如果没有提供参考图，只问一个问题：“你希望这个 Hero 更接近 [深色电影感] 还是 [浅色编辑风]？品牌名和一句话价值主张是什么？”如果能从上下文推断（如用户说“AI 创业公司”或“奢侈品牌机构”），则跳过提问并直接声明 Hero Extraction。

✓ 质量门：确认已提取全部 8 个信号、已写出 Hero Extraction 摘要、已知模式/焦点元素/配色方向。

从以下六种架构中选择一种，不要混合两种，完全确定一种。

架构 A：电影感居中（Cinematic Center）——标题居中，电影感视觉填充背景或漂浮在文字周围，单个居中 CTA。适合深色电影感机构站、沉浸式产品发布、氛围品牌页。
架构 B：非对称分割（Asymmetric Split）——一侧大标题（通常左侧，占 55-65% 宽度），另一侧为辅助内容，两半不对齐同一基线，制造垂直张力。适合大胆机构首页、AI/科技产品发布。
架构 C：全出血主体（Full-Bleed Subject）——全视口照片或 3D 渲染即 Hero，文字直接叠加在图像上。适合运动员/个人品牌、产品摄影、编辑时尚。
架构 D：排版海报（Typographic Poster）——排版即视觉，无 Hero 图像，标题本身以视口级尺度作为图形元素。适合创意工作室作品集、个人品牌宣言。
架构 E：内联图像排版（Inline-Image Typography）——大排版中在词与词之间嵌入小圆角图像，图像作为视觉标点。适合创意机构 Hero、有性格的品牌页。
架构 F：分层深度（Layered Depth，Z 轴构图）——多个视觉元素通过 CSS perspective 和 transform 排列在不同深度，一个元素最靠前，其他对称后退。适合作品集展示、SaaS 产品演示。

⚠ 漂移警告：架构 F 最常见的 AI 失败模式是随机散布 8-10 张卡片。布局必须有清晰的焦点卡片（前中、全不透明、最大），配 2-4 张对称后退的辅助卡片。

✓ 质量门：确认从 A-F 中只选了一种、选择与阶段 1 的 Hero Extraction 匹配、没有混合两种架构。

Hero 标题不是“大文字”，而是构建整个视口的建筑元素。

字体选择（按氛围选一种）：

⚠ 漂移警告：Inter、Roboto、Open Sans、Poppins、Arial、Helvetica 是正文字体，不是展示字体。用它们做 Hero 标题会产生通用输出。

标题 CSS 蓝图要点：使用 clamp() 实现响应式，负 letter-spacing 在大尺寸下至关重要，line-height 低于 1.0 让升降部略微重叠。

辅助文字层级：Eyebrow（标题上方，0.75rem，大写，等宽或几何无衬线，弱化色）、Subtext（标题下方，clamp(1rem, 1.25vw, 1.25rem)，最多 45ch，不超过 20 词）、CTA 按钮（实心或幽灵胶囊，最多一个 CTA，无次要“了解更多”链接）。

Hero 中最多 3 种色相。深色 Hero 用 #0a0a0a 而非纯黑，浅色 Hero 用暖奶油色而非纯白。

⚠ 漂移警告：Hero 中超过一个饱和强调色必然导致杂乱、失焦。

不要用扁平的 bg-black 或 bg-white，Hero 需要深度。深色模式用径向环境光晕（0.03 不透明度）和噪点颗粒叠加（0.04 不透明度）。浅色模式用微妙的暖色径向渐变。

每个 Hero 必须有入场动画，静态挂载看起来像坏了。使用交错入场（子元素间 0.12s），blur(8px)→blur(0) 增加感知质量，自定义 cubic-bezier 提供物理感减速。

适用于需要构建 Awwwards/FWA 级别首屏区块的设计与开发场景，包括机构网站、产品发布页、个人品牌页、创意工作室作品集等。