mcpField
H
hero-section

hero-section

github.com/arnavpuri设计与 UI17111 次安装4 周前更新
代码仓库

关于 hero-section

用于构建响应式网站首屏区域的设计技能，面向前端开发者和设计类 Agent，提供布局模式，以及品牌令牌、无障碍、性能和截图验证指引。

主要功能

  1. 01居中、分栏、视频和极简布局
  2. 02通过 CSS 变量应用设计令牌
  3. 03响应式布局指引
  4. 04无障碍与减少动态效果检查
  5. 05优化首屏图片加载和 LCP
  6. 06验证移动端与桌面端渲染

适用场景

  1. 01创建落地页首屏区域
  2. 02让首屏适配现有品牌样式
  3. 03提升首屏图片加载性能
  4. 04检查响应式布局和交互焦点

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/arnavpuri/designskills --skill hero-section

安装后在 Claude Code 中输入/hero-section确认已加载。

详细介绍

英雄区设计

开始之前：加载设计上下文

  1. 阅读 .agents/design-context.md（由 design-context 技能编写）。如果该文件不存在，请在 tailwind.config.* 或 :root CSS 变量中查找设计令牌。如果都没有，请使用默认值（主色 #2563EB、辅助色 #7C3AED、强调色 #F59E0B、Tailwind 灰色中性色、标题和正文使用 Inter、简约风格），并告知用户使用了默认值 — 建议运行 design-context。
  2. 将设计令牌映射到 CSS 变量一次，之后只使用这些变量：--color-primary、--color-primary-light、--color-primary-dark、--color-secondary、--color-accent、--color-neutral-50…--color-neutral-900、--color-success/-warning/-error、--font-heading、--font-body、--font-mono、--radius，以及以 4px 为基准的间距刻度。
  3. **Tailwind：**将相同的变量公开为 primary、primary-light、primary-dark、secondary、accent、neutral-*、font-heading、font-body（v3 使用 theme.extend，v4 使用 @theme）。以下示例中的 indigo-* / gray-* 类名是这些设计令牌的占位符。
  4. **Figma：**如果用户提供了 Figma URL，请使用 Figma MCP（get_design_context、get_screenshot）获取设计并按其实现；对于该设计，Figma 会覆盖上下文文件。
  5. 询问或推断产品和主要 CTA。由风格类型决定设计模式：简约/企业风 → 居中或左右分栏；大胆/活泼 → 渐变背景；奢华 → 深色表面上的简约排版。

1. 标题层级

每个英雄区都遵循以下从上到下的结构：

[Optional: Badge / Announcement]
[Headline: Value Proposition]
[Subheadline: Supporting Detail]
[CTA Button(s)]
[Trust Signals]
[Visual: Image, Mockup, or Illustration]
标题规则
  • 一个句子。最多 10 个词。
  • 陈述收益，而非功能。“更快交付” > “CI/CD 流水线工具”。
  • 使用 text-4xl sm:text-5xl lg:text-6xl 尺度。
  • 使用 font-extrabold tracking-tight leading-[1.1]，增强视觉冲击力。
副标题规则
  • 用 1–2 个句子扩展标题内容。
  • 使用 text-lg sm:text-xl text-gray-600 max-w-2xl。
  • 回答：“这是什么？我为什么要在意？”

2. 英雄区模式：渐变背景居中布局

适用性最广的英雄区。适用于 SaaS、工具和平台。

