高转化首屏设计

用户打开网页后，目光在前几毫秒就决定了要不要继续往下看。Hero 区域承担了绝大部分初始注意力，却常因为文案堆砌、视觉抢戏或布局失衡而直接劝退访客。

核心能力与工作机制

这个技能围绕转化目标拆解首屏设计，而不是只给一张好看的截图。它会先判断页面类型（首页、落地页、产品页或定价页）、主要转化目标（注册、试用、购买或了解更多）以及目标平台（Web、移动端或两者）。

四要素设计

它强制关注四个基本组件：

• 主标题（H1）：控制在 6–10 个词以内，让用户秒懂核心价值，直接回答"我能获得什么"。
• 副标题：用一两句清晰解释产品价值，而不是重复主标题。
• 主 CTA：只保留一个醒目的行动按钮，避免让用户陷入选择过载。
• 视觉元素：用高质量图片、视频或动画强化信息，而不是分散注意力。

布局与响应式

技能提供五种 Spotlight 布局模板：

• Split（50/50）：适合产品展示和 SaaS 工具。
• Split（75/25）：文案主导型页面。
• Signpost（25/75）：极简视觉，突出标题。
• Centered：品牌落地页，单一 CTA。
• Full-width image：情绪和生活方式场景。

所有布局都遵循移动优先原则，Split 在小屏幕上自动堆叠为垂直结构，保证 CTA 始终在首屏可见。

三秒规则与文案策略

首屏必须在 3 秒内回答三个问题：这是什么？我为什么要关心？下一步该做什么？文案要优先唤起情绪，再引出具体说明。避免"欢迎来到我们的网站"这类泛泛表述，也不要过度卖弄文字游戏。

技术要求与优化

• 视觉素材需快速加载，避免拖慢 LCP。
• 字体、颜色和间距要与品牌视觉系统保持一致。
• Hero 内容要直接写入 HTML，而不是依赖 JavaScript 渲染。
• 图片需添加 alt 文本，并使用 WebP 格式。

无障碍设计

• 文字对比度不低于 4.5:1。
• CTA 按钮的触控区域不小于 44×44 像素。
• 支持键盘操作和屏幕阅读器。
• 尊重用户的 prefers-reduced-motion 设置。

适用边界

该技能只提供设计指南和输出清单，不自动安装依赖或修改系统权限。它不负责生成实际的视觉素材，而是告诉你该放什么、怎么放、为什么这么放。涉及发布、部署或付款等外部操作时，会先向你展示影响并等待确认。