Skip to main content

​
欢迎使用 Lovable

1

从 Lovable 基础功能开始上手

2

了解界面和各项控件

3

使用编辑功能与版本历史

4

实现身份验证和用户管理

5

使用 Supabase 数据库和边缘函数

6

GitHub 集成与代码管理

7

分享项目并获取社区反馈

8

探索更多资源和模板

​
Lovable 教程

在本教程中，我们将指导您使用 Lovable 创建一个 AI 驱动的卡路里追踪应用，包含身份验证、精美的响应式设计、OpenAI 集成以及部署到生产环境。
1

基础设置

任何 Lovable 项目的基础都是一个优质的提示。对于这个应用，这里有一个示例：
一旦 Lovable 生成了 UI 骨架：
  • 检查导航设置和着陆页设计。
  • 迭代优化提示，以改进布局并确保在移动端具有良好的响应效果。
在提示中要明确说明从 UI 入手。将任务拆分为清晰的步骤时，Lovable 的效果最佳。例如，在提示中尽早列出导航、页面结构和设计主题。
2

设计界面

Lovable 强调循序渐进的方式，有点像搭建一座建筑：
  • 从脚手架开始：规划你的应用结构（例如用户体验流程、页面布局）。
  • 添加第一层：创建带有基础设计元素的空白页面。
  • 打磨细节：添加颜色、动效以及移动端的响应式表现。
如果你在 Figma 中已有现成设计，可以截图并把它们放进你的 Lovable 提示中。提供高分辨率图片可以获得更好的效果。
3

将 Supabase 集成为后端和身份验证服务

当 UI 准备就绪后，就可以开始添加后端功能了：
  1. 注册一个 Supabase 账号 并创建一个项目。
  2. 点击 “Connect Supabase” 按钮，将其连接到 Lovable。
  3. 用于数据存储时，Lovable 会生成 SQL 表。例如：
  • 一个 profiles 表，用于存储用户信息。
  • 一个 meals 表，与用户关联，用于跟踪每日记录。
在 Supabase 中使用行级安全（RLS）规则来保障用户隐私。Lovable 可以自动帮你处理这一点。
4

集成 OpenAI 实现餐食分析

这个应用的魔力在于其 AI 功能。要分析餐食：
  1. 在开发者控制台获取 OpenAI API 密钥。
  2. 使用 GPT-4 来分析餐食描述或图片。
  3. 确保将 API 密钥安全地存储在 Edge Functions（边缘函数）中，以防止未经授权的访问。
需要包含的功能：
  • 分析餐食描述：估算营养指标（卡路里、蛋白质、碳水化合物、脂肪）。
  • 图像识别：上传一张餐食照片，GPT-4 会提取描述和营养数据。
OpenAI 集成进阶技巧：
  • 使用 function calling 获取结构化响应，确保数据格式正确，便于插入数据库。
  • 通过让应用分析诸如“2 个鸡蛋”这样的简单餐食记录来测试功能。
5

使用 Stripe 实现支付功能

要让应用实现变现，可以添加基于订阅的支付功能：
  1. 创建一个 Stripe 账户并设置一个产品（例如，每月 12 美元的 “Standard Plan”）。
  2. 通过在 Lovable 中添加 API 密钥和产品价格 ID，将 Stripe 与 Lovable 集成。
  3. 将未付费用户重定向到落地页。只有付费用户才能访问主应用。
更多提示：
  • 启用 Stripe 的 客户门户（Customer Portal），让用户自行管理订阅（例如取消或更新支付方式）。
  • 在 Stripe 的测试模式中使用提供的测试信用卡信息来测试支付流程。
6

测试和调试

错误是开发过程中的自然一部分，而 Lovable 让调试变得更简单：
  • 每当出现构建错误时，请使用 “Try to Fix” 按钮。
  • 对于后端问题，请检查 Supabase 日志以获取详细的错误报告。
  • 如果部署到 Netlify，请查看部署日志中的构建问题。将日志分享给 Lovable，可以获得有针对性的修复建议。
如果你遇到问题，可以使用 Lovable 的 “Revert” 功能恢复到之前的版本。这可以节省积分和时间。
7

部署你的应用