<section class="relative isolate overflow-hidden bg-white">
  
  <div class="absolute inset-0 -z-10">
    <div class="absolute inset-0 bg-gradient-to-b from-indigo-50/80 via-white to-white"></div>
    <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/4
      w-[800px] h-[600px] rounded-full
      bg-gradient-to-br from-indigo-200/40 via-purple-200/30 to-pink-100/20
      blur-3xl"></div>
  </div>

  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-24 pb-16 sm:pt-32 sm:pb-24
    text-center">
    
    <a href="#" class="inline-flex items-center gap-2 rounded-full bg-indigo-50 px-4 py-1.5
      text-sm font-medium text-indigo-700 ring-1 ring-inset ring-indigo-600/10
      hover:bg-indigo-100 transition-colors mb-8">
      <span class="h-1.5 w-1.5 rounded-full bg-indigo-600 motion-safe:animate-pulse" aria-hidden="true"></span>
      Announcing our Series A
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M9 5l7 7-7 7"/>
      </svg>
    </a>

    
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight
      text-gray-950 max-w-4xl mx-auto leading-[1.1]">
      Build products that
      <span class="bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text
        text-transparent">users love</span>
    </h1>

    
    <p class="mt-6 text-lg sm:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
      The design-to-code platform that turns your ideas into production-ready
      interfaces in minutes, not weeks.
    </p>

    
    <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
      <a href="#" class="w-full sm:w-auto inline-flex items-center justify-center
        bg-indigo-600 text-white px-8 py-3.5 rounded-xl font-semibold text-lg
        hover:bg-indigo-500 shadow-lg shadow-indigo-600/25
        hover:shadow-xl hover:shadow-indigo-600/30
        hover:-translate-y-0.5 active:translate-y-0
        transition-all duration-200">
        Start building free
      </a>
      <a href="#" class="w-full sm:w-auto inline-flex items-center justify-center gap-2
        text-gray-700 px-8 py-3.5 rounded-xl font-semibold text-lg
        hover:bg-gray-100 transition-colors">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path d="M6.3 2.84A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.27l9.344-5.891a1.5 1.5 0 000-2.538L6.3 2.841z"/>
        </svg>
        Watch demo
      </a>
    </div>

    
    <div class="mt-10 flex flex-wrap items-center justify-center gap-x-6 gap-y-2
      text-sm text-gray-500">
      <span class="flex items-center gap-1.5">
        <svg class="w-4 h-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/>
        </svg>
        No credit card required
      </span>
      <span class="flex items-center gap-1.5">
        <svg class="w-4 h-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/>
        </svg>
        Free for individuals
      </span>
      <span class="flex items-center gap-1.5">
        <svg class="w-4 h-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/>
        </svg>
        Setup in 2 minutes
      </span>
    </div>

    
    <div class="mt-16 relative">
      <div class="rounded-2xl border border-gray-200/60 shadow-2xl shadow-gray-900/10
        overflow-hidden bg-white">
        <img src="/dashboard-preview.webp" alt="Product dashboard showing weekly revenue"
          width="1280" height="800" class="w-full h-auto" fetchpriority="high" />
      </div>
      
      <div class="absolute -inset-4 -z-10 bg-gradient-to-b from-indigo-100/50
        to-transparent rounded-3xl blur-2xl"></div>
    </div>
  </div>
</section>

3. 英雄区模式：左右分栏（左侧文字，右侧图片）

最适合具有鲜明视觉元素的产品（应用截图、模型图）。

<section class="relative overflow-hidden bg-white">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20 lg:py-32">
    <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
      
      <div class="max-w-xl">
        <div class="inline-flex items-center gap-2 rounded-full bg-emerald-50 px-3 py-1
          text-sm font-medium text-emerald-700 ring-1 ring-emerald-600/10 mb-6">
          New: AI assistant is here
        </div>
        <h1 class="text-4xl lg:text-5xl xl:text-6xl font-extrabold tracking-tight
          text-gray-950 leading-[1.1]">
          Your finances, finally simple
        </h1>
        <p class="mt-6 text-lg text-gray-600 leading-relaxed">
          Track spending, set budgets, and reach your goals with an app that
          actually makes sense. No jargon, no complexity.
        </p>
        <div class="mt-8 flex flex-wrap gap-4">
          <a href="#" class="bg-gray-950 text-white px-6 py-3 rounded-xl font-semibold
            hover:bg-gray-800 transition-colors">
            Download the app
          </a>
          <a href="#" class="text-gray-700 px-6 py-3 rounded-xl font-semibold
            hover:bg-gray-100 transition-colors flex items-center gap-2">
            See how it works
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M17 8l4 4m0 0l-4 4m4-4H3"/>
            </svg>
          </a>
        </div>
        
        <div class="mt-8 flex items-center gap-4">
          <div class="flex -space-x-2">
            <img src="/avatar-1.jpg" class="w-8 h-8 rounded-full ring-2 ring-white" alt="" />
            <img src="/avatar-2.jpg" class="w-8 h-8 rounded-full ring-2 ring-white" alt="" />
            <img src="/avatar-3.jpg" class="w-8 h-8 rounded-full ring-2 ring-white" alt="" />
            <img src="/avatar-4.jpg" class="w-8 h-8 rounded-full ring-2 ring-white" alt="" />
          </div>
          <div class="text-sm text-gray-600">
            <span class="font-semibold text-gray-900">4,000+</span> happy users
          </div>
        </div>
      </div>

      
      <div class="relative lg:ml-auto">
        <div class="relative z-10">
          <img src="/app-mockup.webp" alt="App home screen with monthly budget overview"
            width="448" height="896"
            class="w-full h-auto max-w-md mx-auto rounded-3xl shadow-2xl"
            fetchpriority="high" />
        </div>
        
        <div class="absolute -inset-8 bg-gradient-to-tr from-indigo-100 via-purple-50
          to-pink-50 rounded-[2rem] -z-10 blur-sm"></div>
      </div>
    </div>
  </div>
