landing-page-design

落地页设计

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

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）获取设计并与之匹配；对于该设计，它优先于上下文文件。
5. 询问或推断：产品是什么、受众是谁，以及唯一希望用户采取的行动是什么？文案采用上下文中的语气，并根据其风格原型选择首屏模式和各区块背景。

---

1. 区块框架

每个高转化率落地页都遵循这一流程。你可以调整顺序或省略区块，但以下是经过验证的顺序：

1. Hero          — Value prop + primary CTA (above the fold)
2. Social Proof  — Logos, stats, or trust badges
3. Features      — What it does (benefits, not features)
4. How It Works  — 3-step simplicity
5. Testimonials  — Real humans saying real things
6. Pricing       — Clear tiers with obvious recommendation
7. FAQ           — Overcome objections
8. Final CTA     — Repeat the primary action
9. Footer        — Links, legal, secondary nav

区块间距

• 主要区块使用 py-20 md:py-28 lg:py-32（完整间距比例见第 11 节）。
• 白色与浅灰色（bg-gray-50）背景交替使用。
• 所有内容均使用 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 容器。

---

2. 首屏模式

首屏是页面的第一个区块。这是默认模式；对于分栏、视频和极简排版变体、背景技巧及 LCP 详情，请使用 hero-section 技能。

模式 A：居中首屏（最适合 SaaS）

<section class="relative overflow-hidden bg-white pt-24 pb-20 sm:pt-32 sm:pb-28">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
    
    <div class="inline-flex items-center gap-2 rounded-full bg-indigo-50 px-3 py-1 text-sm
      font-medium text-indigo-700 ring-1 ring-indigo-600/10 mb-8">
      <span class="h-1.5 w-1.5 rounded-full bg-indigo-600"></span>
      Now in public beta
    </div>

    <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]">
      The faster way to build
      <span class="text-indigo-600">beautiful products</span>
    </h1>

    <p class="mt-6 text-lg sm:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
      Ship production-ready interfaces in minutes. Stop fighting CSS and start
      delighting your users.
    </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 bg-indigo-600 text-white px-8 py-3.5 rounded-xl
        font-semibold text-lg hover:bg-indigo-500 transition-colors shadow-lg
        shadow-indigo-600/25">
        Start free trial
      </a>
      <a href="#" class="w-full sm:w-auto text-gray-700 px-8 py-3.5 rounded-xl font-semibold
        text-lg hover:bg-gray-100 transition-colors flex items-center justify-center gap-2">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"></svg>
        Watch demo
      </a>
    </div>

    
    <p class="mt-8 text-sm text-gray-500">No credit card required. Free for up to 3 projects.</p>
  </div>
</section>

其他首屏模式

分栏（文本 + 产品视觉）、视频背景和动态首屏请参阅 hero-section。无论采用哪种模式，首屏图片都是 LCP 元素：绝不要使用 loading="lazy"，始终设置 fetchpriority="high" 以及 width/height。

---

3. 社会认同区块

客户 Logo 栏

<section class="bg-gray-50 py-12 border-y border-gray-100">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <p class="text-center text-sm font-medium text-gray-500 mb-8">
      Trusted by 2,000+ teams worldwide
    </p>
    <div class="flex flex-wrap items-center justify-center gap-x-12 gap-y-6
      grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all">
      
      <img src="/logos/stripe.svg" alt="Stripe" width="112" height="28" class="h-7 w-auto" loading="lazy" />
      <img src="/logos/vercel.svg" alt="Vercel" width="112" height="28" class="h-7 w-auto" loading="lazy" />
      
    </div>
  </div>
</section>

数据统计

<div class="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center">
  <div>
    <div class="text-4xl font-extrabold text-gray-950">10K+</div>
    <div class="mt-1 text-sm text-gray-500">Active users</div>
  </div>
  <div>
    <div class="text-4xl font-extrabold text-gray-950">99.9%</div>
    <div class="mt-1 text-sm text-gray-500">Uptime SLA</div>
  </div>
  
</div>

---

4. 功能区块

Bento 网格（现代、视觉化）

