Back to Details

hero-generator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Components: Hero Section

组件：Hero Section

Guides hero section design for conversion and first impressions. The hero is where users spend ~80% of initial viewing time; first impressions form in milliseconds.
When invoking: On first use, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
本指南用于指导hero section的设计，以提升转化率并优化第一印象。用户约80%的初始浏览时间会花在hero区域，而对网站的第一印象在几毫秒内就会形成。
调用规则：首次调用时，如果合适，可以先用1-2句话介绍本技能覆盖的内容及其重要性，再提供核心输出。后续调用或者用户要求跳过介绍时，直接给出核心输出即可。

Initial Assessment

初步评估

Check for product marketing context first: If 
.claude/product-marketing-context.md
or 
.cursor/product-marketing-context.md
exists, read it for value proposition, audience, and Section 12 (Visual Identity).
Identify:
  1. Page type: Homepage, landing, product, pricing
  2. Primary goal: Signup, trial, purchase, learn more
  3. Platform: Web, mobile, both
优先确认产品营销上下文：如果存在
.claude/product-marketing-context.md
或
.cursor/product-marketing-context.md
文件，读取其中的价值主张、受众信息以及第12节（视觉识别）内容。
需要明确：
  1. 页面类型：首页、落地页、产品页、定价页
  2. 核心目标：注册、试用、购买、了解更多
  3. 适配平台：Web、移动端、两者兼顾

Core Components (Four Essentials)

核心组件（四大必备要素）

  • Headline (H1): 6–10 words max; instantly communicate core value and benefit. Answer "What's in it for me?" within seconds.
  • Subheading: Clear, concise explanation reinforcing why the product/service is valuable.
  • Primary CTA: Single, prominent action button visible without scrolling. One per hero to avoid choice overload.
  • Visual: High-quality image, video, or animation that amplifies the message.
  • 标题（H1）：最多6-10个单词；即时传递核心价值与收益，几秒内就能回答「这对我有什么好处？」的问题。
  • 副标题：清晰简洁的说明，强化产品/服务的价值。
  • 主要CTA：单个醒目行动按钮，无需滚动即可看到。每个hero区域仅保留一个主要CTA，避免选择过载。
  • 视觉素材：高质量的图片、视频或动画，强化核心信息传递。

Optional but Effective

可选但效果优异的组件

  • Trust cues: 1–3 elements (reviews, logos, statistics)
  • Secondary CTA: For users not ready for primary action
  • 信任标识：1-3个元素（用户评价、合作品牌logo、数据统计）
  • 次要CTA：面向还没准备好采取主要行动的用户

Layout Types

布局类型

Hero is a Spotlight layout—single focus, primary element with secondary around it. Choose layout by content balance and conversion goal.
LayoutStructureBest for
Split (50/50)Text left, visual right (or vice versa); equal weightProduct, SaaS; clear value + demo
Split (75/25)Text dominant; smaller image columnCopy-heavy; trust-first
Split (25/75 "Signpost")Small image beside primary contentMinimal visual; emphasis on headline
CenteredText + CTA centered; visual full-width or stackedBrand, landing; single CTA
Full-width imageImage background; overlay textEmotional; lifestyle, brand
Responsive: Split layouts stack vertically on mobile (text above image); centered maintains center. Mobile-first; ensure CTA above fold on small screens.
Hero属于Spotlight布局——单一焦点，核心元素为主，次要元素围绕排布。根据内容平衡度和转化目标选择布局：
布局类型结构适用场景
分栏（50/50）文字居左，视觉素材居右（或反过来）；权重均等产品、SaaS；清晰展示价值+演示
分栏（75/25）文字占主导，图片列更小大段文案；信任优先的场景
分栏（25/75「路标式」）核心内容旁配小图极简视觉；重点突出标题
居中布局文字+CTA居中；视觉素材全屏或堆叠排布品牌、落地页；单一CTA场景
全屏图片布局图片作为背景，文字叠加展示情感传递类场景；生活方式、品牌宣传
响应式要求：分栏布局在移动端垂直堆叠（文字在图片上方）；居中布局保持居中。优先移动端适配，确保小屏幕下CTA位于首屏范围内。

Alignment

对齐规则

AxisOptionsUse
HorizontalLeft, center, rightLeft align for text-heavy; center for minimal
VerticalTop, center, bottomCenter for full-viewport hero; top for short hero
对齐轴可选方式适用场景
水平对齐左对齐、居中、右对齐大段文字用左对齐；极简内容用居中
垂直对齐顶部对齐、居中、底部对齐全屏视口hero用居中；短hero用顶部对齐

Best Practices

最佳实践

3-Second Rule

3秒规则

The hero must answer three questions within 3 seconds: What is this? Why should I care? What should I do next? ~80% of users never scroll beyond the hero; make an immediate impact.
Hero区域必须在3秒内回答三个问题：这是什么？ 我为什么要关注？ 接下来我该做什么？ 约80%的用户不会滚动到hero区域以下的内容，所以要立刻传递冲击力。

Messaging

