用途：为网站的“首屏 Hero 区域”提供可直接落地的设计模式与代码，适用于 SaaS、工具、平台、品牌、机构和作品集等各类落地页。主要能力包括四类首屏样式：居中加渐变背景、文本左图右的分栏式、视频或动态背景式、以及针对高端品牌的极简排版式；同时给出背景技法（网格渐变、动态渐变、点阵网格、噪点纹理）、响应式断点策略、图片处理以及 LCP 性能优化规则。
使用方式：先加载设计上下文，读取 .agents/design-context.md，若缺失则从 tailwind.config.* 或 :root 中查找设计令牌，都没有时使用默认值（Primary #2563EB、Secondary #7C3AED、Accent #F59E0B、Tailwind 灰色中性色、标题与正文使用 Inter、极简风格），并告知用户已使用默认值、建议运行 design-context。将令牌映射为 CSS 变量后统一使用，如 --color-primary、--color-primary-light、--color-primary-dark、--color-secondary、--color-accent、--color-neutral-50…900、--color-success/-warning/-error、--font-heading、--font-body、--font-mono、--radius 及 4px 基数间距。Tailwind 中通过 v3 theme.extend 或 v4 @theme 暴露同名变量；示例中的 indigo-* / gray-* 类可视为这些令牌的占位。若用户提供 Figma URL，可用 Figma MCP 的 get_design_context、get_screenshot 拉取并匹配，该设计将覆盖上下文文件。
首屏结构自上而下为：可选徽章/公告、价值主张标题、副标题、CTA 按钮、信任信号、视觉元素。标题一句话、最多 10 个词，讲收益而非功能，使用 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，回答“这是什么、为何在意”。
限制与注意事项：视频背景建议 5–15 秒循环、文件小于 5MB、提供 WebM 与 MP4、必须有海报图并设 fetchpriority="high"、加 playsinline，提供暂停按钮；在 prefers-reduced-motion: reduce 下不自动播放、仅显示海报。首屏图片应设 fetchpriority="high" 与宽高（防 CLS），绝不使用 loading="lazy"；只对 CSS 背景、JS 渲染首屏、视频海报和 picture 艺术指导等晚发现图片做 preload；内联首屏关键 CSS，避免标题从 opacity: 0 动画进入；使用 WebP/AVIF 并提供回退，按容器尺寸提供 srcset/sizes。移动端标题 text-3xl 到 text-4xl、CTA 纵向堆叠、隐藏装饰、按钮全宽、产品图置文本下方；平板 640–1024px 标题 text-4xl 到 text-5xl、CTA 横排；桌面 1024px+ 标题 text-5xl 到 text-6xl、分栏并排、装饰完整显示。视频背景高度使用 h-svh 而非 h-screen/100vh。未在资料中说明的价格、平台或效果暂未提供。