Skip to main content

着陆页

欢迎来到 Lovable 构建着陆页的官方指南。

学习如何从一个创意出发，使用 AI 加上一点奇妙效果，创建一个功能齐全、带有动画的着陆页。

两种构建着陆页的方法​

1. 一键生成​

让 Lovable 代劳重活。只需输入一个提示，让 AI 生成整个着陆页。

提示示例：

你是 CRO 专家。为一家针对高端人群的太空旅游机构构建一个着陆页。该体验包括零重力飞行。遵循转化率优化最佳实践。

添加具体的目标受众、功能或语气，以帮助 Lovable 做出更精确的假设。

2. 逐节构建​

更喜欢掌控细节？那就分步构建每个部分：如英雄区、定价区、FAQ 等。

示例流程：

  1. 步骤 1

    生成一个空白的英雄区

  2. 步骤 2

    点击任何部分，使用 视觉编辑 来：

    • 修改文本、颜色、大小
    • 移动或删除元素
    • 调整布局或动画

  3. 步骤 3
    添加图像、动画、定价表格（更多详情见文末）

  4. 步骤 4

    重构样式、添加品牌元素，并请求特定主题，例如：

    • 暗模式
    • 新粗暴主义
    • 玻璃形态
    • 未来主义字体（例如，Space Grotesque）

    像“让布局更优雅、更紧凑”这样的提示能带来显著效果。

    案例研究：构建 HorseX Live

    这个页面基于我们的直播活动，我们在活动中构建了一个太空主题的着陆页，叫 HorseX——一家为马匹提供太空旅行服务的机构（没错，是严肃的）。

    • 太空主题 🌌
    • 动画
    • 暗模式
    • 马匹吉祥物（当然）
    • 定价和 FAQ
    • 标志 + 网站图标

  5. 步骤 5

    发布、托管并推广

    • 一键发布
    • 连接自定义域名
    • 在 Lovable Launch 上发布（类似于 Product Hunt，但专为 Lovable 设计）

    通过提交到 Lovable Launch 来提升曝光度。

布局灵感与工具​

以下是我们直播中使用的一些工具：

高级功能​

用 Lovable 提升你的着陆页，添加丰富的互动体验、响应式 UI 和真实的产品预览。

P5.js + 自定义动画

对于视觉效果，如轨道马匹或闪烁星星：

  • 在英雄区使用 P5.js 草图
  • 动画背景（调整不透明度和对比度以确保可见）
  • 添加粒子效果或滚动时间线动画

🛠 如果渲染失败，可使用：

  • 聊天模式进行调试
  • “实施计划”从代码块中执行
  • 请求重置并使用可靠的参考代码

提示： 使用聊天模式来调试 P5.js 问题。

自定义网站图标

网站图标需为 64x64 的 .ico 或 .png 格式。

步骤：

  1. 在 Replicate 上生成图标
  2. 通过 favicon.io 或类似工具调整大小
  3. 将图像粘贴到提示中：
将网站图标更改为这个。
真正可用的联系表单

使用 Resend 收集电子邮件并自动发送响应。

用例：

  • 联系销售表单
  • 向用户发送确认电子邮件
  • 向团队发送通知电子邮件

提示：

实现一个使用 Resend 的联系表单。  
向用户发送确认电子邮件，并向我的团队发送通知。

提示： 需要限制使用或检测滥用？可使用 Supabase 指纹识别添加 IP 跟踪。

你应该构建什么类型的着陆页？

你可以构建以下类型：

  • 博客
  • 作品集
  • SaaS 网站
  • 非营利组织网站
  • 课程注册页
  • 活动推广页

👉 试着构建每一种，以熟练掌握。

转化率优化 (CRO) 101

你的着陆页的目标 = 一个关键动作。

可能包括：

  • 预约通话
  • 购买座位（如 HorseX）
  • 注册等待列表

CRO 最佳实践：

  • 限制 CTA 数量
  • 保持标题清晰明了
  • 让布局符合受众预期
  • 使用社交证明和信任信号

Lovable 理解“优化 CRO”的术语，因此在提示中使用它。

静态 vs 动态页面

Lovable 默认构建静态页面。

