今天，我将分享一个强大的工作流程：Lovable — GitHub — Cursor。

虽然 Lovable 和 Cursor 都是流行的工具，但各有其优点和局限性。

但是当一起使用时，它们可以很好地互补，您可以两全其美。

通过此工作流程，您可以利用 Lovable 的快速设计生成和 Cursor 的 AI 驱动的编码环境来精确构建更强大的应用程序。

我将向您展示如何逐步连接它们并创建无缝的工作流程。

概述

运作方式

在 Lovable 中，将您的项目与 Github 连接起来，以便代码可以实时同步到 GitHub。

在光标中，将项目重现克隆到本地并进行编辑。然后，您可以随时同步到 GitHub。

同步后，更新将立即反映在 Lovable 中。

按 Enter 键或单击以查看大图

工作流程概述

然后，您可以根据需要选择在 Lovable 或 Cursor 中工作。它们之间的切换是无缝的。

为什么它很强大

Lovable 对于以前端为中心的设计来说直观且快速。但是，当涉及到完善或添加实际功能时，您很快就会碰壁。

它只是不是为创建可靠的应用程序而构建的。也很容易达到 Lovable 免费计划的使用上限。

这就是 GitHub 和 Cursor 的用武之地。GitHub 充当 Lovable 和 Cursor 之间的桥梁。您可以从它的名字“GitHub = Git + Hub”中看出。Git 是管理代码版本的工具。GitHub 是一个托管 Git 存储库并增强协作的平台。

另一方面，Cursor 就像一个带有 AI 助手的代码编辑器。它比 Lovable 强大得多。您可以更精确地调试、完善和构建。

另一方面，如果您的编码经验最少并且不够简单，无法进行前端探索，那么 Cursor 可能会感到不知所措。这就是为什么 Lovable 和 Cursor 相辅相成。

但是如何让 Lovable、Cursor 和 GitHub 协同工作呢？

按 Enter 键或单击以查看大图

我在 Reddit 上偶然看到的一篇帖子:)

接下来，我将逐步引导您完成工作流程！

第 1 步：GitHub →可爱

首先，您需要有一个 GitHub 帐户。

然后在 Lovable 中构建一些东西。我在一份时事通讯中谈到了 Lovable。很容易上手。

为了这个演示，我创建了一个简单的“像我 5 岁一样解释它”应用程序。

您可以随时通过单击右上角的 GitHub 图标来选择连接到 GitHub。

按 Enter 键或单击以查看大图

Lovable 中的 GitHub 图标

如果单击该图标，将显示此对话框：

按 Enter 键或单击以查看大图

单击 GitHub 图标后

连接到 Github 帐户后，此对话框将显示另一个选项，供您将此“项目”连接到您的 Github。确保它也已连接。

第 2 步：GitHub → Cursor

打开光标。第一步是选择一个文件夹。这就是该项目的所在地。

接下来，您只需在光标中输入以下内容：

克隆此存储库：[您的项目 Github 链接]

然后 Cursor 会告诉你该怎么做。设置起来非常简单明了。

您本质上是在安装“依赖项”，即下载和设置项目正常工作所需的所有软件包。

按照说明，我打开了本地服务器，它在 Lovable 中显示了完全相同的设计。

按 Enter 键或单击以查看大图

获取我的本地服务器以显示 Lovable 的设计

假设现在我想在 Cursor 中进行一些修改。CTA按钮的悬停效果太大了。

按 Enter 键或单击以查看大图

原有的按钮悬停效果

我在 Cursor 的提示窗口中输入了以下内容：

悬停时删除“解释它”CTA 上的放大效果。

然后它就修复了：

按 Enter 键或单击以查看大图

光标修改后的按钮悬停效果

第 3 步：GitHub →光标

介绍

您可以随时选择将代码从 Cursor 同步到 GitHub。

但是，当您注意到比您预期的要多得多的选项而不是只有一个选项时 - 同步。

这就是 Git 的工作原理。它将版本控制分解为小的、具体的作，以便您可以精确控制。

当您处理更大的项目时，这特别有用。想象一下，当每个本地模型都同步到一个中央模型，而每个人都只能选择同步而没有其他选项时，与许多人协作的混乱。

我在下面画了一个图表，以帮助您更好地理解所有这些命令。

按 Enter 键或单击以查看大图

从 Cursor 到 Github 的 Git 命令

您不必键入这些命令本身，但是当您在 Cursor 中看到这些术语并感到困惑时，该图可以作为有用的参考。

阶段变化

首先，单击此“分支”图标以切换到源代码控制面板。然后单击“+”图标以“暂存更改”以使其准备好提交。

按 Enter 键或单击以查看大图

阶段变化

提交 + 同步

然后，根据需要，您可以在“提交”下拉列表中选择一个选项。

如果您只想直接同步，请使用“提交和同步”。

按 Enter 键或单击以查看大图

提交和同步

您是否看到“提交”顶部的“消息”框？这就像一个版本历史记录名称，可以让您更好地跟踪更改。如果将其留空，Cursor 只会根据您所做的更改自动生成提交消息。

第 4 步：GitHub →可爱

现在是神奇的一步。因为你什么都不需要做。

您应该会立即看到更新在 Lovable 中自动同步。多么酷啊！

按 Enter 键或单击以查看大图

Cursor 中的更新实时反映在 Lovable 中

如果您查看上面的快照，它会在聊天窗口中显示 Cursor 的最新版本。

然后，您可以根据需要选择继续在 Lovable 中构建或切换到 Cursor。

附录

如果您想与某人协作，只需将协作者添加到 GitHub 上的项目存储库中即可。您可以转到项目 设置 → 协作者 → 添加人员 →

按 Enter 键或单击以查看大图

在 GitHub 中添加协作者

添加后，他们也可以使用 Cursor 实时协作处理此项目。

感谢您的阅读。特别感谢 Junaid，他在准备课程时与我分享了工作流程。