当你的应用准备好之后，可以使用 Lovable 或 Netlify 进行部署：
  1. 使用 Lovable 的部署功能，将应用托管到默认域名上。
  2. 如果需要使用自定义域名：
更新应用的元数据（favicon、meta 标签、OG 图片），以提升品牌形象和 SEO 效果。
在本教程中，你将学习如何使用 Lovable、21st.dev 和 Supabase，为一款 AI 驱动的邮件助手创建一个令人惊艳、功能完整的交互式落地页——包括动画效果、API 集成以及无缝部署!
  • AI 驱动的设计与界面优化
  • 添加动画和交互元素
  • 使用 Groq API 集成 AI 邮件增强功能
  • 使用 Resend 设置联系表单
  • 使用 Lovable Launch 部署页面
本次演示展示了 Lovable 的能力，可以快速迭代并交付可用于生产环境的成果。
1

Authentication

  • 用户可以通过 Supabase 集成完成注册、登录并管理个人资料。
  • 安全的用户会话可以为不同用户提供个性化体验。
2

Feedback Submission and Voting

  • 用户可以提交包含标题、描述和图片的反馈。
  • 每条反馈会显示投票数量，并支持实时点赞（投票）。
3

Admin Dashboard with AI Summaries

  • 管理员可以查看所有反馈，按投票数进行筛选并对条目排序。
  • 借助 OpenAI 和 Supabase Edge Functions 提供的 AI 驱动摘要功能，识别可执行的洞察。
4

User Presence Tracking

实时在线状态指示器会显示当前在平台上的活跃用户。
5

Detailed Feedback Pages with Comments

每条反馈都有一个专门的讨论页面，帮助团队高效协作并合理安排优先级。
6

File Attachments

用户可以为反馈附加图片，并通过 Supabase 的存储功能进行安全保存。
本次演示的目标是构建一个应用，帮助开发者、设计师或顾问提供订阅制服务——这一业务模式的灵感来源于像 DesignJoy 这样的平台。
1

身份验证和用户管理

身份验证是首先实现的功能，为用户管理搭建了一个稳健的框架。团队强调了尽早集成身份验证的重要性，以避免在应用规模扩大时遇到问题。
  • 集成 Supabase，用于用户注册、登录和资料管理。
  • 持久化用户会话，以提升应用可用性。
2

Stripe 订阅集成

本次演示展示了如何集成 Stripe 来进行订阅管理：
  • 让用户能够订阅不同的定价层级。
  • 管理订阅状态，确保只有付费用户才能访问高级功能。
3

仪表板和任务管理

  • 针对不同用户的仪表板，包含任务看板和拖放功能。
  • 实时任务更新，支持顺畅协作。
4

AI 聊天机器人

演示最后集成了一个 AI 聊天机器人，展示了如何利用 OpenAI 为应用添加动态功能。该功能可以扩展为虚拟助手、管家式服务或数据查询界面。
  • 集成 OpenAI，提供能够智能回应用户问题的聊天机器人。
  • 只用一个提示词就完成搭建，彰显了 Lovable 的高效性。
5

迭代式调试和优化

团队处理了实时调试中的各种挑战，分享了有关故障排除的实用经验。使用的技术包括：
  • 利用控制台日志和错误信息来定位问题。
  • 回退到之前的应用版本，避免卡在异常状态中。
  • 通过详细提示词引导 Lovable 的 AI，确保修复准确。
在本教程中，我们将与 Lovable 的特邀嘉宾 ‪Mark Kashef‬ 一起，深入解析 AI 驱动的应用开发、提示工程和工作流自动化！
  • 理解高效的 AI 提示技巧
  • 提示工程的四个层级
  • 元提示技术与最佳实践
  • AI 工作流的调试策略
  • 使用 Lovable 和 Make.com 构建 AI 应用
  • 集成 Visual Edits 和 Tailwind CSS 进行 UI 设计
在本教程中，你将使用 Lovable 和 Supabase 构建一个类似 Luma 的活动平台 —— 现场演示！
  • 如何将 Supabase 与 Lovable 集成
  • 设置身份验证和用户管理
  • 配置数据库和实时评论
  • 测试性能并处理多用户访问
  • 实时调试和性能优化