</section>

4. 英雄区模式：视频 / 动画背景


<section class="relative h-svh min-h-[600px] max-h-[900px] flex items-center overflow-hidden">
  
  <video
    autoplay muted loop playsinline aria-hidden="true"
    poster="/hero-poster.jpg"
    class="absolute inset-0 w-full h-full object-cover"
  >
    <source src="/hero-bg.webm" type="video/webm" />
    <source src="/hero-bg.mp4" type="video/mp4" />
  </video>

  
  <div class="absolute inset-0 bg-gray-950/60"></div>

  
  <div class="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
    <h1 class="text-4xl sm:text-5xl lg:text-7xl font-extrabold tracking-tight
      text-white leading-[1.1]">
      Experience the future
    </h1>
    <p class="mt-6 text-lg sm:text-xl text-white/80 max-w-2xl mx-auto">
      Immersive technology that transforms how you create.
    </p>
    <div class="mt-10">
      <a href="#" class="inline-flex items-center bg-white text-gray-950 px-8 py-4
        rounded-xl font-semibold text-lg hover:bg-gray-100 transition-colors">
        Get early access
      </a>
    </div>
  </div>

  
  <button type="button" class="absolute bottom-6 right-6 z-10 rounded-full bg-black/50
    px-4 py-2 text-sm text-white focus-visible:outline focus-visible:outline-2
    focus-visible:outline-white">Pause background video</button>
  

  
  <div class="absolute bottom-8 left-1/2 -translate-x-1/2 motion-safe:animate-bounce" aria-hidden="true">
    <svg class="w-6 h-6 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
    </svg>
  </div>
</section>
视频英雄区规则
  • 视频时长保持在 5–15 秒，并循环播放。
  • 文件大小控制在 5MB 以下。使用 WebM + MP4，以确保兼容性。
  • 始终提供 poster 图片 — 它是 LCP 候选元素，因此应使用 fetchpriority="high" 预加载。
  • 在 iOS 上使用 playsinline。
  • 提供暂停按钮；在 prefers-reduced-motion: reduce 条件下不要自动播放 — 仅显示海报图（当 matchMedia('(prefers-reduced-motion: reduce)').matches 时调用 video.pause()）。
  • 确保文字与叠加层之间有足够的对比度。

5. 英雄区模式：简约排版

适用于高端品牌、代理机构和作品集。

<section class="min-h-svh flex items-center bg-gray-950">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-32">
    <h1 class="text-5xl sm:text-7xl lg:text-9xl font-extrabold text-white
      tracking-tighter leading-[0.9]">
      We design<br />
      <span class="text-gray-500">digital</span><br />
      experiences
    </h1>
    <div class="mt-12 flex items-center gap-6">
      <a href="#" class="text-white border border-white/20 px-6 py-3 rounded-full
        hover:bg-white hover:text-gray-950 transition-all font-medium">
        View our work
      </a>
      <a href="#" class="text-gray-400 hover:text-white transition-colors font-medium">
        Contact us
      </a>
    </div>
  </div>
</section>

6. 背景技巧