要使其动态：

  • 添加表单（如收集潜在客户）
  • 连接到 Supabase
  • 使用 Stripe 添加结账功能
  • 进行 CMS 集成（如与 Strapi）
最终润色 = 炫酷效果

以下区别让一个网站从 $2K 级跃升到 $10K 级：

  • 动画
  • 字体 + 间距
  • 品牌一致性
  • 文案润色
  • 加载速度
  • SEO 设置（Lovable 现支持 robots.txt 和 OG 标签）
添加真实产品预览

让访客直接在着陆页测试你的产品。通过 Supabase 和外部 API 如 GROQ 嵌入迷你应用。

示例： 一个“专业化电子邮件”预览器，由 GROQ API 驱动：

  • 先连接到 Supabase 以避免问题
  • 使用 聊天模式 帮助 Lovable 理解并实现新 API
  • 如果需要，通过 IP 请求指纹识别或使用限制

提示：

添加一个部分，让用户预览我们的 AI 电子邮件助手。  
连接到 Supabase。使用 GROQ API 进行电子邮件增强。
使用 21st.dev 添加美丽动画

用高质量动画和组件提升视觉设计：

  • 漂浮发光粒子
  • 基于滚动的粘性部分
  • 时间线动画
  • 标志轮播
  • 用于视频演示的模态弹出窗口

提示： 如果动画未显示，使用聊天模式调试或从头重新实现。你也可以上传截图并说：
"请为这个背景部分添加动画。"

添加模态弹出窗口（视频等）

想在英雄区不杂乱地展示演示？

使用模态：

  • 嵌入 YouTube 或演示视频
  • 通过按钮点击触发（如“观看演示”）
  • 常见提示术语：模态弹出窗口

提示：

当“观看演示”按钮被点击时，打开一个模态弹出窗口，包含这个视频。
添加信任部分，使用真实标志

社交证明至关重要。

  • 创建一个“受信赖的”部分，包含动画的公司标志。
  • 确保标志保持为图像文件，而不是 SVG 路径。
  • 避免灰色叠加。

提示：

添加一个“受信赖的”部分，使用真实的公司标志。  
保持它们为图像，而不是 SVG。使用 21st.dev 动画。
英雄区动画和 UI 润色

不要满足于静态的英雄区：

  • 动画文字（在短语之间循环）
  • 添加漂浮形状（圆圈、渐变）
  • 让颜色调色板在英雄区、标题和时间线中一致

示例提示：

让英雄标题中的文字动画，在“intelligence”和“assistance”之间循环  
添加背景中的漂浮紫色圆圈  
让标题文本使用主紫色渐变
粘性导航 + 自定义导航栏

想要平滑滚动到部分？

  • 使用粘性导航栏
  • 用 21st.dev 中的一个替换默认导航
  • 确保它链接到部分，而不是新页面

提示： 使用截图并说："让这个导航栏滚动到页面部分，并匹配我们的主题。"

移动响应式

Lovable 会自动生成移动友好的页面——但请测试并优化：

  • 通过视觉编辑添加边距和填充
  • 测试模态、动画和布局在移动设备上
什么是视差效果？

视差 通过让背景元素在滚动时以不同速度移动，创建深度感。就好像在视频游戏中走在森林里——前面的树移动得更快，后面的山移动得更慢。

为什么很酷：

  • 增加沉浸感
  • 让你的着陆页感觉更动态和互动
  • 以微妙方式分隔部分

提示示例：

为英雄区的背景添加视差滚动效果。  
让星星移动得比文本和图像慢。

提示： 要适度使用。太多视差会让人不知所措。

什么是等角设计（Isometric Design）？

等角设计 使用 2D 图形创建 3D 般效果，通常以 30° 角度呈现。想想像 Monument Valley 或老派的 Sim City 那样的游戏。一切看起来“倾斜”但完美对齐——没有透视扭曲。

为什么使用它：

  • 干净、未来主义美学
  • 让你的应用视觉看起来更复杂
  • 适合科技、数据和 AI 主题

提示示例：

为产品功能部分使用等角插图。  
让图形看起来像一个未来主义 3D 仪表板。

你也可以从以下来源导入等角插图：

提示： 等角图形与玻璃形态或暗主题 UI 搭配得非常好，适合现代 SaaS 页面。