🐴 Lovable + Cursor: How to set up this powerful AI workflow

A step-by-step guide with tips

Design with AI made it into the Top 3 trending newsletters in Design on Substack.
Thank you.

☀️ Hello from a sunny New York!

Today, I’ll share a powerful workflow: Lovable—GitHub—Cursor.

While Lovable and Cursor are both popular tools, each has its own strengths and limitations.

But when used together, they complement each other well and you can get the best of both worlds.

This workflow lets you tap into Lovable’s rapid design generation and Cursor’s AI-powered coding environment to build more robust applications with precision.

I’ll show you how to connect them step by step and create a seamless workflow.

Let’s dive in.

---

Overview

How it works

In Lovable, connect your project with Github, so the code can be synced to GitHub in real time.

In Cursor, you clone the project repro to local and make edits. Then you can sync to GitHub anytime.

Once you sync it, the updates will instantly be reflected in Lovable.

The overview of the workflow

Then you can choose to work in Lovable or Cursor based on your needs. Switching between them is seamless.

Why it is powerful

Lovable is intuitive and fast for frontend-focused design. But when it comes to refining or adding real functionality, you can quickly hit a wall.

It’s just not built for creating solid applications. It’s also quite easy to reach the usage cap on Lovable’s free plan.

That’s where GitHub and Cursor come in. GitHub acts as a bridge between Lovable and Cursor. You can tell from its name “GitHub = Git + Hub”. Git is the tool that manages code versions. GitHub is a platform that hosts your Git repositories and enhances collaboration.

Cursor, on the other hand, is like a code editor with an AI assistant. It’s much more powerful than Lovable. You can debug, refine, and build with greater precision.

The flip side is that Cursor can feel overwhelming if you have minimum coding experience and isn’t simple enough for frontend exploration. That’s why Lovable and Cursor complement each other.

But how to get Lovable, Cursor, and GitHub work together?

A random post I came across on Reddit :)

So next, I’ll walk you through the workflow step by step!

---

Step 1: Lovable → GitHub

First of all, you need to have a GitHub account.

Then build something in Lovable. I talked about Lovable in a newsletter. It is easy to get started.

For the sake of this demo, I created a simple “Explain It Like I’m 5” App.

You can choose to connect to GitHub anytime by clicking the GitHub icon on the top right corner.

The GitHub icon in Lovable

If you click the icon, this dialog box will show up:

After clicking the GitHub icon

After you connect to Github account, this dialog box will show one more option for you to connect this “project” to your Github. Make sure that is connected too.

---

Step 2: GitHub → Cursor

Open Cursor. The very first step is to choose a folder. That’s where the project will live.

Next, you simply type this in Cursor:

Clone this repo: [Your project Github Link]

Then Cursor will tell you what to do. Quite easy and straightforward to set up.

You are essentially installing “dependencies”, which is downloading and setting up all the packages your project needs to work properly.

Following the instructions, I opened the local server and it showed the exact same design in Lovable.

Get my local server to show Lovable’s design

Let’s say now I want to make some revisions in Cursor. The CTA button’s hover effect is too much.

The original button hover effect

I typed this in Cursor’s prompt window:

Remove the zoom-in effect on the 'Explain It!' CTA when hovering.

Then it's fixed:

The button hover effect after revision in Cursor

---

Step 3: Cursor → GitHub

Intro

You can choose to sync the code from Cursor to GitHub anytime.

But when you’ll notice many more options than you expect vs. just one option—Sync.

That’s just how Git works. It breaks down version control into small, specific actions so you can control precisely.

This is particularly helpful when you deal with a bigger project. Imagine the chaos of collaborating with many people when every local model syncs to one central model, and everyone can only choose to sync with no other options.

I drew a diagram below to help you better understand all those commands.

Git commands from Cursor to Github

You don’t have to type those commands per se, but when you see those terms in Cursor and feel confused, the diagram can be a helpful reference.

Stage Changes

First, you click this “branch” icon to switch to the Source Control Panel. Then click “+” icon to “stage the changes” to make it ready to commit.

Stage Changes

Commit + Sync

Then depending on your need, you can choose one option in the Commit dropdown.

If you just want to sync directly, go with Commit & Sync.

Commit and Sync

Do you see the Message box on top of Commit? That is like a version history name for you to better keep track of your changes. If you leave it blank, Cursor just automatically generates a Commit message based on the changes you made.

---

Step 4: GitHub → Lovable

Now is the magical step. Because you don’t need to do anything.

You should instantly see the update automatically synced in Lovable. How cool is that!

The update in Cursor reflected in Lovable in real time

If you look at the snapshot above, it showed the latest revision from Cursor in the chat window.

Then you can choose to keep building in Lovable or switch to Cursor based on your need.

---

Appendix

If you want to collaborate with someone, you simply add a collaborator to your project repo on GitHub. You go to the project → Settings → Collaborators → Add people

Add collaborators in GitHub

Once added, they can use Cursor to collaborate on this project in real time too.

---

Thanks for reading. And special thanks to Junaid, who shared the workflow with me while preparing for the course.

See you next week,

Xinran

-

P.S. Gave a talk with some demos a few days ago on creating AI-powered prototypes. If you are interested in the topic too, check it out. You might like the ice cream pairing app I built live with the audience.