文案规则

  • No guessing required; message must be instantly clear.
  • Single primary CTA to avoid choice overload.
  • Action-oriented, benefit-focused copy.
  • Emotional intent first: Evoke emotion (trust, excitement, confidence) before users read the headline. Avoid generic phrases ("Welcome to Our Website") or overly clever wordplay.
  • 不需要用户猜测，信息必须即时清晰易懂。
  • 仅保留一个主要CTA，避免选择过载。
  • 文案以行动为导向，聚焦收益。
  • 优先传递情绪价值：在用户阅读标题前就唤起情绪（信任、兴奋、信心）。避免使用通用短语（比如「欢迎来到我们的网站」）或者过于晦涩的双关语。

Visuals

视觉素材规则

  • Fast-loading; avoid heavy assets that delay LCP
  • Brand-aligned; use typography and colors from brand-visual-generator
  • Support the message; don't distract
  • Frontend aesthetics: For motion (staggered reveals, hover), spatial composition, and backgrounds—see brand-visual-generator Frontend Aesthetics
  • 加载速度快；避免使用过重的资源拖慢LCP
  • 符合品牌调性；使用brand-visual-generator生成的排版和配色
  • 支撑核心信息，不要造成干扰
  • 前端美学：动效（交错显示、悬停效果）、空间布局、背景相关规范参考brand-visual-generator的前端美学部分

Technical

技术规则

  • Mobile-first design
  • Lightweight for quick loading
  • Ensure LCP (Largest Contentful Paint) optimization
  • 移动端优先设计
  • 轻量实现，保障快速加载
  • 确保LCP（Largest Contentful Paint，最大内容绘制）优化

SEO Considerations

SEO注意事项

  • Headline often contains 
    <h1>
    ; include primary keyword
  • Hero content in initial HTML; avoid JS-only rendering
  • Image optimization: Alt text, format (WebP), LCP, responsive—see image-optimization
  • 标题通常是
    <h1>
    标签；包含核心关键词
  • Hero内容要包含在初始HTML中；避免仅通过JS渲染
  • 图片优化：Alt文本、格式（WebP）、LCP、响应式——参考image-optimization

UX Guidelines

UX指南

Hierarchy

层级规则

  • Headline > Subheading > CTA
  • Visual should complement, not compete with, text
  • 标题 > 副标题 > CTA
  • 视觉素材应该辅助文字传递信息，而不是和文字抢注意力

Accessibility

无障碍规则

RequirementPractice
ContrastText over images: >=4.5:1; use overlay if needed
Touch targetsCTA >=44x44px
KeyboardCTA keyboard-accessible; visible focus indicator
Screen readersProper heading order; image alt text; 
aria-label
for icon-only buttons
Reduced motionRespect 
prefers-reduced-motion
for animations
InteractionCTA has 
cursor-pointer
; hover uses color/opacity (not scale) to avoid layout shift
要求实践规范
对比度图片上的文字对比度≥4.5:1；必要时使用叠加层
触控区域CTA尺寸≥44x44px
键盘操作CTA支持键盘访问；有可见的焦点指示器
屏幕阅读器适配正确的标题层级；图片Alt文本；仅图标按钮添加
aria-label
减少动效动画效果遵守
prefers-reduced-motion
设置
交互规则CTA设置
cursor-pointer
；悬停效果使用颜色/透明度变化（不要用缩放）避免布局偏移

Testing

测试建议

  • A/B test headline, CTA copy, and visuals
  • Measure bounce rate, conversion rate, time to first interaction
  • 对标题、CTA文案、视觉素材做A/B测试
  • 统计跳出率、转化率、首次交互时长

Output Format

输出格式

  • Hero structure (headline, subheading, CTA, visual)
  • Copy suggestions
  • Technical checklist (LCP, accessibility, image optimization)
  • Testing recommendations
  • Hero结构（标题、副标题、CTA、视觉素材）
  • 文案建议
  • 技术检查清单（LCP、无障碍、图片优化）
  • 测试建议

Related Skills

相关技能

  • card: Hero vs card—hero is single above-fold; cards are repeated units in grid
  • grid: Hero is one section; content below often uses grid (products, features)
  • cta-generator: Hero typically contains primary CTA
  • trust-badges-generator: Trust cues in hero
  • logo-generator: Logo appears in hero context
  • brand-visual-generator: Typography, colors, spacing for hero design
  • homepage-generator: Hero is central to homepage design
  • landing-page-generator: Hero is step 1 of landing page flow; campaign pages
  • image-optimization: Hero image optimization (alt, WebP, LCP, responsive)
  • card：Hero和卡片的区别——hero是单一首屏元素；卡片是网格中的重复单元
  • grid：Hero是一个独立区块，下方内容通常使用网格布局（产品、功能）
  • cta-generator：Hero通常包含主要CTA
  • trust-badges-generator：Hero中的信任标识
  • logo-generator：Hero场景中会出现logo
  • brand-visual-generator：Hero设计用到的排版、配色、间距
  • homepage-generator：Hero是首页设计的核心部分
  • landing-page-generator：Hero是落地页流程的第一步；活动页适用
  • image-optimization：Hero图片优化（Alt、WebP、LCP、响应式）