TSS-Blue-AI-Lab/ai-lab-agent-skills

落地页

分钟内构建美观、响应式的落地页。

何时使用

• 发布新产品或功能
• 创建营销或推广页面
• 构建作品集或个人网站
• 制作注册或候补名单页面
• 快速原型设计产品概念

工作原理

1. 页面区块

每个高效的落地页都遵循以下结构：

┌─────────────────────────────┐
│  导航（Logo + 链接）         │
├─────────────────────────────┤
│  英雄区（标题 + CTA）        │
├─────────────────────────────┤
│  社交证明 / Logo 展示        │
├─────────────────────────────┤
│  功能（3-4 张卡片）          │
├─────────────────────────────┤
│  工作原理（3 步）            │
├─────────────────────────────┤
│  用户评价                    │
├─────────────────────────────┤
│  定价（可选）                │
├─────────────────────────────┤
│  CTA（重复主要行动）         │
├─────────────────────────────┤
│  页脚                        │
└─────────────────────────────┘

2. 英雄区

英雄区决定页面的成败。保持简洁：

function Hero() {
  return (
    <section className="py-20 px-6 text-center">
      {/* 徽章 */}
      <div className="inline-flex items-center rounded-full bg-blue-50 px-3 py-1 text-sm text-blue-700 mb-6">
        现在公开测试
      </div>

      {/* 标题 — 一个清晰的价值主张 */}
      <h1 className="text-5xl font-bold tracking-tight text-gray-900 max-w-3xl mx-auto">
        借助 AI <span className="text-blue-600">10 倍速</span>交付产品
      </h1>

      {/* 副标题 — 支撑主标题 */}
      <p className="mt-6 text-xl text-gray-600 max-w-2xl mx-auto">
        告别样板代码。让 AI 处理重复工作，你专注真正重要的事。
      </p>

      {/* CTA — 一个主要行动 */}
      <div className="mt-10 flex gap-4 justify-center">
        <a href="#" className="px-8 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700">
          免费开始
        </a>
        <a href="#" className="px-8 py-3 border border-gray-300 rounded-lg font-medium hover:bg-gray-50">
          查看演示
        </a>
      </div>
    </section>
  )
}

3. 功能卡片

const features = [
  { icon: '⚡', title: '闪电般快速', description: '数秒内部署，而非数小时' },
  { icon: '🔒', title: '默认安全', description: '内置企业级安全' },
  { icon: '📊', title: '分析', description: '实时洞察你的数据' },
]

function Features() {
  return (
    <section className="py-20 px-6 bg-gray-50">
      <h2 className="text-3xl font-bold text-center mb-12">你需要的一切</h2>
      <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
        {features.map(f => (
          <div key={f.title} className="bg-white p-6 rounded-xl shadow-sm">
            <div className="text-3xl mb-4">{f.icon}</div>
            <h3 className="text-lg font-semibold mb-2">{f.title}</h3>
            <p className="text-gray-600">{f.description}</p>
          </div>
        ))}
      </div>
    </section>
  )
}

4. 设计原则

• 每区一个 CTA — 不要让用户被过多选择淹没
• 留白是朋友 — 使用充足的内边距（py-20, gap-8）
• 文本设置最大宽度 — 不要让文本横跨整屏（max-w-3xl）
• 视觉层级 — 越大越重要，有节制地使用 font-bold
• 移动优先 — 先设计移动端，再通过 md: 和 lg: 断点增强
• 快速加载 — 使用 next/image、最小化 JS、不使用重型库

5. 快速搭建

# 最快路径：Next.js + Tailwind
npx create-next-app@latest landing --typescript --tailwind --app
cd landing
npm run dev

质量检查清单

• 在移动设备上显示良好（在 375px 宽度下检查）
• 英雄区标题清晰简洁（少于 10 个词）
• 首屏有一个明显的 CTA
• 页面加载时间 < 2 秒
• 所有链接和按钮正常工作
• 已设置 Favicon 和 meta 标签

示例

> 为 AI 写作工具构建一个落地页
> 创建带有邮箱注册功能的移动应用候补页
> 构建带项目展示的作品集落地页