网格渐变
.mesh-gradient {
  background-color: oklch(97% 0.01 265);
  background-image:
    radial-gradient(at 20% 20%, oklch(90% 0.12 280 / 0.4) 0px, transparent 50%),
    radial-gradient(at 80% 10%, oklch(90% 0.10 320 / 0.3) 0px, transparent 50%),
    radial-gradient(at 50% 80%, oklch(90% 0.12 200 / 0.3) 0px, transparent 50%);
}
动态渐变
.animated-gradient {
  /* Build the stops from brand tokens, not arbitrary colors */
  background: linear-gradient(-45deg, var(--color-primary), var(--color-secondary), var(--color-accent), var(--color-primary-light));
  background-size: 400% 400%;
}
@media (prefers-reduced-motion: no-preference) {
  .animated-gradient { animation: gradient-shift 15s ease infinite; }
}
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
点阵网格图案
.dot-grid {
  background-image: radial-gradient(circle, #d1d5db 1px, transparent 1px);
  background-size: 24px 24px;
}
噪点纹理
.noise {
  position: relative;
}
.noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
}

7. 响应式英雄区策略

断点调整
Mobile (< 640px):
  - h1: text-3xl to text-4xl
  - Stack CTAs vertically (flex-col)
  - Hide decorative elements
  - Full-width buttons
  - Product image below text

Tablet (640–1024px):
  - h1: text-4xl to text-5xl
  - Horizontal CTAs (flex-row)
  - Product image scales down

Desktop (1024px+):
  - h1: text-5xl to text-6xl
  - Split layout becomes side-by-side
  - Full decorative elements visible
图片处理
<picture>
  <source media="(min-width: 1024px)" srcset="/hero-desktop.webp" />
  <source media="(min-width: 640px)" srcset="/hero-tablet.webp" />
  <img src="/hero-mobile.webp" alt="Product preview" width="640" height="480"
    class="w-full h-auto rounded-2xl" fetchpriority="high" />
</picture>

8. LCP 性能

英雄区通常是最大内容绘制元素。请对其进行优化。

规则
  1. 在英雄区 <img> 上使用 fetchpriority="high"，并设置 width/height（防止 CLS）。
  2. 绝不要延迟加载英雄区图片（loading="lazy" 会延迟 LCP）。
  3. 只预加载延迟发现的图片 — CSS 背景、JS 渲染的英雄区、视频海报图、<picture> 艺术指导图片。HTML 中已有的 <img> 不需要预加载。
  4. 为英雄区内联关键 CSS。不要让标题从 opacity: 0 开始动画显示 — 这会延迟 LCP。
  5. 使用 WebP/AVIF 格式，并提供回退方案。
  6. 选择合适的尺寸：不要为 1200px 容器提供 4000px 图片；请使用 srcset/sizes。
<head>
  <link rel="preload" href="/hero.webp" as="image" fetchpriority="high"
    imagesrcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1200.webp 1200w"
    imagesizes="100vw" />
</head>

验证：渲染并检查

不要交付未经检查的代码。生成后：

  1. 在移动端和桌面端宽度下截图，例如运行 npx playwright screenshot --full-page --viewport-size=390,844 file://$PWD/index.html mobile.png，然后再使用 --viewport-size=1440,900 截图（或访问开发服务器 URL）。
  2. 打开两张图片并检查：没有水平滚动，文字没有被裁切或重叠，层级一目了然，品牌设计令牌已应用，图片以正确的宽高比加载。
  3. 用 Tab 键遍历一次：每个交互元素都有可见的焦点环，焦点顺序符合逻辑。
  4. 检查 390px 截图中首屏是否显示标题和主要 CTA，并确认 LCP 图片没有延迟加载（如果服务器正在运行，可通过 Lighthouse 的“LCP element”审计检查）。
  5. 修复发现的问题，并在报告完成前重新截图。

主视觉区检查清单

  • 标题少于 10 个词，并说明带来的益处
  • 副标题用 1–2 句话进一步阐述价值
  • 主要 CTA 足够醒目、对比度高且以行动为导向
  • 次要 CTA 的视觉层级较低
  • CTA 附近展示信任标识
  • 主视觉图片设置了 fetchpriority="high" 和 width/height，且没有 loading="lazy"
  • 装饰性 SVG 设置了 aria-hidden；图片或视频上的文字对比度达到 4.5:1
  • 已在 390px 和 1440px 宽度下渲染并截图（见“验证”）
  • 响应式布局：文字大小会调整，布局会适配，图片会切换
  • 背景增添视觉趣味，但不会喧宾夺主
  • 动画遵循 prefers-reduced-motion；背景视频带有暂停控件
  • 首屏加载时间低于 2.5 秒（LCP 目标）

评论

支持 Markdown