当用户希望设计、优化或审查英雄区（首屏主视觉区域）时使用；当用户提及“hero”“hero section”“h...”等关键词时亦适用。
组件:英雄部分 : guides 英雄部分用于转换和第一印象的设计. 英雄部分是用户花费到初始观看时间的~80%
功能概述
组件:英雄部分 : guides 英雄部分用于转换和第一印象的设计. 英雄部分是用户花费到初始观看时间的~80%是一项面向实际任务的技能，主要用于第一次印象以毫秒的形式形成. 当时间时.。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
核心要点
- 使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。
- 该技能适合需要稳定复用相关能力的场景，可作为自动化工作流的一部分，也便于后续检查、调整和扩展。
- 从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。
使用与执行
实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。
结果检查与注意事项
执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。
组件：首屏区域（Hero Section）
指导首屏区域的设计，以提升转化率并塑造良好的第一印象。用户在页面初始浏览阶段约 80% 的时间都花在首屏；而第一印象的形成仅需毫秒级时间。
调用时规则：首次使用时，若有助益，可先用 1–2 句话简要说明本技能涵盖内容及其重要性，再输出主体内容；后续使用或用户明确要求跳过时，则直接输出主体内容。
初步评估
优先检查项目上下文：若存在 .claude/project-context.md 或 .cursor/project-context.md，请先阅读其中关于价值主张、目标用户及第 12 节（视觉识别体系）的内容。
需识别以下三项：
- 页面类型：首页、落地页、产品页、定价页
- 核心目标：注册、试用、购买、了解更多
- 平台：Web 端、移动端、或两者兼顾
核心组件（四大必备要素）
- 主标题（H1）：最多 6–10 个词；须在数秒内清晰传达核心价值与用户获益，直击“这对我有什么好处？”
- 副标题：简洁明确地进一步解释产品/服务为何具有价值。
- 主操作按钮（Primary CTA）：一个醒目、无需滚动即可可见的行动按钮；首屏仅设一个主 CTA，避免选择过载。
- 视觉元素：高质量图片、视频或动画，用于强化信息传达，而非削弱重点。
可选但高效组件
- 信任提示（Trust cues）：1–3 项（如用户评价、合作品牌 Logo、关键数据统计等）
- 次级操作按钮（Secondary CTA）：面向尚未准备好执行主操作的用户
布局类型
首屏区域采用聚光灯式布局（Spotlight layout）——聚焦单一核心元素，其余为辅助信息。具体布局应依据内容比重与转化目标选择。
| 布局 | 结构 | 适用场景 |
|---|---|---|
| 均分式（50/50） | 文字左 / 视觉右（或反之）；权重均衡 | 产品页、SaaS 类网站；强调清晰价值 + 功能演示 |
| 文字主导式（75/25） | 文字为主；图像区域较小 | 文案密集型页面；强调可信度优先 |
| 标识式（25/75 “Signpost”） | 主内容旁配小尺寸图像 | 极简视觉风格；突出主标题表达 |
| 居中式 | 文字与 CTA 居中；视觉元素全宽或堆叠于其上/下 | 品牌页、落地页；仅需一个 CTA |
| 全宽背景图式 | 图像作为背景；文字叠加其上 | 侧重情感表达；生活方式类、品牌向页面 |
响应式适配：分裂式布局在移动端自动转为垂直堆叠（文字在上、图像在下）；居中式布局保持居中对齐。坚持移动优先原则；确保小屏设备上 CTA 位于首屏可视区域内（above fold）。
对齐方式
| 轴向 | 选项 | 适用场景 |
|---|---|---|
| 水平方向 | 左对齐、居中、右对齐 | 文案密集型页面建议左对齐；极简风格推荐居中 |
| 垂直方向 | 顶部、居中、底部 | 满屏高度首屏推荐垂直居中；短首屏建议顶部对齐 |
最佳实践
三秒法则
首屏必须在 3 秒内回答三个关键问题：这是什么？ 我为什么要在乎？ 接下来我该做什么？ 约 80% 的用户不会向下滚动超出首屏；务必实现即刻冲击力。
文案策略
- 拒绝猜测；信息传达必须一目了然。
- 仅设置一个主 CTA，防止用户陷入选择困境。
- 文案需具备行动导向性，并聚焦用户可感知的实际收益。
- 情感先行：优先唤起情绪（如信任感、兴奋感、信心），再让用户阅读主标题。避免泛泛而谈（如“欢迎访问我们的网站”）或过度玩味的文字游戏。
视觉设计
- 加载迅速；避免体积过大导致最大内容绘制（LCP）延迟。
- 符合品牌调性；字体与配色需沿用 brand-visual-generator 输出规范。
- 服务于信息传达；不喧宾夺主、不干扰阅读。
- 前端视觉美学：涉及动效（错落呈现、悬停反馈）、空间构成与背景处理等内容，请参阅 brand-visual-generator 中的 Frontend Aesthetics 部分。
技术规范
- 采用移动优先（Mobile-first）设计理念
- 轻量化构建，保障快速加载
- 确保最大内容绘制（LCP）性能优化
SEO 注意事项
- 主标题通常对应
标签；应包含核心关键词 - 首屏内容需直接存在于初始 HTML 中，避免依赖 JavaScript 渲染。详见 rendering-strategies
- 图片优化：含 Alt 文本、格式选用（推荐 WebP）、LCP 优化、响应式适配等——详见 image-optimization
UX 设计指南
信息层级
- 主标题 > 副标题 > CTA
- 视觉元素应辅助文本表达，而非与之竞争注意力
无障碍访问（Accessibility）
| 要求 | 实施方式 |
|---|---|
| 对比度 | 图像上的文字对比度 ≥4.5:1；必要时添加半透明遮罩层 |
| 触控目标尺寸 | CTA 尺寸 ≥44×44px |
| 键盘导航支持 | CTA 支持键盘焦点访问；提供清晰可见的焦点指示器 |
| 屏幕阅读器兼容 | 合理使用标题层级；图片配备恰当的 Alt 文本；图标型按钮需添加 aria-label |
| 减少动画偏好 | 尊重系统级 prefers-reduced-motion 设置，禁用非必要动效 |
| 交互反馈 | CTA 添加 cursor-pointer；悬停态仅通过颜色或透明度变化实现，禁用缩放（scale）以防布局偏移 |
测试建议
- A/B 测试主标题文案、CTA 文案与视觉素材
- 监测跳出率、转化率、首次交互耗时等核心指标
输出格式
- 首屏结构（主标题、副标题、CTA、视觉元素）
- 文案建议
- 技术检查清单（LCP 优化、无障碍合规性、图片优化）
- 测试建议
关联技能
- card：首屏 vs 卡片——首屏是唯一且位于首屏可视区上方的独立区块；卡片则是在网格中重复出现的内容单元
- grid：首屏为单一段落；其下方内容（如产品列表、功能模块）常采用网格布局
- cta-generator：首屏通常承载主操作按钮（Primary CTA）
- trust-badges-generator：用于生成首屏中的信任提示元素
- logo-generator：Logo 常出现在首屏上下文中
- brand-visual-generator：提供首屏设计所需的字体、配色与间距规范
- homepage-generator：首屏是首页设计的核心组成部分
- landing-page-generator：首屏是落地页流程的第一步，亦适用于活动推广页
- image-optimization：首屏图片的优化方案（Alt 文本、WebP 格式、LCP 优化、响应式适配）
- rendering-strategies：确保首屏内容直接存在于初始 HTML 中；推荐 SSR/SSG 方式渲染首屏
相关专题
本专题聚焦Go-Zero的API开发，拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则，说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式，并给出网关聚合与接口测试的实践建议。
2026.11.12
0
15
本专题围绕Go-Zero的安装与工具链配置展开，讲清Go版本要求、goctl安装方式、代理镜像、protoc依赖与环境变量设置，说明多版本共存、升级回退与CI流水线安装的做法，并整理安装阶段的常见报错与验证步骤。
2026.11.12
0
15
本专题整理Go-Zero的入门知识，从框架定位、环境准备到跑通第一个API服务，讲清目录分层、配置加载、日志与中间件的基本用法，并对比Gin、Kratos的差异，帮助Go开发者建立整体认知，判断它是否适合当前项目。
2026.11.12
0
15
本专题从实际API接口调试场景出发，讲解Postman身份认证的完整配置流程，包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查，帮助用户正确完成接口授权与访问验证。
2026.11.06
0
12
围绕Postman HTTP请求头配置展开，讲解Headers选项的具体使用方式，包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法，帮助用户解决接口调试过程中遇到的请求头配置问题。
2026.11.06
0
13
详细介绍Postman接口请求的创建与发送方法，涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看，帮助用户掌握Postman接口请求的完整操作流程。
2026.11.06
0
10
DBeaver数据导入专题，整理Excel、CSV、SQL、TXT等常见文件的数据导入方法，涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作，帮助用户将本地文件中的数据写入数据库，并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。
2026.11.05
0
12
DBeaver安全防护专题，围绕数据库连接安全、账号密码保护和访问权限管理展开，整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法，同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项，帮助用户提高数据库日常管理的安全性。
2026.11.05
0
12
本专题聚焦DBeaver数据库连接配置与管理，覆盖从新建连接、选择数据库类型到填写连接参数和验证连接的完整流程。针对MySQL、PostgreSQL、SQL Server等常见数据库，整理相应的连接设置方法，并提供驱动缺失、认证失败和连接异常等问题的排查方向。
2026.11.04
0
16
热门下载
相关下载
精品课程
共6课时 | 54.7万人学习
共89课时 | 134.3万人学习
共49课时 | 82.7万人学习
最新文章