On-screen text
how to
vibe code
like a pro
What is Vibe Coding?
Vibe coding is coding with plan language, like English instead of writing code like HTML, JavaScript etc by hand.
You describe to an AI tool what you want, it does the heavy lifting and you are left with the result.
Your code will become a horrible spaghetti mess. So let's fix that.
Say what you mean (intent)
Instead of saying, "I want you to build me a food tracker", be descriptive and use your brain to think about what you actually want.
For example: "Let's build a food tracker, the app will need 3 pages, one for adding new foods, one for an overview of the foods entered for each day and a settings page, your app should be built using a light theme ...", you get the point.
Do not repeat yourself
This is classic coding principle (DRY). AI likes to repeat itself, and that is where things get messy. Functions replicated throughout your code base, functions for formatting dates in every file, these things should be centralised and used where they are needed.
Set up some skills for your agent, make sure they follow DRY coding principles and you will reduce a tonne of bugs.
Checkpoints
This one is super important. You need to learn to commit your code when you fix a bug, or finish a feature.
Think of a "commit", like a checkpoint in a game, you wouldn't want to make all that progress just to lose it all through a simple mistake.
No, you wouldn't, so commit your code when it gets to a place that you are happy with, so if something goes wrong, you can revert to that "checkpoint"
Grab the correct tool
AI tokens can get expensive, and you don't need the biggest baddest model in the game to fix the layout of your form.
This means for doing complex tasks, use a model like Opus 4.7, but if you are just getting the UI for your auth form laid out, just use Sonnet 4.6 or alike, you'll spend half the amount of credits for the same result.
Follow me!
If you liked this carousel, give this post a like and follow me for more.