首屏聚焦Hero-Centric Design
整屏交给一个主张：超大标题 + 主视觉 + 唯一 CTA，其余内容下沉。转化路径最短，但对文案与视觉质量要求极高。数据标注为已弃用，建议改用 Storytelling 或 Feature-Rich。
典型场景品牌落地页 · 产品发布（已弃用）
效果示例
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
整屏交给一个主张：超大标题 + 主视觉 + 唯一 CTA，其余内容下沉。转化路径最短，但对文案与视觉质量要求极高。数据标注为已弃用，建议改用 Storytelling 或 Feature-Rich。
关键词
效果与动效
Smooth scroll reveal, fade-in animations on hero, subtle background parallax, CTA glow/pulse effect
设计系统变量
--hero-min-height100vh--headline-sizeclamp(2rem, 5vw, 4rem)--cta-padding1rem 2rem--overlay-opacity0.5--text-shadow0 2px 4px rgba(0,0,0,0.3)配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Brand primary color, white/light backgrounds for contrast, accent color for CTA
辅色 / Secondary
Supporting colors for secondary CTAs, accent highlights, trust elements (testimonials, logos)
强调色在页面底色上的对比度约 5.2:1，可用于正文与图标。
适用场景
适合 / Best For
- SaaS landing pages
- product launches
- service landing pages
- B2B platforms
- tech companies
避开 / Do Not Use For
- Complex navigation
- multi-page experiences
- data-heavy applications
框架兼容
能力矩阵
实现要点
落地清单
- Hero section full viewport height,
- Headline visible above fold,
- CTA button high contrast,
- Background image optimized (WebP),
- Text readable on background,
- Mobile responsive layout
CSS / 技术关键词
min-height: 100vh, display: flex, align-items: center, background: linear-gradient or image, text-shadow for readability, max-width: 800px for text, button with hover scale (1.05)
legacy 或 deprecated 时才会召回。AI 提示词
Design a hero-centric landing page. Use: full-width hero section, compelling headline (60-80 chars), high-contrast CTA button, product screenshot or video, value proposition above fold, gradient or image background, clear visual hierarchy.