全屏英雄区布局
Fullscreen Hero
以全屏大图或视频为背景的英雄区布局，通过震撼的视觉效果抓住注意力，适合品牌展示、产品发布、活动宣传。
全屏英雄区大图视频品牌震撼
配色方案
Primary
#ffffff
Secondary
#000000
Accent 1
#ff6b6b
Accent 2
#4ecdc4
Accent 3
#ffe66d
Accent 4
#6c5ce7
Quick Start
3 步开始使用 AI 生成
1
复制 AI Rules
2
粘贴到你的 AI 工具
• Cursor → 粘贴到 .cursorrules 文件
• Claude Code → 粘贴到 CLAUDE.md 文件
• Trae → 粘贴到 trae-rules.md 文件
3
开始生成
尝试："用 全屏英雄区布局 风格生成一个着陆页"
设计哲学
Fullscreen Hero（全屏英雄区布局）是一种以视觉冲击力为核心的布局方式，用全屏图片或视频创造沉浸式第一印象。
核心理念： - 第一印象：用震撼视觉立即抓住访客 - 品牌表达：通过图像传达品牌调性 - 聚焦核心：突出最重要的信息和行动 - 情感连接：通过视觉建立情感共鸣
必须做 / Do's
- +使用 h-screen 或 min-h-screen 确保全屏
- +图片使用 object-cover 保持比例填充
- +添加渐变或半透明遮罩保证文字可读
- +内容绝对定位或 flex 居中
- +提供滚动提示引导用户往下看
- +视频背景静音自动播放
- +提供降级方案（图片替代视频）
禁止做 / Don'ts
- -禁止文字直接放在复杂背景上无遮罩
- -禁止使用低质量或拉伸的图片
- -禁止忽略移动端的适配
- -禁止内容占据全部空间无留白
- -禁止视频有声音自动播放
组件模板
组件预览
英雄区按钮
全屏英雄区中的 CTA 按钮
tsx
<div className="flex flex-col sm:flex-row gap-4">
<button className="
px-8 py-4
bg-white text-black
font-semibold text-lg
rounded-full
hover:bg-white/90
transition-colors
">
Get Started
</button>
<button className="
px-8 py-4
bg-transparent text-white
font-semibold text-lg
rounded-full
border-2 border-white
hover:bg-white/10
transition-colors
">
Learn More
</button>
</div>全局样式
Global CSS
css
/* Fullscreen Hero Global Styles */
/* Base hero container */
.hero-fullscreen {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Background image/video */
.hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Video background */
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Overlay variations */
.hero-overlay {
position: absolute;
inset: 0;
}
.hero-overlay-dark {
background: rgba(0, 0, 0, 0.5);
}
.hero-overlay-gradient {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.3) 0%,
transparent 50%,
rgba(0, 0, 0, 0.7) 100%
);
}
.hero-overlay-color {
background: rgba(99, 102, 241, 0.7);
mix-blend-mode: multiply;
}
/* Content container */
.hero-content {
position: relative;
z-index: 10;
text-align: center;
padding: 1rem;
max-width: 64rem;
}
/* Scroll indicator animation */
@keyframes hero-bounce {
0%, 100% {
transform: translateY(0) translateX(-50%);
}
50% {
transform: translateY(10px) translateX(-50%);
}
}
.hero-scroll-indicator {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
animation: hero-bounce 2s infinite;
}
/* Parallax effect */
.hero-parallax {
transform: translateZ(0);
will-change: transform;
}
/* Ken Burns effect for images */
@keyframes kenburns {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
.hero-kenburns .hero-bg {
animation: kenburns 20s ease-out forwards;
}快速开始
示例 Prompts
复制这些经过验证的 Prompt，快速开始用 AI 生成 全屏英雄区布局 风格的界面。
产品发布页
新产品发布的震撼首屏
Create a product launch fullscreen hero: 1. Full viewport height with product image background 2. Dark gradient overlay for text contrast 3. Badge: "Announcing [Product Name]" 4. Large headline with gradient text highlight 5. Subheadline describing key benefit 6. Two CTAs: "Pre-order Now" and "Learn More" 7. Scroll indicator at bottom 8. Transparent navbar at top Modern, tech-forward aesthetic
品牌故事
品牌展示的全屏视觉
Create a brand story fullscreen hero: 1. Video background (lifestyle footage) with muted autoplay 2. Subtle overlay with brand color tint 3. Centered brand logo (large) 4. Brand tagline below logo 5. Single CTA: "Explore Our Story" 6. Social links at bottom corners 7. Sound toggle button (optional) Elegant, premium brand feel
活动宣传
活动或会议的宣传首屏
Create an event promotion fullscreen hero: 1. Event venue/crowd image as background 2. Strong dark overlay for readability 3. Event name in large display font 4. Date and location prominently shown 5. Countdown timer to event 6. CTA: "Register Now" with early bird badge 7. Speaker photos strip at bottom (optional) Energetic, exciting event atmosphere
提示：复制时会自动附带该风格的设计规范
Style Pack
导出风格包
获取完整的可机器读取风格资源，包括 Design Tokens、Tailwind 预设、CSS 变量和 shadcn/ui 主题。
Design Tokens
Figma / Style Dictionary / Tokens Studio 兼容
Tailwind Preset
Tailwind CSS 主题预设，可直接在配置中引用
Global CSS
包含 CSS 变量和基础样式
shadcn Theme
shadcn/ui 主题配置
CSS Variables
纯 CSS 变量，适用于任何项目
SKILL.md
可加载到 Cursor / Claude Code / VS Code 的技能包
导出
AI Rules
将以下规则导出并添加到你的 AI 编码助手中，让它按照 全屏英雄区布局 风格生成代码。
You are a frontend expert specializing in Fullscreen Hero layout. All generated code must strictly follow these constraints:
## Absolute Prohibitions
- Do NOT place text on busy backgrounds without overlay
- Do NOT use low-quality or stretched images
- Do NOT ignore mobile responsiveness
- Do NOT fill entire viewport with no breathing room
- Do NOT autoplay video with sound
## Must Follow
- Container: min-h-screen or h-screen
- Background: object-cover for images
- Overlay: gradient or solid for text readability
- Content: centered with max-width constraint
- Scroll indicator: at bottom of hero
- Navigation: absolute positioned, transparent
## Structure
Layers (bottom to top):
1. Background image/video (absolute, full cover)
2. Overlay (gradient or solid color)
3. Content (relative z-10, centered)
4. Navigation (absolute top)
5. Scroll indicator (absolute bottom)
## Background Options
Image:
- object-fit: cover
- Full viewport coverage
- High quality, relevant imagery
Video:
- Muted, autoplay, loop
- Fallback poster image
- Pause on mobile (optional)
Overlay types:
- Solid: bg-black/50
- Gradient: from-black/80 via-transparent to-black/30
- Color: bg-brand/70 mix-blend-multiply
## Content
- Badge/label (optional)
- Main headline (large, bold)
- Subheadline (medium)
- CTA buttons (prominent)
- Max-width container (4xl recommended)
## Responsive
Mobile:
- Smaller text sizes
- Stacked CTA buttons
- Simpler background (may hide video)
Desktop:
- Full visual impact
- Side-by-side buttons
- All animations enabled
## Self-Check
After generating code, verify:
1. Hero is full viewport height
2. Text is readable on background
3. Overlay provides contrast
4. Scroll indicator visible
5. Mobile layout works