<section class="py-20 bg-white">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <h2 class="text-3xl sm:text-4xl font-bold text-gray-950">Everything you need</h2>
      <p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
        A complete toolkit for modern teams.
      </p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      
      <div class="md:col-span-2 bg-gradient-to-br from-indigo-600 to-purple-700
        rounded-2xl p-8 text-white min-h-[300px] flex flex-col justify-end">
        <h3 class="text-2xl font-bold">AI-powered insights</h3>
        <p class="mt-2 text-white/90">Automatically surface what matters most.</p>
      </div>
      
      <div class="bg-gray-50 rounded-2xl p-8 min-h-[300px] flex flex-col justify-end">
        <div class="w-10 h-10 rounded-lg bg-indigo-100 text-indigo-600 flex items-center
          justify-center mb-4" aria-hidden="true"></div>
        <h3 class="text-lg font-bold text-gray-950">Real-time sync</h3>
        <p class="mt-2 text-gray-600">Changes appear instantly across all devices.</p>
      </div>
    </div>
  </div>
</section>

交替排列行（经典、详尽）

• 奇数行：左侧文本，右侧图片。
• 偶数行：左侧图片，右侧文本。
• 每行突出一项功能，包含标题、描述和视觉内容。

图标网格（简洁、易浏览）

• 3 或 4 列，每列包含图标、标题和简短描述。
• 图标风格应保持一致（使用线框或实心样式，不要混用）。

---

5. CTA 设计

主要 CTA 规则

• 尺寸：高度至少 48px，宽度至少 200px。尺寸应大于页面上的其他所有按钮。
• 颜色：页面上对比度最高的元素，使用品牌主色。
• 文案：使用以行动为导向的动词。“免费开始试用” > “提交”。“立即开始” > “注册”。
• 紧迫感：可选，但效果很好。“免费开始——无需信用卡。”
• 重复出现：主要 CTA 至少出现 3 次：首屏、中部、底部。

粘性 CTA（移动端）

<div class="fixed bottom-0 inset-x-0 bg-white/90 backdrop-blur-lg border-t
  border-gray-200 px-4 pt-4 pb-[calc(1rem+env(safe-area-inset-bottom))] sm:hidden z-50">
  <a href="#" class="block w-full bg-indigo-600 text-white text-center py-3.5
    rounded-xl font-semibold text-lg">
    Start free trial
  </a>
</div>

次要 CTA 模式

• 在主要按钮旁放置幽灵按钮（描边样式）。
• 带箭头的文本链接：Learn more ->。
• 不要并排放置两个权重相同的 CTA。
• 导航到其他页面的 CTA 使用 <a>；打开模态框或提交内容的 CTA 使用 <button>。

---

6. 工作原理

三步模式

<section class="py-20 bg-gray-50">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <h2 class="text-3xl font-bold text-center text-gray-950 mb-16">
      Get started in minutes
    </h2>
    <div class="grid md:grid-cols-3 gap-12">
      <div class="text-center">
        <div class="w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 font-bold
          text-lg flex items-center justify-center mx-auto">1</div>
        <h3 class="mt-4 text-lg font-semibold text-gray-950">Connect your data</h3>
        <p class="mt-2 text-gray-600">Import from 50+ sources with one click.</p>
      </div>
      
    </div>
  </div>
</section>

步骤保持为 3 步。如果流程包含更多步骤，请简化或合并。

---

7. 用户评价

卡片网格

<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
    <div class="flex gap-1 text-amber-400 mb-4" role="img" aria-label="Rated 5 out of 5">
      
    </div>
    <blockquote class="text-gray-700 leading-relaxed">
      "This completely changed how our team works. We shipped 3x faster in the
      first month."
    </blockquote>
    <div class="mt-4 flex items-center gap-3">
      <img src="/avatars/sarah.jpg" alt="" width="40" height="40" loading="lazy" class="w-10 h-10 rounded-full" />
      <div>
        <div class="font-semibold text-gray-950 text-sm">Sarah Chen</div>
        <div class="text-gray-500 text-sm">CTO, Acme Corp</div>
      </div>
    </div>
  </div>
</div>

规则

• 使用真实照片、真实姓名和真实公司。
• 标明职位／头衔，以增强权威性。
• 星级评分能增强视觉上的可信度。
• 突出具体成果（“速度提升 3 倍”“每周节省 20 小时”）。