在本教程中，我们将向你演示如何使用 Lovable 这款由 AI 增强的无代码构建器，在完全不写一行代码的情况下创建一个全栈日记应用!
  • 即刻设计你的应用 UI
  • 上传你的设计并生成可用的应用
  • 将 Supabase 用作后端和身份验证
  • 集成 GPT-4o 打造 AI 驱动功能
  • 在几分钟内部署一个全栈应用!
在本教程中，我们将带你一步步创建一个简单但功能强大的 CRM 系统，使用 Lovable 进行开发，Supabase 进行数据存储，以及 Resend 实现邮件自动化。
  • 如何使用 Resend 进行邮件自动化
  • 使用 Supabase 设置身份验证邮件
  • 构建管理后台仪表盘 & 联系人管理系统
  • 创建和自定义邮件模板
  • 添加新闻通讯订阅 & 群发邮件功能
借助 Lovable 的最新更新，构建引人入胜、交互性强的 Web 体验变得前所未有的轻松！
1

通过可视化编辑轻松自定义 UI

Lovable 的一大升级，是现在可以即时修改 UI 元素且不会消耗 AI 配额。你现在可以：
  • 直接在项目上编辑文本。
  • 实时调整按钮颜色和样式。
  • 无缝上传和替换图片。
  • 将鼠标悬停在元素上即可进行快速调整。
用户现在可以直接选择文本、更改颜色或轻松替换图标，而无需依赖 AI 介入，从而让设计迭代过程更加顺畅。
2

高级调试与 API 错误处理

之前，用户在处理第三方 API 集成错误时常常面临挑战。Lovable 现在可以：
  • 提供更丰富的错误信息，便于调试。
  • 消除无关弹窗，让你更专注于关键问题。
  • 启用 AI 驱动的错误检测，实现自动修复。
Lovable 不再用千篇一律的弹窗淹没用户，而是将错误上下文直接传递给其 AI，由 AI 决定何时需要处理问题以及如何修复。
3

创建动态背景和动画效果

Lovable 现在支持使用 p5.js 和其他库，无缝集成动画和交互元素。

​
示例项目：带有交互式国旗的旅行社网站

最近的一次直播演示展示了如何构建一个旅行社落地页，其中包括：
  1. 具备动画效果的主视觉区域，旗帜会根据鼠标交互动态出现和移动。
  2. 粘性滚动（sticky scroll）区域，会根据用户滚动位置发生变化。
  3. 交互式悬停效果，图片会对用户的移动做出反应。

​
如何实现动画效果

要创建这些效果，用户遵循了以下简单流程：
  • 定义期望的动画：
让背景变得可交互，包含悬浮元素，并在鼠标悬停时向外移动。
  • 使用 p5.js 生成效果：
    • 实现彩色烟雾图案效果。
    • 将静态图片替换为动态的国旗动画。
  • 通过基于物理的交互增强用户体验：
    • 让元素根据用户操作进行动态移动。
如果动画没有正常工作，可以使用 Lovable 的 chat mode 来调试和优化效果，在 AI 的分步指导下逐步完成调整。
4

从外部库导入自定义元素

借助 21st.dev，用户现在可以将预构建的 UI 组件无缝集成到 Lovable 项目中。
  1. 在 21st.dev 上浏览按钮设计。
  2. 复制 AI 生成的提示。
  3. 将其粘贴到 Lovable 中并替换现有按钮。
这种方式可以加速设计工作流程，并让界面更加精致、视觉风格更统一。
同样的方法也适用于从 motion.dev 导入动画预设，让你无需自定义编码即可更轻松地添加高质量的动效。
在本教程中，我们将逐步演示如何使用 Lovable 和 Clerk 构建一个 自定义 CRM 系统（客户关系管理系统）。
在本教程中，我们将演示如何使用 Lovable 和 Make 构建一个 自定义 CRM（客户关系管理系统）。

​
现场实战搭建、打造品牌并发布一个真正的微型 SaaS！

学习西班牙语从未如此有互动性！想象一款应用，不仅通过对话教你西班牙语，还能实现实时语音交互、动态课程和视觉效果出众的内容——完全由 AI 驱动。本教程会带你按步骤复现 Kristian 和 Harry 搭建的应用：
1

打好基础

