The Ultimate Vibe Coding Guide 📜

If you can organize files in Google Drive and edit a document in Google Docs, you can build software.

Seriously.

The tools just have scary names.

Here’s a translation layer that might help :)

This guide will take 15 mins to go through but by the end of it you should have your own vibe coded apps running and published on the internet. For free.

If you subscribe to ChatGPT or Claude you get a bigggg bonus for coding.

Join our whatsapp community if you have any questions or just wanna learn more & meet like-minded people.

The basics 🐣

You don’t need to read this section but it helps to have some fundamentals later on.

Code is just a bunch of instructions that computers read to produce things.
They’re literally just a bunch of text documents that exist on your computer. You could make one in google docs.
To edit these text documents you could use google docs, but to make it more readable, people use code editors like VS Code, Cursor or Antigravity. They make it colourful and use coder-fonts for the vibe, but you could change this to comic sans if you want too.
- Code editors are also known as IDE’s or Integrated Development Environments.
You can save these documents locally (on your laptop) or on the cloud (like google drive)
- But instead of google drive, programmers use GitHub because it makes it easier
In summary, write code on your code editor, and save it in GitHub.

Step 1: Create with Lovable ❤️

This is by far the easiest way to get going (for free)
Head to lovable.dev, type in a prompt of what you wanna build (like briefing a designer) and in a few mins the AI agent will build it for you.
I recommend using Cleve/ChatGPT/Claude to iterate on your idea first.
- Tell it your rough idea, and ask it “ask me a couple questions to refine my idea”
Reply and after a conversation if you’re feeling good, ask the model to summarise everything into a “Detailed Product Description to send to Lovable”
The goal isn’t to come up with the perfect prompt, it’s to have clear thinking on what you want to build, such that lovable gets it as close as possible first try
Cleve has more context on you and your work (as it imports your socials) so it can be more useful, plus you can save what you like in notes and collaborate easily.
(Optional) You can also add screenshots of similar products or websites with designs you like in the chatbox in lovable. That way lovable will follow that design style.
If you have anything you want to edit, you can just ask the AI to edit it. Like talking to a techie friend.
You can continue this all the way until you hit the credit limit.
At this point you have 3 options:
- Subscribe: $25/month, cancel anytime
Don’t subscribe: Save to GitHub (top right) and build further (continues below)
Wait for tomorrow (free credits refresh daily)
Lovable is great and will be enough for 80% of use cases, people have built really awesome things with Lovable alone. You can connect to custom domain (like your own .com), publish to the web, run AI features like image generation or chatbots, edit everything and more.
Though you may want to download the code and not subscribe if:
- You’re building an idea that’s more complex and might need more power and flexibility
You’re cheap and want a free/cheaper way (me lol)
You just wanna learn coding like a real tech sis/bro 👊🤓
Either way, starting on lovable is great because it gives you a base structure of your app to continue building with. And that’s free (for now)!
If you’re not happy with the initial output of Lovable and you’re out of credits, you can wait for tmr or...

Step 2: Save with GitHub ☁️

Think of GitHub as Google Drive for code. That’s it. It’s just where the files live in the cloud so you (and your team) can access them.

The Repo: This is just a "Folder" or "Project."
Origin: Sounds fancy, but literally just means "The Cloud Version." When you push code to "origin," you are saving it to the internet.

Step 3: The Sync (GitHub Desktop) 🔄

Now the code is in the cloud, but you need it on your laptop to actually mess with it.

Open GitHub Desktop.
Go to File > Clone Repository.
Select the project you just made in Lovable.
Local Path: Save it to Documents/GitHub/Your-Project-Name.
- Pro tip: Keep all your coding projects in one folder named GitHub. Keep your digital house clean! 🧹

Step 4: The Magic Wand (Cursor) ✨

This is where the actual "Vibe Coding" happens. We use Cursor, which is an AI-native code editor. It looks like VS Code, but it has a brain.

Open the folder you just saved in Cursor.
The "God Mode" (Composer):
- Hit Cmd + I (or Ctrl + I) to open Composer.
This isn't just a chatbot. It can create multiple files, edit your entire codebase, and fix bugs across the whole project at once.
Just type: "Create a pricing page that matches the landing page style" and watch it write the code for you.
The Quick Fix:
- Highlight any piece of code and hit Cmd + K.
Type: "Make this button blue" or "Fix this error."
It modifies the code in place. You don't even need to copy-paste.

Step 5: Start the Engine (Terminal) 🏎️

Okay, this part looks like "The Matrix," but don't panic. It’s just a way to tell your computer to "turn the website on."

Open the terminal inside Cursor (Ctrl + ~).
The only 3 commands you need:
- ls (List): "Show me what files are in this folder."
cd foldername (Change Directory): "Open this folder."
npm run dev: "START THE ENGINE."
Once you run npm run dev, it builds a local version of your site (usually at localhost:3000).
Now you can see your changes live in your browser as you vibe code in Cursor.

Step 6: Go Live (Vercel) 🚀

You’ve made edits. You’ve tested them locally. Now you want the world to see it.

Save: Go back to GitHub Desktop, type a summary of what you did (e.g., "Added pricing page"), and click Commit.
Sync: Click Push to Origin (Upload to Cloud).
Deploy: Go to Vercel.com and import your GitHub project.
- Vercel watches your GitHub "Origin."
Every time you "Push" new code from your desktop, Vercel sees it, grabs it, and updates your live website AUTOMATICALLY.

The Loop 🔁

Lovable: Generate the v1 (the skeleton).
GitHub Desktop: Pull it to your computer.
Cursor: Use Composer (Cmd + I) to build complex features and refine the design.
Terminal: Run npm run dev to preview it locally.
GitHub Desktop: Push changes.
Vercel: Automatically updates the live site.

This workflow lets you operate like a senior engineer without getting bogged down in syntax. You focus on product, the AI handles the code.

Loading content...