Hero Section Design 是一个聚焦网站首屏（hero section）设计的技能。首屏是访客进入网站后首先看到的区域，资料强调你有 2-4 秒来传达你是谁、你做什么、访客为何应留下，首屏内每个像素都是转化决策。
用途：用于规划和评估网站首屏的布局、导航栏、标题排版与行动号召（CTA）策略，并通过失败模式与质量门禁检查首屏效果。
主要能力：
- 布局模式决策树：按主要目标选择全出血视觉首屏、分栏首屏（文案左、视觉右）、居中首屏加下方功能网格、编辑式/非对称首屏；并按是否有强产品视觉、目标受众（开发者/企业/消费者/创意）、内容复杂度进一步分支。
- CTA 策略决策树：按商业模式（免费增值/试用、销售主导、直接购买、线索获取）与用户意图高低选择主次 CTA 组合。
- 失败模式诊断：包括轮播混乱（自动轮换导致高跳出）、CTA 位于折叠线以下、价值主张不清、视觉层次差、性能瓶颈（LCP 超过 3 秒、首屏资源阻塞渲染路径），并给出对应修复方向。
- 完整示例：以面向开发者团队的代码审查工具为例，演示布局决策、文案策略、视觉处理与移动端适配（文案在上、视觉在下，标题从 3rem 缩至 2.25rem，按钮纵向堆叠并留 1rem 间距）。
- 质量门禁：如 375px 移动宽度下主 CTA 无需滚动可见、标题不超过 10 词传达价值、LCP ≤2.5 秒、文字对比度 ≥4.5:1、无横向滚动、存在社会证明元素、单一清晰信息、CTR ≥2%（一周后测量）、尊重 prefers-reduced-motion、首屏图片采用 eager/high 加载优先级。
使用方式：资料以决策树、失败模式、示例与检查清单的形式呈现，可按步骤先定布局与文案，再做视觉与移动端适配，最后逐项核对质量门禁。具体安装或调用方式暂未提供。
适用场景：SaaS 产品首屏、面向开发者或企业受众的落地页首屏、需要评估 CTA 与折叠线可见性的移动端首屏设计。
限制与边界：不用于整站架构、SEO 内容策略、博客文章布局、电商产品页、多步骤引导流程、品牌标识/Logo 设计；这些应分别交由 web-design-expert、seo-visibility-expert、ecommerce-conversion-expert、user-experience-expert、brand-design-expert 处理。当客户需要整站改版、重点是搜索排名优化或首屏属于复杂用户旅程时，应转交对应技能。