在实现 AI 功能之前，我们首先使用 Lovable 为应用构建了坚实的基础。这包括设置身份验证、搭建仪表盘结构，以及实现用户管理。
2

身份验证系统

  • 集成 Supabase 用于后端身份验证。
  • 支持通过邮箱和密码进行注册/登录。
  • 创建了用于存储用户偏好和学习进度的用户资料系统。
3

仪表盘与导航

  • 设计了直观的侧边栏导航。
  • 创建了聊天、课程和用户设置等版块。
  • 确保界面自适应，在各类设备上都能提供流畅体验。
4

用户资料与数据存储

  • 添加了用于存储用户进度的数据库结构。
  • 设计了用户资料管理设置，用户可以在其中调整学习偏好。
1

AI 生成课程

为了让学习更具互动性，我们使用 OpenAI 的 GPT 模型 构建了一个由 AI 驱动的课程生成系统。其工作原理如下：
  1. 用户选择一个主题（例如，“在烧烤聚会上可以问的问题”）。
  2. Lovable 调用一个 OpenAI 边缘函数 来生成 10 个引人入胜的西班牙语问题。
  3. 用户完成测验、跟踪学习进度，并获得 AI 对其答案的反馈。
2

提升用户参与度

  • 动态生成问题：每个测验都由 AI 生成，确保每次都有新鲜且独特的内容。
  • 互动反馈：AI 会对正确和错误的答案给出解释，以提升学习效果。
  • 进度跟踪：用户可以保存并重新学习课程，从而加强记忆与练习。
3

使用 Replicate 提升视觉参与度

为了加入视觉化学习元素，我们集成了 Replicate 的 Flux Schnell 图像生成模型：
  • 自动生成课程横幅：每门课程都会动态生成与主题匹配的图像。
  • 沉浸式视觉体验：由 AI 驱动的视觉效果可以增强用户参与度和记忆效果。
  • 快速图像处理：通过 Replicate 的 API，图像可以实时生成，而不会拖慢整体体验。
4

实时语音对话

应用开发过程中的一大里程碑，是通过 OpenAI 的实时 WebRTC API 增加了 实时西班牙语口语练习 功能：
  • 互动式 AI 导师：用户可以直接与 AI 对话，AI 会用西班牙语进行动态回应。
  • 发音辅助：AI 会提供实时纠正和建议。
  • 流畅对话体验：自然的对话流程让用户感觉就像是在与真人导师互动。
1

确定概念和受众

在打造品牌之前，我们先明确了核心目标：
  • 面向实时西班牙语对话的 AI 驱动聊天。
  • 用于快速练习环节的 自动测验。
  • 具备课程存储和进度跟踪的 结构化学习。
这帮助我们做出品牌相关决策，并确保它们与应用的目标保持一致。
2

命名与域名选择

我们希望起一个简短、易记、能够体现学习旅程的名字。借助 AI 进行头脑风暴，最终确定了 Ruta（西班牙语中意为“路线”或“路径”）。

​
流程：

  • 使用 AI 为朗朗上口的西班牙语单词进行名称头脑风暴。
  • 测试了多个选项，如 “Camino” 和 “Verbo”，但 “Ruta” 脱颖而出。
  • 检查域名可用性，并立即注册了 rutaapp.com。
3

创建视觉识别体系

我们快速设计了品牌：
  • Logo：一个从设计素材库获取并在 Figma 中编辑的罗盘主题图标。
  • 字体搭配：Logo 采用粗体、现代风格字体，应用界面使用易读的 UI 字体。
  • 配色方案：采用 Tailwind CSS 蓝色配色，象征旅行与探索。
  • 样式灵感：尝试了 neo-brutalism 新野兽派风格，通过调整对比度、阴影和边框，打造视觉上更具吸引力的 UI。
4

构建一致的用户体验

使用 Lovable，我们在整个应用中确保了视觉一致性：
  • 落地页：由 AI 生成，配有动态、吸引人的首屏区域。
  • 仪表盘和课程页面：样式与品牌形象保持统一。
  • 迭代式样式调整：应用 新野兽派元素，以测试不同的设计风格。
  • 用户流程测试：确保从注册到实时聊天的导航顺畅无缝。

​
社区教程

请在 这里 查看 Lovable 社区教程。