---

8. 定价部分

三档定价模式

• 免费／基础版——作为价格锚点，功能有限。
• 专业版（推荐）——用边框、徽章或阴影突出显示。功能最多。
• 企业版——“联系销售”，所有功能均不受限。

设计规则

• 使用 ring-2 ring-indigo-600 和 lg:scale-105 突出推荐方案（卡片在移动端堆叠时不要缩放，否则会溢出）。
• 使用“最受欢迎”徽章。
• 提供按年／按月切换，并标明可节省的费用——使用真正的 <button role="switch" aria-checked> 或单选组，而不是设置样式的 <div>。
• 功能列表：已包含的功能用勾号标示，未包含的用短横线或 X 标示。
• 价格：大号数字，小号计费周期（例如，$29/月）。

---

9. 信任信号

将这些内容分散放在页面各处，而不只是集中在一个部分：

• 安全徽章：SSL、SOC 2、GDPR
• 退款保证：“30 天内全额退款，无需任何理由”
• 支持：“全天候支持”或“平均响应时间：2 小时”
• 社会认同：在 CTA 按钮附近写“加入 10,000 多个团队”
• 媒体标志：“曾获 TechCrunch、Forbes 等媒体报道……”

---

10. 性能优先事项

首屏内容（LCP 优化）

• Hero 图片／视频封面很可能是 LCP 元素：设置 fetchpriority="high"，明确指定 width／height，绝不要使用 loading="lazy"。
• 仅当图片发现较晚时才预加载（CSS 背景、由 JS 渲染或使用 <picture>）。
• 为 Hero 部分内联关键 CSS。不要让标题从 opacity: 0 淡入——这会延迟 LCP。
• 目标（Core Web Vitals，第 75 百分位）：LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1。

<link rel="preload" href="/hero-image.webp" as="image" fetchpriority="high" />

首屏以下内容

• 对所有图片进行延迟加载：loading="lazy"。
• 使用 srcset 提供响应式图片。
• 延迟加载非关键 JS。
• 在页面靠下的部分使用 content-visibility: auto 和 contain-intrinsic-size: auto 800px（如果没有尺寸提示，滚动条位置会跳动）。
• 为每张图片设置 width／height（或 aspect-ratio），以避免布局偏移。

<img
  src="/feature.webp"
  srcset="/feature-400.webp 400w, /feature-800.webp 800w, /feature-1200.webp 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  width="1200" height="800"
  loading="lazy"
  alt="Feature description"
  class="rounded-2xl"
/>

---

11. 以转化为导向的间距与流程

视觉流程规则

1. 文本较多的页面采用F 型布局（视线从左上扫向右侧，然后向下移至左侧）。
2. 极简页面采用Z 型布局（视线以之字形扫过页面）。
3. 每个部分回答一个问题，然后引导用户进入下一部分。
4. 留白是一项设计要素——拥挤的页面会让人觉得不可信。

部分间距比例

• 主要部分之间：py-20 md:py-28 lg:py-32
• 子部分之间：py-12 lg:py-16
• 标题与内容之间：mb-12 lg:mb-16
• 内容项之间：gap-6 lg:gap-8

---

验证：渲染并检查

不要交付自己没有检查过的代码。生成代码后：

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 是否无需滚动即可看到，并确认粘性 CTA 不会遮挡内容。如果服务器正在运行，请运行 Lighthouse（npx lighthouse <url> --only-categories=performance,accessibility）。
5. 修复发现的问题并重新截屏，然后再报告完成。

---

落地页检查清单

• 单一明确的 CTA（重复出现 3 次以上）
• 主视觉区的 LCP 图片使用 fetchpriority="high"，设有宽度和高度，且不延迟加载
• 首屏内展示社会认同
• 文案侧重优势，而非功能
• 针对移动设备优化（固定 CTA、纵向排列布局）
• Core Web Vitals：LCP ≤ 2.5s，INP ≤ 200ms，CLS ≤ 0.1
• 动画遵循 prefers-reduced-motion；文本对比度达到 4.5:1
• 在 390px 和 1440px 宽度下渲染并截图（参见 Verify）
• 不设置相互竞争的导航（落地页使用精简页眉）